API de Google Pay para la Web 201: Avanzado

1. Introducción

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

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 la producción, necesitarás un merchantId de Google Pay. Solo te llevará un minuto registrarte en la Consola de Google Pay y la Billetera, así que puedes hacerlo ahora.

Sigue los pasos con Firebase Studio

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 ar, bg, ca, cs, da, de, el, en, 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, finalizar 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 biblioteca createButton() toma un argumento de configuración ButtonOptions que te permite definir cómo quieres que se vea y se comporte el botón.

3. Devoluciones de llamada de datos de pagos

El cliente de pagos proporciona un mecanismo para registrar funciones que controlen cuándo ocurren ciertos eventos. La primera es la autorización de pago y la segunda 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. Se invoca esta devolución de llamada cuando la lista callbackIntents contiene PAYMENT_AUTHORIZATION en PaymentDataRequest.
3. onPaymentDataChanged es opcional. Se invoca esta devolución de llamada cuando la lista callbackIntents contiene OFFER, SHIPPING_ADDRESS o SHIPPING_OPTION en PaymentDataRequest.
4. Establece callbackIntents en PaymentDataRequest para activar ambas devoluciones de llamada para este codelab.

4. Autorización de pago

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. Se invoca la función de devolución de llamada onPaymentAuthorized() con un argumento PaymentData y debe devolver una promesa. En este ejemplo, la función elige de forma aleatoria si devuelve un éxito o un error. En tu proyecto, aprovecharás esta oportunidad para procesar la transacción con tu puerta de enlace usando el token que se encuentra en paymentData en paymentData.paymentMethodData.tokenizationData.token.

5. Cambio en los datos de pago

Las Actualizaciones de precios dinámicas permiten que un comercio actualice de forma dinámica las opciones de envío y la información de la transacción según la 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);
  });
}

Es posible que la devolución de llamada INITIALIZE se active 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 y con datos de la cuenta nueva.

Explicación del código

1. La función onPaymentDataChanged() toma IntermediatePaymentData como argumento. Se invoca esta función cuando se cambia la dirección de envío o las opciones de envío en la hoja de pago.
2. La función onPaymentDataChanged() debe devolver una promesa que resuelva un objeto PaymentDataRequestUpdate que especifique la nueva información de la transacción, las opciones de envío y el error para actualizar la hoja de pago.
3. redemptionCodes es un conjunto de códigos promocionales que se ingresan 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

Con el navegador web Google Chrome, abre index.html con Archivo > Abrir archivo… 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 símbolo del sistema 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 en Discord
• Sigue a @GooglePayDevs en X
• Mira videos relacionados con Google Pay en YouTube