La API de Google Pay les da a los usuarios la oportunidad de pagar en todas partes, mediante la información de pago almacenada en sus Cuentas de Google. En este lab, utilizará la biblioteca cliente de Google Pay para la Web a fin de mejorar la experiencia de confirmación de la compra de una tienda en línea de muestra simplificada. Para ello, creará una experiencia más rápida, conveniente y segura, lo que, a su vez, generará más conversiones y clientes más satisfechos.
Auto T-Shirt Shop es una tienda innovadora que aprovecha los avances más recientes en inteligencia artificial y usa información como preferencias de estilo, clima, época del año y tendencias de moda para sugerirle el artículo más adecuado que pueda comprar.
Las métricas sobre la participación en esta tienda están en ascenso. Lamentablemente, las métricas también reflejan una gran cantidad de abandonos durante el proceso de confirmación de la compra. Decidido por tratar ese problema, uno de los propietarios del proyecto recuerda haber visto un video que muestra los resultados prometedores que Google Pay produjo para sitios similares, por lo que decide probarlo y confiar en que usted se encargará de la integración.
Qué compilarás
En este codelab, se explica cómo integrar Google Pay en un sitio existente, lo que incluye determinar si un usuario puede pagar con una forma de pago compatible con Google Pay, la posición y el diseño del botón de pago y la ejecución de la transacción.
Qué aprenderás
- Cómo integrar Google Pay en una página de confirmación de compras existente
- Cómo elegir una de sus formas de pago preferidas
- Cómo determinar si un usuario está listo para pagar con Google Pay
Qué necesitarás
- Una computadora con acceso a Internet
- Conocimientos básicos de JavaScript
Ejecuta el sitio de muestra en glitch.com
Para comenzar a funcionar lo más rápido posible, este codelab está disponible en glitch.com. Glitch es un entorno gratuito basado en la Web que proporciona un editor de código y funciones de implementación y hosting que puedes usar para compilar y entregar aplicaciones web.
Para comenzar, usa el botón que aparece a continuación para aprovisionar un nuevo entorno de desarrollo en Glitch que ya está configurado con una copia de este codelab.
A partir de ahora, puedes usar el editor de código de Glitch para modificar tus archivos. Comience a entregar su aplicación con el menú Mostrar que se encuentra en la parte superior y elija En una ventana nueva.
Lee el sitio de muestra
Como puedes ver, el repositorio presenta una estructura de archivos sin complicaciones. El objetivo principal de este codelab es brindarte la capacidad de adaptar esta integración a tus aplicaciones existentes y futuras, independientemente del framework, las bibliotecas o las herramientas que elijas para trabajar.
Explorar el sitio
Este mercado de demostración se creó de manera tal que se parece humildemente a cómo se vería su aplicación actual o potencial antes de agregar un medio de compra. De hecho, aunque recomendamos trabajar en esta aplicación de demostración, puedes continuar y usar este codelab para integrar Google Pay en tus aplicaciones existentes.
Ahora, si aún no lo hizo, abra el sitio de demostración, tal como está actualmente. Para ello, haz clic en el botón Mostrar si usas Glitch o abre la URL en la que se ejecuta tu servidor web local.
El sitio de demostración no es sorprendente. Una página de detalles del producto, con una foto, el precio, una descripción, algunos selectores y un botón para dirigirte a un formulario de pago imaginario y común.
El objetivo de este lab es reemplazar este flujo por una experiencia de dos clics con la tecnología de Google Pay.
Planifiquemos esto.
Para comprender mejor esta integración, se divide el proceso en los siguientes pasos fundamentales:
- Cómo cargar la biblioteca
- Determina tu capacidad para pagar con Google Pay
- Muestra el botón para pagar con Google Pay
- Crea y envía la solicitud de pago
- Recopila los resultados
Agregue la etiqueta script
Lo primero que debes hacer para comenzar a usar la API de Google Pay es cargar la biblioteca de JavaScript. Para ello, incluye una etiqueta script en el archivo HTML desde el que intentas llamar a la API y un atributo src que dirija a la biblioteca externa de JavaScript.
Para este codelab, abre el archivo index.html. Debería ver que la etiqueta de secuencia de comandos ya se incluyó:
<script async
src="https://pay.google.com/gp/p/js/pay.js"
onload="onGooglePayLoaded()">
</script>Además de src, agregaste otros dos atributos.
asyncpermite que la secuencia de comandos se cargue y se ejecute de forma asíncrona junto con el resto de la página para que no se vea afectada la primera carga de su documento.onloadte permite diferir la ejecución del código que depende de esta biblioteca hasta que se haya cargado tu secuencia de comandos. Después de hacerlo, se ejecuta la función que especificas en este atributo. En este caso, la función esonGooglePayLoaded.
Crea una instancia del cliente de la API
Una vez que se haya cargado la secuencia de comandos, ya estará todo configurado para que puedas empezar a utilizar esta biblioteca. Para comenzar, crea una instancia del objeto de cliente, que luego usarás para realizar llamadas a la API de Google Pay.
Edita el archivo index.js, que ya forma parte de la estructura de archivos de este proyecto. Reemplaza la función onGooglePayLoaded por el siguiente código.
let googlePayClient;
function onGooglePayLoaded() {
googlePayClient = new google.payments.api.PaymentsClient({
environment: 'TEST'
});
}El cliente de pago se inicializa con un objeto PaymentOptions. Si establece environment en TEST, podrá experimentar con la información de pago ficticia en toda la integración. Cuando estés listo para crear operaciones que admitan transacciones reales, puedes actualizar la propiedad environment a PRODUCTION.
Descripción general
Se cargó la biblioteca cliente de JavaScript de la API de Google Pay. Ahora, configúrela para que realice llamadas a la API por nosotros.
Los siguientes cambios de código para el resto del codelab se realizarán en el archivo index.js.
El esqueleto
Cada vez que te comunicas con la API de Google Pay, debes incluir varios parámetros de configuración en tus solicitudes, como la versión de la API a la que orientas los anuncios. A los fines de este codelab, este objeto también contiene información sobre las formas de pago aceptadas en tu aplicación. La estructura final se ve de la siguiente manera:
{
apiVersion: number,
apiVersionMinor: number,
allowedPaymentMethods: Array
}La propiedad allowedPaymentMethods toma una lista de formas de pago. En cada forma de pago, debe incluir las siguientes propiedades:
{
type: 'CARD',
parameters: {
allowedCardNetworks: Array.<string>,
allowedAuthMethods: Array.<string>
}
}Solo se requieren las propiedades type y parameters para determinar si el usuario en cuestión puede pagar con Google Pay.
La configuración de la forma de pago
En este ejemplo, solo aceptará una configuración, que permite los pagos con tarjeta para Mastercard y Visa, tanto en formularios de tokens como de número de cuenta principal (PAN).
Tu configuración debe establecerse en index.js:
const baseCardPaymentMethod = {
type: 'CARD',
parameters: {
allowedCardNetworks: ['VISA','MASTERCARD'],
allowedAuthMethods: ['PAN_ONLY','CRYPTOGRAM_3DS']
}
};Cómo combinar todas las opciones
En resumen,
Definió una forma de pago que se aceptará en su sitio web, y trabajará con la versión 2.0 de la API. Así se verá la configuración resultante:
const baseCardPaymentMethod = {
type: 'CARD',
parameters: {
allowedCardNetworks: ['VISA','MASTERCARD'],
allowedAuthMethods: ['PAN_ONLY','CRYPTOGRAM_3DS']
}
};
const googlePayBaseConfiguration = {
apiVersion: 2,
apiVersionMinor: 0,
allowedPaymentMethods: [baseCardPaymentMethod]
};Ahora que tienes la configuración base lista, vamos a la parte divertida.
Uno de los objetivos principales de Google Pay es proporcionar una experiencia de confirmación de la compra más rápida y conveniente a los usuarios. Esto no solo se aplica a las situaciones en las que una persona puede usar Google Pay, sino también en situaciones en las que no puede hacerlo. Si usas la solicitud isReadyToPay, puedes determinar tu nivel de preparación para pagar con Google Pay, y tendrás la oportunidad de modificar la experiencia en tu sitio.
¿El usuario puede pagar con Google Pay?
Lo primero que debes hacer es verificar si un usuario específico que está a punto de pagar en tu sitio puede usar Google Pay para hacerlo. En esta solicitud, debes especificar la versión de la API de Google Pay y las formas de pago permitidas en tu sitio. Esto es exactamente lo que contiene el objeto de configuración base definido en el paso anterior.
En index.js dentro de la función onGooglePayLoaded(), pega lo siguiente:
googlePayClient.isReadyToPay(googlePayBaseConfiguration)
.then(function(response) {
if(response.result) {
createAndAddButton();
} else {
alert("Unable to pay using Google Pay");
}
}).catch(function(err) {
console.error("Error determining readiness to use Google Pay: ", err);
});Si la llamada falla o se muestra con una respuesta incorrecta, no se tomarán más medidas en el contexto de Google Pay. En esta situación, el siguiente paso más adecuado sería mostrar una IU adicional que admita otras formas de pago.
Por otro lado, si la respuesta es correcta, ahora está listo para permitir que sus usuarios se beneficien de usar Google Pay. Por lo tanto, puede agregar un botón para iniciar el proceso de pago en el momento de la activación del usuario (por ejemplo, clic en un botón).
Agrega un botón para pagar con Google Pay
Si bien puedes usar cualquier botón que cumpla con los lineamientos de marcas de Google Pay para comenzar el proceso de pago, te recomendamos que generes uno con la API de Google Pay. De esta manera, no solo garantizas un uso preciso de los lineamientos de marca, sino que también te beneficias de otras mejoras incorporadas directamente en el botón, como la localización.
Para generar un botón, usa el método createButton en el objeto PaymentsClient, incluido ButtonOptions para configurar el botón.
En index.js dentro de la función createAndAddButton(), pega lo siguiente:
function createAndAddButton() {
const googlePayButton = googlePayClient.createButton({
// currently defaults to black if default or omitted
buttonColor: 'default',
// defaults to long if omitted
buttonType: 'long',
onClick: onGooglePaymentsButtonClicked
});
document.getElementById('buy-now').appendChild(googlePayButton);
}
function onGooglePaymentsButtonClicked() {
// TODO: Perform transaction
}La única propiedad obligatoria cuando se usa createButton es onClick, que es necesario para determinar el objeto o la función de devolución de llamada que se debe activar cada vez que los usuarios activan el botón. buttonColor y buttonType te permiten personalizar la apariencia de tu botón. Retoca los ajustes según los temas y las IU de tu aplicación.
Una vez que se haya creado el botón, solo debe agregarlo a un nodo apropiado dentro del DOM. En este ejemplo, se usa un nodo div identificado con buy-now para este propósito.
Observa que también definiste una función para manejar eventos de clic de botón. En la siguiente sección, usarás esta función para solicitar una forma de pago.
Prepara la solicitud de pago
En este punto, ya cargó la API de Google Pay y determinó que el usuario de su sitio puede usar Google Pay para realizar un pago. Como resultado, mostraste el botón de pago de Google Pay en la IU y ahora tu usuario está listo para iniciar la transacción. Ahora es el momento de cargar la hoja de pagos final que contiene las formas de pago disponibles para los diferentes usuarios que accedieron.
Al igual que antes, durante la definición de la solicitud isReadyToPay, esta llamada también requiere las propiedades en el objeto de configuración base definido antes (apiVersion, apiVersionMinor y allowedPaymentMethods), además de algunas nuevas. Esta vez, hay una nueva propiedad, tokenizationSpecification y parameters adicionales en sus formas de pago que son relevantes para la solicitud. Además, se deben agregar transactionInfo y merchantInfo.
Incluya información adicional requerida en sus formas de pago.
Para comenzar, crea una copia de la forma de pago base de la tarjeta que utilizaste anteriormente. La forma de pago de la tarjeta ahora requiere una propiedad tokenizationSpecification para definir cómo administrar los datos relacionados con la forma de pago seleccionada, así como otros requisitos de datos necesarios para la transacción real: en este ejemplo, una dirección de facturación completa y un número de teléfono.
La propiedad tokenizationSpecification
La especificación de asignación de token determina cómo se controla y usa la forma de pago seleccionada por los clientes para completar una transacción.
Existen dos tipos diferentes de estrategias de control compatibles. Si procesas la transacción de pago desde tus servidores compatibles con PCI DSS, usa el tipo de especificación DIRECT. En este ejemplo, usas una puerta de enlace de pago para procesar el pago, por lo que debes establecer el tipo de especificación PAYMENT_GATEWAY.
En index.js dentro de la función onGooglePaymentsButtonClicked(), pega lo siguiente:
const tokenizationSpecification = {
type: 'PAYMENT_GATEWAY',
parameters: {
gateway: 'example',
gatewayMerchantId: 'gatewayMerchantId'
}
};En la sección parameters, puedes especificar una puerta de enlace de la lista de proveedores admitidos por la API de Google Pay, junto con la configuración adicional que requiere cada puerta de enlace. A los fines de este lab, es suficiente usar la puerta de enlace example, que genera resultados de prueba para las transacciones ejecutadas.
Parámetros adicionales
De manera similar, ahora puede proporcionar más detalles sobre la información que necesita para solicitar la transacción de forma correcta. Observa cómo en este ejemplo debes agregar las propiedades billingAddressRequired y billingAddressParameters para indicar que, para esta transacción, se requiere la dirección de facturación del usuario en formato completo, incluido un número de teléfono.
En index.js dentro de la función onGooglePaymentsButtonClicked(), pega lo siguiente:
const cardPaymentMethod = {
type: 'CARD',
tokenizationSpecification: tokenizationSpecification,
parameters: {
allowedCardNetworks: ['VISA','MASTERCARD'],
allowedAuthMethods: ['PAN_ONLY','CRYPTOGRAM_3DS'],
billingAddressRequired: true,
billingAddressParameters: {
format: 'FULL',
phoneNumberRequired: true
}
}
};Agrega información sobre la transacción
La propiedad transactionInfo contiene un objeto con detalles financieros sobre la transacción, es decir, el precio y el código de moneda(formato alfa ISO 4217), junto con el estado del precio, que puede ser final o estimado según la naturaleza de la transacción (por ejemplo, el precio puede variar según la dirección de envío especificada).
En index.js dentro de la función onGooglePaymentsButtonClicked(), pega lo siguiente:
const transactionInfo = {
totalPriceStatus: 'FINAL',
totalPrice: '123.45',
currencyCode: 'USD'
};Agregar información sobre el comercio
La solicitud de pago toma información sobre el comercio que realiza la solicitud en la propiedad merchantInfo. En este codelab, te enfocarás en dos de ellas:
-
merchantIdespera que el identificador asociado a tu cuenta una vez que Google apruebe tu sitio para que opere en producción. Ten en cuenta que esto no se evalúa cuando se usa el entornoTEST. merchantNamees un nombre visible de la organización o del sitio. Es posible que se muestre en la hoja de pago de Google Pay para que los usuarios obtengan más información sobre quién solicita la operación.
En index.js dentro de la función onGooglePaymentsButtonClicked(), pega lo siguiente:
const merchantInfo = {
// merchantId: '01234567890123456789', Only in PRODUCTION
merchantName: 'Example Merchant Name'
};Solicita información de pago y procesa el resultado
Ahora, combina la configuración definida anteriormente en el objeto paymentDataRequest final.
En index.js dentro de la función onGooglePaymentsButtonClicked(), pega lo siguiente:
const paymentDataRequest = Object.assign({}, googlePayBaseConfiguration, {
allowedPaymentMethods: [cardPaymentMethod],
transactionInfo: transactionInfo,
merchantInfo: merchantInfo
});En este punto, tienes todo lo que necesitas para solicitarle a la API de Google Pay una forma de pago válida. Para ello, usa el método loadPaymentData en el objeto PaymentsClient y pasa la configuración que acabas de definir.
En index.js dentro de la función onGooglePaymentsButtonClicked(), pega lo siguiente:
googlePayClient
.loadPaymentData(paymentDataRequest)
.then(function(paymentData) {
processPayment(paymentData);
}).catch(function(err) {
// Log error: { statusCode: CANCELED || DEVELOPER_ERROR }
});Llamar al método loadPaymentData activa la presentación de la hoja de pago de Google Pay. Si no hay errores de configuración, puedes consultar una lista de las formas de pago válidas asociadas con la cuenta a la que accediste.
Una vez seleccionada, se cierra la hoja y el Promise se completa con un objeto PaymentData que incluye información relevante sobre la forma de pago seleccionada:
{
"apiVersionMinor": 0,
"apiVersion": 2,
"paymentMethodData": {
"description": "Visa •••• 1234",
"tokenizationData": {
"type": "PAYMENT_GATEWAY",
"token": "examplePaymentMethodToken"
},
"type": "CARD",
"info": {
"cardNetwork": "VISA",
"cardDetails": "1234",
"billingAddress": {
"phoneNumber": ...,
...
}
}
}
}Ahora puedes usar la información de esta forma de pago para realizar la transacción.
function processPayment(paymentData) {
// TODO: Send a POST request to your processor with the payload
// https://us-central1-devrel-payments.cloudfunctions.net/google-pay-server
// Sorry, this is out-of-scope for this codelab.
return new Promise(function(resolve, reject) {
// @todo pass payment token to your gateway to process payment
const paymentToken = paymentData.paymentMethodData.tokenizationData.token;
console.log('mock send token ' + paymentToken + ' to payment processor');
setTimeout(function() {
console.log('mock response from processor');
alert('done');
resolve({});
}, 800);
});
}Hasta ahora, vimos transacciones con importes de pago fijos. Pero supón que quieres actualizar el precio en función de la selección de determinadas propiedades de la transacción (por ejemplo, los detalles de envío). Para lograrlo, proporciona el parámetro paymentDataCallback cuando construyas el cliente. Esta devolución de llamada se utiliza para que puedas controlar los cambios en la transacción y aplicar las modificaciones correspondientes. Puedes detectar cambios en la dirección de envío, la opción de envío y la forma de pago que seleccionaste. En este ejemplo, detectará los cambios que se realicen en la opción de envío seleccionada. Primero, define las variables que contienen toda la información de envío y modifica paymentDataRequest para incluirlas:
const shippingOptionParameters = {
shippingOptions: [
{
id: 'shipping-001',
label: '$1.99: Standard shipping',
description: 'Delivered on May 15.'
},
{
id: 'shipping-002',
label: '$3.99: Expedited shipping',
description: 'Delivered on May 12.'
},
{
id: 'shipping-003',
label: '$10: Express shipping',
description: 'Delivered tomorrow.'
}
]
};
// Shipping surcharges mapped to the IDs above.
const shippingSurcharges = {
'shipping-001': 1.99,
'shipping-002': 3.99,
'shipping-003': 10
};
...
// Place inside of onGooglePaymentsButtonClicked()
paymentDataRequest.shippingAddressRequired = true;
paymentDataRequest.shippingOptionRequired = true;
paymentDataRequest.callbackIntents = ['SHIPPING_OPTION'];
paymentDataRequest.shippingOptionParameters = shippingOptionParameters;
Luego, modificarás la creación de googlePayClient para incluir un paymentDataCallback, al que se llama cada vez que se realiza una modificación incluida en el callbackIntents a la operación de pago. Esta devolución de llamada incluye un objeto con las propiedades modificadas. Puedes usar estos cambios para construir una transacción de pago actualizada:
function onGooglePayLoaded() {
googlePayClient = new google.payments.api.PaymentsClient({
paymentDataCallbacks: { onPaymentDataChanged: paymentDataCallback },
environment: 'TEST'
});
...
}
function paymentDataCallback(callbackPayload) {
const selectedShippingOptionId = callbackPayload.shippingOptionData.id;
const shippingSurcharge = shippingSurcharges[selectedShippingOptionId];
const priceWithSurcharges = 123.45 + shippingSurcharge;
return {
newTransactionInfo: {
totalPriceStatus: 'FINAL',
totalPrice: priceWithSurcharges.toFixed(2),
totalPriceLabel: 'Total',
currencyCode: 'USD',
displayItems: [
{
label: 'Subtotal',
type: 'SUBTOTAL',
price: priceWithSurcharges.toFixed(2),
},
{
label: 'Shipping',
type: 'LINE_ITEM',
price: shippingSurcharge.toFixed(2),
status: 'FINAL'
}]
}
}
};Cuando se muestra este nuevo objeto en la devolución de llamada, se actualiza la información presentada en la hoja de pago para reflejar las modificaciones realizadas en la transacción.
Ahora que comprobó que la integración funciona correctamente, puede ir un paso más allá y solicitar la configuración de su pago en cuanto determine que se puede usar Google Pay. Esto ocurre antes de que el usuario active el botón de pago de Google Pay (haga clic en él).
Si precarga los datos de pago, cuando el usuario decida pagar, la información que la hoja necesita para cargarse ya estará disponible, lo que reducirá considerablemente el tiempo de carga y, por lo tanto, mejorará la experiencia general.
Este método espera la misma entrada que loadPaymentData. Es decir, puedes usar el mismo objeto paymentDataRequest definido antes. Ahora, lo único que debes hacer es incluir una llamada al método de carga previa en cuanto determines que el usuario puede usar Google Pay, después de que isReadyToPay se muestre correctamente:
googlePayClient.isReadyToPay(googlePayBaseConfiguration)
.then(function(response) {
if(response.result) {
createAndAddButton();
googlePayClient.prefetchPaymentData(paymentDataRequest);
}
});De esta manera, redujo el tiempo de carga mediante la carga previa de los datos de pago antes de que el usuario haga clic en el botón. La capacidad de respuesta mejorada de su sitio debería mejorar su porcentaje de conversiones.
Integraste correctamente la API de Google Pay en el sitio de muestra de este codelab o en tu propia aplicación.
Ahora, para llevar esto a producción, no te olvides de consultar la lista de tareas de integración. Una vez finalizado y revisado, recibirá un identificador de comerciante para agregarlo a la configuración de su cliente. Del mismo modo, si tienes pensado usar (o ya usas) un procesador o una puerta de enlace de pagos de terceros, consulta la lista de proveedores admitidos en Google Pay y configura el tuyo. Si quieres realizar la integración directamente con Google Pay, consulta la sección de documentación sobre este tema.
Temas abordados
- Importe y configure la API de Google en su sitio.
- Determina la compatibilidad con la API y reacciona según corresponda.
- Agrega un botón para permitir que los usuarios paguen mediante Google Pay.
- Carga y procesa la información de pago del usuario almacenada anteriormente.
- Optimiza el tiempo de carga mediante la carga previa de la información de pago.
Próximos pasos
- Obtén más información sobre Google Pay.
- Revise la lista de tareas de integración y obtenga un identificador de comerciante.
- Observe los dos tipos diferentes de integración y decida qué le conviene más: realizar la integración directamente o usar una puerta de enlace de pago o un procesador.
- Configura Autorizar pagos para comenzar el proceso de pago y confirmar el estado de autorización. (Autenticación o rechazo)
Más información
- Consulta la referencia de la biblioteca.
- Si ves errores, soluciona los problemas en tu implementación.
- Obtén más información para integrar Google Pay en Android.