Modul Google Pay Client Siap

Kawan-kawan, saya memperkenalkan modul JavaScript yang sudah jadi untuk melakukan pembayaran menggunakan Google Pay. Modul ini melibatkan penggunaan npm dengan ekspor-impor di lingkungan pengembangan modern, namun, mereka yang ingin ES5 bersih, saya pikir, dapat dengan mudah mengulanginya.

Tautan ke modul . Kode memiliki dokumentasi dan komentar yang diperlukan. Saya akan memberikan beberapa penjelasan di sini.



Saya harus mengatakan bahwa dokumentasi Google pada tombol pembayaran bukan yang termudah, daftar kesalahan yang dikembalikan oleh Google Pay API juga bukan yang paling lengkap. Karena itu, tidak seperti bekerja dengan ApplePay, dengan Google Pay, saya harus menggambar sedikit sebelum modul benar-benar berfungsi.

Pekerjaan terdiri dari dua tahap: pertama kita harus memutuskan apakah akan menampilkan tombol atau tidak (tidak semua browser mendukung Google Pay), dan kemudian melakukan pemrosesan pembayaran itu sendiri.

1. Tampilan tombol

export function showGooglePayButton(options, callbacks) { //   const check = checkParams("showGooglePayButton", options, callbacks); if (!check) { return false; } else { options = check.options; } const paymentsClient = new google.payments.api.PaymentsClient({environment: options.environment}); //      ,   API callbacks.setPaymentClient(paymentsClient); const request = { apiVersion: 2, apiVersionMinor: 0, allowedPaymentMethods: [options.googleBaseCardPaymentMethod] }; paymentsClient.isReadyToPay(request) .then(function(response) { if (response.result) { callbacks.success(); return true; } else { console.log("    Google Pay  "); callbacks.fail(); } }) .catch(function(err) { console.log("showGooglePayButton ERROR"); callbacks.fail(); }); } 

Tidak ada yang rumit di sini. Dalam opsi, kami melewati dua parameter - googleBaseCardPaymentMethod dan lingkungan.

googleBaseCardPaymentMethod adalah objek yang mencantumkan jenis dan parameter pembayaran (detail lebih lanjut tentang pencarian diizinkan di sini ). Jika tidak disetel, kami memanggil setter standar dalam kode, mengembalikan objek tipikal kepada kami:

 const setGoogleBaseCardPaymentMethod = () => { return { type: "CARD", parameters: { allowedAuthMethods: ["PAN_ONLY", "CRYPTOGRAM_3DS"], allowedCardNetworks: ["AMEX", "DISCOVER", "JCB", "MASTERCARD", "VISA"] } } }; 

lingkungan adalah lingkungan, PRODUKSI atau UJI

Pada panggilan panggilan balik sukses, kami benar-benar menggambar tombol (atau menunjukkan yang sudah ditarik). Ini pilihanmu. Ingatlah bahwa Google memerlukan pencocokan panduannya .

2. Memproses

Untuk menampilkan tombol Google Pay, API peramban Anda membuat objek paymentClient , yang sekarang, bersama dengan parameter lainnya, harus diteruskan ke fungsi pemrosesan. Mari kita lihat parameter lainnya:

googleBaseCardPaymentMethod - lihat di atas
googlePayPublicKey, merc_id, merc_name - agar berhasil dengan Google Pay, Anda harus memiliki pedagang terdaftar. Parameternya kami dapatkan dukungannya.

Selain itu, kami mentransfer keberhasilan dan kegagalan panggilan balik, serta data untuk melakukan pembayaran (lihat di bawah).

Jadi, untuk melakukan pembayaran, kita harus mengambil objek paymentClient yang dibuat sebelumnya dan memanggil metode loadPaymentData dengan objek paymentDataRequest : const paymentDataRequest = getGooglePaymentDataRequest () :

 const getGooglePaymentDataRequest = () => { const cardPaymentMethod = Object.assign( {}, baseMethod, { tokenizationSpecification: token } ); const paymentDataRequest = { apiVersion: 2, apiVersionMinor: 0, allowedPaymentMethods : [cardPaymentMethod], /* for demo (enviroment TEST): merchantInfo : { merchantId: '12345678901234567890', merchantName: 'JOHN SMITH' }, */ /* for prod (enviroment PRODUCTION): merchantInfo : { merchantId: options.merc_id, merchantName: options.merc_name }, */ merchantInfo : { merchantId: options.merc_id, merchantName: options.merc_name }, transactionInfo : { currencyCode: options.currency, totalPriceStatus: 'FINAL', totalPrice: "" + options.sum } }; return paymentDataRequest; }; 

Untuk lingkungan pengujian, Google menawarkan objek merchantInfo sendiri. Itu perlu digunakan dengan merchantId yang ditulis dalam contoh, nama merchant tidak signifikan.

Selain itu, kita membutuhkan objek token :

 const token = { /* for demo (enviroment TEST): parameters: { "protocolVersion": "ECv1", "publicKey": yourTestPublicKey } */ /* for prod (enviroment PRODUCTION): parameters: { "protocolVersion": "ECv1", "publicKey": params.googlePayPublicKey } */ type: 'DIRECT', parameters: { "protocolVersion": "ECv1", "publicKey": options.googlePayPublicKey } }; 

→ Baca lebih lanjut tentang parameter di sini

Selanjutnya, ketika objek terbentuk, menggunakan metode loadPaymentData , permintaan dikirim ke server Google, frame dengan kartu yang disimpan dibuka, setelah operasi selesai, frame ditutup:

 paymentsClient.loadPaymentData(paymentDataRequest) .then(function(paymentData) { const googleToken = JSON.parse(paymentData.paymentMethodData.tokenizationData.token); // your own client-back ajax request here } 

Setelah berhasil mengeksekusi metode (yaitu, memanggil kartu yang disimpan dan melewati verifikasi), kita dapat membuat permintaan AJAX untuk back-end kita sendiri untuk melakukan pembayaran menggunakan Google Pay. Dalam permintaan ini, kita perlu mentransfer googleToken , yang berasal dari Google, serta kunci publik.

Itu saja, pembayaran Google Pay kami telah dilakukan setelah diproses di belakang!