API de Google Pay para la Web 201: Avanzado

1. Introducción

Este codelab es una continuación de API de Google Pay para la Web 101: Conceptos básicos y se basa en el código escrito en ese codelab. Para completar este codelab, asegúrate de completar primero ese.

Qué aprenderás

• Cómo personalizar el botón de Google Pay
• Cómo iniciar el proceso de pago
• Cómo confirmar el estado de autorización del pago
• Cómo controlar los cambios en la dirección de envío
• Cómo manejar los códigos de canje

Requisitos

• Un editor de texto de tu elección para editar archivos HTML y JavaScript
• El navegador web Google Chrome o alguna otra forma de probar un sitio web local
• Para producción, necesitarás un merchantId de Google Pay. El registro en la Consola de Google Pay y la Billetera solo lleva un minuto, así que te recomendamos que lo hagas ahora.

Sigue el proceso con Project IDX

2. Personalización de botones

Esta es una breve descripción general de ButtonOptions. Consulta la documentación para obtener una explicación más detallada

Opción	Necesidad	Valores
onClick	Obligatorio	Nombre del controlador de eventos de JavaScript
allowedPaymentMethods	Opcional	PaymentMethod[]
buttonColor	Opcional	predeterminado, negro, blanco
buttonLocale	Opcional	Código ISO 639-1 de dos letras. Las configuraciones regionales admitidas incluyen en, ar, bg, ca, cs, da, de, el, es, et, fi, fr, hr, id, it, ja, ko, ms, nl, no, pl, pt, ru, sk, sl, sr, sv, th, tr, uk y zh.
buttonRadius	Opcional	De 0 a 100
buttonRootNode	Opcional	HTMLDocument o ShadowRoot
buttonSizeMode	Opcional	estático, relleno
buttonType	Opcional	reservar, comprar, confirmar la compra, donar, pedir, pagar, simple, suscribirse

Busca el método renderGooglePayButton() en tu archivo main.js y reemplázalo por el código que se indica aquí.

function renderGooglePayButton() {
  const button = getGooglePaymentsClient().createButton({
    buttonColor: 'default',
    buttonType: 'buy',
    buttonRadius: 4,
    buttonLocale: 'en',
    onClick: onGooglePaymentButtonClicked,
    allowedPaymentMethods: baseGooglePayRequest.allowedPaymentMethods,
  });

  document.getElementById(GPAY_BUTTON_CONTAINER_ID).appendChild(button);
}

Explicación del código

1. El método de la biblioteca createButton() toma un argumento de configuración ButtonOptions que te permite definir cómo quieres que se vea y comporte el botón.

3. Devolución de llamadas de datos de pago

El cliente de pagos proporciona un mecanismo para que registres funciones que se encarguen de controlar cuando ocurran ciertos eventos. El primero es la autorización del pago y el segundo es el cambio de datos de pago.

1. Busca el comentario // todo: paymentDataCallbacks en main.js y reemplázalo por este código.

   paymentDataCallbacks: {
     onPaymentAuthorized: onPaymentAuthorized,
     onPaymentDataChanged: onPaymentDataChanged
   },
   

2. Luego, busca la sección Event Handlers de main.js y agrega el siguiente código al final de la sección.

   function onPaymentAuthorized(paymentData) {
     // We'll fill this in later
   }
   
   function onPaymentDataChanged(intermediatePaymentData) {
     // We'll fill this in later
   }
   
   

3. Por último, busca el comentario // todo: callbackIntents dentro de main.js y reemplázalo por este código. En este codelab, implementaremos los 4 intents.

   callbackIntents: [
     'PAYMENT_AUTHORIZATION',
     'SHIPPING_ADDRESS',
     'SHIPPING_OPTION',
     'OFFER',
   ],
   shippingAddressRequired: true,
   shippingOptionRequired: true,
   shippingOptionParameters: {
     defaultSelectedOptionId: 'shipping-001',
     shippingOptions: [
       {
         id: 'shipping-001',
         label: '$0.00: Free shipping',
         description: 'Free Shipping delivered in 5 business days.'
       },
       {
         id: 'shipping-002',
         label: '$1.99: Standard shipping',
         description: 'Standard shipping delivered in 3 business days.'
       },
       {
         id: 'shipping-003',
         label: '$1000: Express shipping',
         description: 'Express shipping delivered in 1 business day.'
       },
     ],
   },
   

Explicación del código

1. La propiedad PaymentDataCallbacks tiene dos subpropiedades: una para una devolución de llamada de autorización de pago y la segunda para una devolución de llamada de cambio de datos de pago.
2. Si implementas devoluciones de llamada, onPaymentAuthorized es obligatorio. Esta devolución de llamada se invoca cuando la lista callbackIntents contiene PAYMENT_AUTHORIZATION en PaymentDataRequest.
3. onPaymentDataChanged es opcional. Esta devolución de llamada se invoca cuando la lista callbackIntents contiene OFFER, SHIPPING_ADDRESS o SHIPPING_OPTION en PaymentDataRequest.
4. Establece el callbackIntents en el PaymentDataRequest para activar ambas devoluciones de llamada de este codelab.

