Módulo de cliente de Google Pay listo

Camaradas, les presento un módulo JavaScript listo para realizar pagos con Google Pay. El módulo implica el uso de npm con export-import en un entorno de desarrollo moderno, sin embargo, aquellos que quieren un ES5 limpio, creo, pueden rehacerlo fácilmente.

Enlace al módulo . El código tiene la documentación y los comentarios necesarios. Daré algunas explicaciones aquí.



Debo decir que la documentación de Google en el botón de pago resultó no ser la más fácil, la lista de errores devuelta por la API de Google Pay tampoco es la más completa. Por lo tanto, a diferencia de trabajar con ApplePay, con Google Pay, tuve que dibujar un poco antes de que el módulo realmente funcionara.

El trabajo consta de dos etapas: primero debemos decidir si mostrar el botón o no (no todos los navegadores son compatibles con Google Pay), y luego realizar el proceso de pago en sí.

1. Pantalla de botones

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

Nada complicado aquí. En las opciones, pasamos dos parámetros: googleBaseCardPaymentMethod y el entorno.

googleBaseCardPaymentMethod es un objeto que enumera los tipos y parámetros de pago (más detalles sobre la búsqueda permitidos aquí ). Si no está configurado, llamamos al configurador estándar en el código, devolviéndonos un objeto típico:

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

ambiente es un ambiente, PRODUCCIÓN o PRUEBA

En la llamada de la devolución de llamada exitosa, en realidad dibujamos (o mostramos el botón ya dibujado). Esta es tu elección. Solo recuerda que Google requiere que coincidan sus guías .

2. Procesamiento

Para mostrar el botón Google Pay, la API de su navegador creó el objeto pagosCliente , que ahora, junto con otros parámetros, debe pasar a la función de procesamiento. Veamos otros parámetros:

googleBaseCardPaymentMethod - ver arriba
googlePayPublicKey, merc_id, merc_name : para trabajar correctamente con Google Pay, debe tener un comerciante registrado. Sus parámetros nos respaldan.

Además, transferimos devoluciones de llamadas exitosas y fallidas, así como datos para realizar un pago (ver más abajo).

Por lo tanto, para realizar un pago, debemos tomar el objeto de pagosClient previamente creado y llamar al método loadPaymentData con el objeto 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; }; 

Para un entorno de prueba, Google ofrece un objeto merchantInfo. Debe usarse con el merchantId que está escrito en el ejemplo, merchantName no es significativo.

Además, necesitamos un objeto 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 } }; 

→ Lea más sobre los parámetros aquí

Además, cuando se forma el objeto, utilizando el método loadPaymentData , se envía una solicitud al servidor de Google, se abre el marco con las tarjetas guardadas, una vez completada la operación, se cierra el marco:

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

Después de la ejecución exitosa del método (es decir, llamar a las tarjetas guardadas y pasar la verificación), podemos hacer una solicitud AJAX para nuestro propio back-end para hacer un pago usando Google Pay. En esta solicitud, necesitaremos transferir googleToken , que vino de Google, así como la clave pública.

¡Eso es todo, nuestro pago de Google Pay se realizó después del procesamiento en la parte posterior!