Saltar al contenido

Cómo integrar GooglePay en reacción

Una vez que añada el botón a su página y el usuario haga clic en el botón de pago de Google, llame al método loadPaymentData() para abrir la ventana de pago de Google Pay. Construye el objeto paymentDataRequest, que incluye un conjunto de configuraciones de pago que se utilizarán para esta transacción en particular.

1234567891011functionprocessPayment(){// ... googlePayClient .loadPaymentData(paymentDataRequest).then(function(paymentData){console.log(paymentData);}).catch(function(err){console.log(err);});}

jsx

Cómo integrar GooglePay en reacción
Cómo integrar GooglePay en reacción

Además de las credenciales de pago, también puede solicitar información adicional como correo electrónico, número de teléfono, dirección de envío, dirección de facturación, etc.

12345678910111213const cardPaymentMethod ={ type: "CARD", tokenizationSpecification: tokenizationSpecification, parameters:{ allowedCardNetworks: ["VISA", "MASTERCARD"], allowedAuthMethods:["PAN_ONLY", "CRYPTOGRAM_3DS"], billingAddressRequired:true, billingAddressParameters:{ format: "FULL", phoneNumberRequired:true}}};

js

La información de la transacción y del comerciante, junto con el objeto de configuración básica, debe incluirse en el objeto paymentDataRequest.

12345678910111213141516171819const transactionInfo ={ totalPriceStatus: "FINAL", totalPrice: "123.45", currencyCode: "USD"};const merchantInfo ={// merchantId: 01234567890123456789$0027, Sólo en PRODUCCIÓN merchantName: "Your Merchant Name"};const paymentDataRequest ={...googlePayBaseConfiguration,...{ allowedPaymentMethods:[cardPaymentMethod], transactionInfo, merchantInfo }};

js

tokenizationSpecification es un objeto que contiene los parámetros de tokenización de la solicitud de pago. Aquí se define la pasarela de pago que se utilizará en la aplicación.

1234567const tokenizationSpecification ={ type: "PAYMENT_GATEWAY", parameters:{ gateway: "ejemplo", gatewayMerchantId: "gatewayMerchantId"}};

js

En esta guía, usarás el Procesador de Rayas, pero hay un montón de otras opciones disponibles.

12345678const tokenizationSpecification ={ type: "PAYMENT_GATEWAY", parameters:{ gateway: "stripe", "stripe:version": "v3", "stripe:publishableKey":YOUR_STRIPE_PUBLISHABLE_KEY}};

js

La especificación del token define cómo se gestiona y utiliza el método de pago elegido por sus clientes para completar una transacción. Cuando hayas construido el objeto de la solicitud, pásalo a loadPaymentData, una llamada async que abrirá una hoja de pago de Google. Después de que el usuario haga una selección, Google le devolverá un objeto paymentData, que consiste en metadatos sobre la selección del usuario. Incluye el token de pago, que puede utilizar para completar la transacción. En este momento, ha realizado todos los pasos necesarios y la transacción está lista para ser completada.

Para aprender más sobre el manejo del token de la tarjeta, mira esta guía de integración de la banda.