4. Autorización de pago

La función Authorize Payments se usa para iniciar el proceso de pago y confirmar el estado de autorización del pago.

Busca la función onPaymentAuthorized() en main.js que agregaste en el último paso y reemplázala por el siguiente código.

function onPaymentAuthorized(paymentData) {
  return new Promise(function(resolve, reject) {
    // Write the data to console for debugging
    console.log("onPaymentAuthorized", paymentData);

    // Do something here to pass token to your gateway

    // To simulate the payment processing, there is a 70% chance of success
    const paymentAuthorizationResult = (Math.random() > 0.3)
      ? {transactionState: 'SUCCESS'}
      : {
        transactionState: 'ERROR',
        error: {
          intent: 'PAYMENT_AUTHORIZATION',
          message: 'Insufficient funds',
          reason: 'PAYMENT_DATA_INVALID'
        }
      };

    resolve(paymentAuthorizationResult);
  });
}

Explicación del código

1. La función de devolución de llamada onPaymentAuthorized() se invoca con un argumento PaymentData y debe mostrar una promesa. En este ejemplo, la función elige de forma aleatoria si mostrar un resultado correcto o un error. En tu proyecto, aprovecharás esta oportunidad para procesar la transacción con tu puerta de enlace con el token que se encuentra en paymentData en paymentData.paymentMethodData.tokenizationData.token.

5. Cambio de datos de pago

Las actualizaciones de precios dinámicos permiten que un comercio actualice de forma dinámica las opciones de envío y la información de la transacción en función de una dirección de envío elegida. Además, puedes actualizar de forma dinámica la información de la transacción según la opción de envío elegida.

Busca la función onPaymentDataChanged() en main.js que agregaste en el último paso y reemplázala por el siguiente código.

function onPaymentDataChanged(intermediatePaymentData) {
  return new Promise(function(resolve, reject) {
    let paymentDataRequestUpdate = {};

    // Write the data to console for debugging
    console.log("onPaymentDataChanged", intermediatePaymentData);

    switch(intermediatePaymentData.callbackTrigger)
    {
      case "INITIALIZE":
        // Handle initialize
        break;
      case "SHIPPING_ADDRESS":
        // Read intermediatePaymentData.transactionInfo
        // Read intermediatePaymentData.shippingAddress
        // Update paymentDataRequestUpdate.newTransactionInfo
        break;
      case "SHIPPING_OPTION":
        // Read intermediatePaymentData.transactionInfo
        // Read intermediatePaymentData.shippingOptionData
        // Update paymentDataRequestUpdate.newTransactionInfo
        // Update paymentDataRequestUpdate.newShippingOptionParameters
        break;
      case "OFFER":
        // Read intermediatePaymentData.offerData
        // Read intermediatePaymentData.transactionInfo
        // Update paymentDataRequestUpdate.newTransactionInfo
        // Update paymentDataRequestUpdate.newOfferInfo
        break;
      default:
        // Update paymentDataRequestUpdate.error
    }

    resolve(paymentDataRequestUpdate);
  });
}

La devolución de llamada de INITIALIZE se puede activar varias veces durante una sola llamada a loadPaymentData(), por lo que debes asegurarte de poder controlar varias llamadas a ella. Por ejemplo, cuando el usuario cambia de cuenta, se vuelve a llamar a onPaymentDataChanged() con INITIALIZE con los datos de la cuenta nueva.

Explicación del código

1. La función onPaymentDataChanged() toma IntermediatePaymentData como argumento. Esta función se invoca cuando se cambia la dirección de envío o las opciones de envío en la hoja de pagos.
2. La función onPaymentDataChanged() debe mostrar una promesa que resuelva un objeto PaymentDataRequestUpdate que especifique la información de la transacción nueva, las opciones de envío y el error para actualizar la hoja de pagos.
3. redemptionCodes es un conjunto de códigos promocionales ingresados en la hoja de pagos. Incluye los códigos que ya se aprobaron.

6. Conclusión

¡Felicitaciones por completar este codelab! Aprendiste a hacer lo siguiente:

Cómo ejecutar el proyecto

Prueba con Google Chrome

En el navegador web Google Chrome, abre index.html con File > Open File… en el menú principal de Chrome. Chrome ejecutará main.js cuando se abra el proyecto de esta manera. Es posible que otros navegadores web no permitan la ejecución de JavaScript.

– o –

Cómo realizar pruebas con un servidor web local

Si tienes instalado Python, ejecuta python3 -m http.server desde un mensaje de la terminal en la carpeta raíz pay-web-101.

$ cd /your/path/to/pay-web-101
$ python3 -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...

Luego, visita tu sitio en http://localhost:8000.

Lo que vendrá

• Revisa la lista de tareas de integración

Recursos adicionales

• Únete a la conversación en el canal#payments de Discord
• Sigue a @GooglePayDevs en X.
• Mirar videos relacionados con Google Pay en YouTube