Bereites Google Pay Client-Modul

Genossen, ich stelle ein vorgefertigtes JavaScript-Modul für Zahlungen mit Google Pay vor. Das Modul beinhaltet die Verwendung von npm mit Export-Import in einer modernen Entwicklungsumgebung, aber diejenigen, die sauberes ES5 wollen, können es meiner Meinung nach leicht wiederholen.

Link zum Modul . Der Code enthält die erforderlichen Unterlagen und Kommentare. Ich werde hier einige Erklärungen geben.



Ich muss sagen, dass die Google-Dokumentation auf der Zahlungsschaltfläche nicht die einfachste war. Die Liste der von der Google Pay-API zurückgegebenen Fehler ist auch nicht die vollständigste. Daher musste ich im Gegensatz zur Arbeit mit ApplePay und Google Pay ein wenig zeichnen, bevor das Modul wirklich funktionierte.

Die Arbeit besteht aus zwei Schritten: Zuerst müssen wir entscheiden, ob die Schaltfläche angezeigt werden soll oder nicht (nicht alle Browser unterstützen Google Pay), und dann die Zahlungsverarbeitung selbst durchführen.

1. Tastenanzeige

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(); }); } 

Hier ist nichts kompliziert. In Optionen übergeben wir zwei Parameter - googleBaseCardPaymentMethod und Umgebung.

googleBaseCardPaymentMethod ist ein Objekt, das Zahlungsarten und -parameter auflistet (weitere Details zur Suche sind hier zulässig ). Wenn es nicht gesetzt ist, rufen wir den Standardsetter im Code auf und geben ein typisches Objekt an uns zurück:

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

Umwelt ist eine Umwelt, Produktion oder Test

Beim Aufruf des Erfolgsrückrufs zeichnen wir tatsächlich die Schaltfläche (oder zeigen sie an). Dies ist Ihre Wahl. Denken Sie daran, dass Google das Abgleichen seiner Handbücher erfordert.

2. Verarbeitung

Um die Google Pay-Schaltfläche anzuzeigen, hat die API Ihres Browsers daszahlungsclient- Objekt erstellt, das nun zusammen mit anderen Parametern an die Verarbeitungsfunktion übergeben werden muss. Schauen wir uns andere Parameter an:

googleBaseCardPaymentMethod - siehe oben
googlePayPublicKey, merc_id, merc_name - Um erfolgreich mit Google Pay arbeiten zu können, müssen Sie einen registrierten Händler haben. Seine Parameter erhalten wir Unterstützung.

Darüber hinaus übertragen wir erfolgreiche und fehlgeschlagene Rückrufe sowie Daten für die Zahlung (siehe unten).

Um eine Zahlung zu tätigen, müssen wir das zuvor erstellte settingsClient- Objekt verwenden und die loadPaymentData- Methode mit dem payDataRequest- Objekt aufrufen: const feeDataRequest = 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; }; 

Für eine Testumgebung bietet Google ein eigenes MerchantInfo-Objekt an. Es muss mit der MerchantId verwendet werden , die im Beispiel geschrieben ist. MerchantName ist nicht signifikant.

Zusätzlich benötigen wir ein Token- Objekt:

 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 } }; 

→ Lesen Sie hier mehr über die Parameter

Wenn das Objekt unter Verwendung der loadPaymentData- Methode gebildet wird, wird eine Anforderung an den Google-Server gesendet, der Rahmen mit den gespeicherten Karten wird geöffnet, und nach Abschluss des Vorgangs wird der Rahmen geschlossen:

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

Nach erfolgreicher Ausführung der Methode (dh Aufrufen gespeicherter Karten und Bestehen der Überprüfung) können wir eine AJAX-Anfrage für unser eigenes Back-End stellen, um eine Zahlung mit Google Pay vorzunehmen. In dieser Anfrage müssen wir googleToken , das von Google stammt, sowie den öffentlichen Schlüssel übertragen.

Das war's, unsere Google Pay Zahlung hat nach Bearbeitung auf der Rückseite stattgefunden!