Module client Google Pay prêt

Camarades, je présente un module JavaScript prêt à l'emploi pour effectuer des paiements à l'aide de Google Pay. Le module implique l'utilisation de npm avec export-import dans un environnement de développement moderne, cependant, ceux qui veulent nettoyer ES5, je pense, peuvent facilement le refaire.

Lien vers le module . Le code contient la documentation et les commentaires nécessaires. Je vais donner quelques explications ici.



Je dois dire que la documentation Google sur le bouton de paiement n'était pas la plus simple, la liste des erreurs renvoyées par l'API Google Pay n'est pas non plus la plus complète. Par conséquent, contrairement à travailler avec ApplePay, avec Google Pay, j'ai dû dessiner un peu avant que le module ne fonctionne vraiment.

Le travail comporte deux étapes: nous devons d'abord décider d'afficher ou non le bouton (tous les navigateurs ne prennent pas en charge Google Pay), puis effectuer le traitement du paiement lui-même.

1. Affichage des boutons

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

Rien de compliqué ici. Dans les options, nous passons deux paramètres - googleBaseCardPaymentMethod et environnement.

googleBaseCardPaymentMethod est un objet qui répertorie les types et les paramètres de paiement (plus de détails sur la recherche autorisés ici ). S'il n'est pas défini, nous appelons le setter standard dans le code, en nous renvoyant un objet typique:

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

environnement est un environnement, PRODUCTION ou TEST

Lors de l'appel du rappel de succès, nous dessinons (ou affichons le bouton déjà dessiné). C'est ton choix. N'oubliez pas que Google nécessite de faire correspondre ses guides .

2. Traitement

Pour afficher le bouton Google Pay, l'API de votre navigateur a créé l'objet paymentClient , qui doit désormais, avec d'autres paramètres, être transmis à la fonction de traitement. Regardons d'autres paramètres:

googleBaseCardPaymentMethod - voir ci-dessus
googlePayPublicKey, merc_id, merc_name - pour fonctionner correctement avec Google Pay, vous devez avoir un marchand enregistré. Ses paramètres nous soutiennent.

De plus, nous transférons les rappels de réussite et d'échec, ainsi que les données pour effectuer un paiement (voir ci-dessous).

Ainsi, pour effectuer un paiement, nous devons prendre l'objet de paiementsClient créé précédemment et appeler la méthode loadPaymentData avec l'objet 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; }; 

Pour un environnement de test, Google propose son propre objet merchantInfo. Il doit être utilisé avec le merchantId écrit dans l'exemple, merchantName n'est pas significatif.

De plus, nous avons besoin d'un objet jeton :

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

→ En savoir plus sur les paramètres ici

De plus, lorsque l'objet est formé, en utilisant la méthode loadPaymentData , une demande est envoyée au serveur Google, le cadre avec les cartes enregistrées est ouvert, une fois l'opération terminée, le cadre est fermé:

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

Après une exécution réussie de la méthode (c'est-à-dire, appeler des cartes enregistrées et passer la vérification), nous pouvons faire une demande AJAX pour notre propre back-end afin d'effectuer un paiement en utilisant Google Pay. Dans cette demande, nous devrons transférer googleToken , qui provient de Google, ainsi que la clé publique.

Voilà, notre paiement Google Pay a eu lieu après le traitement au dos!