La API de Google Pay les brinda a los usuarios la oportunidad de pagar desde cualquier lugar usando la información de pago almacenada en sus Cuentas de Google. En este lab, usarás la biblioteca cliente de Google Pay para la Web para mejorar la experiencia de finalización de compra de una tienda en línea de ejemplo simplificada a través de la creación de una experiencia más rápida, conveniente y segura que, a su vez, genera más conversiones y clientes felices.
Auto T-Shirt Shop es una innovadora tienda que aprovecha los avances más recientes de la Inteligencia Artificial y usa información como las preferencias de estilo, el clima, la época del año y las tendencias de moda para sugerirte los artículos más apropiados que puedes comprar.
Las métricas de participación de esta tienda son muy altas. Lamentablemente, las métricas también reflejan una gran cantidad de abandonos durante el proceso de confirmación de compra. Dispuesto a hacerle frente a eso, uno de los propietarios del proyecto recuerda haber visto un video que mostraba los prometedores resultados que había producido Google Pay en sitios similares, por lo que se decidió a probarlo y confiar en ti para que te encargues de la integración.
Qué compilarás
En este codelab, descubrirás cómo integrar Google Pay a 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 compra existente
- Cómo elegir entre tus formas de pago preferidas
- Cómo determinar si un usuario está listo para pagar con Google Pay
Lo que necesitarás
- Una computadora con acceso a Internet
- Conocimientos básicos de JavaScript
Ejecuta el sitio de ejemplo en glitch.com
Para que puedas comenzar a trabajar 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 hosting e implementación que puedes usar para compilar y publicar aplicaciones web.
Para comenzar, usa el siguiente botón para aprovisionar un nuevo entorno de desarrollo en Glitch que ya esté configurado con una copia de este codelab.
A partir de aquí, puedes usar el editor de código en Glitch para modificar tus archivos. Para comenzar a publicar tu aplicación, usa el menú Mostrar en la parte superior y elige En una ventana nueva.
Observa brevemente el sitio de ejemplo
Como puedes ver, el repositorio tiene una estructura de archivo simple. El objetivo principal de este codelab es brindarte la posibilidad de adaptar esta integración para tus aplicaciones existentes y futuras, independientemente del framework, las bibliotecas o las herramientas con los que elijas trabajar.
Explorar el sitio
Este mercado de demostración se creó de manera tal que es similar a la manera en que podría verse tu aplicación existente o potencial, antes de que agregues un medio de compra. De hecho, si bien te recomendamos trabajar sobre esta aplicación de demostración, puedes usar este codelab para integrar Google Pay a las aplicaciones que ya tienes.
Si todavía no lo hiciste, abre el sitio de demostración tal como está. Para ello, haz clic en el botón Show si usas Glitch o abre la URL en la que se ejecuta tu servidor web local.
El sitio de demostración no tiene nada de sorprendente, ¿verdad? Una página de detalles del producto, con una imagen, el precio, una descripción, algunos selectores y un botón que te lleva a una forma de pago imaginaria y común.
El objetivo de este lab es reemplazar este flujo con una experiencia de dos clics con Google Pay.
Comencemos a planificarlo
Para comprender mejor esta integración, el proceso se divide en los siguientes pasos fundamentales:
- Cómo cargar la biblioteca
- Determina la posibilidad de pagar con Google Pay
- Muestra el botón para pagar con Google Pay
- Crea y envía la solicitud del pago
- Recopila los resultados
Agrega 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 deseas llamar a la API, incluida una etiqueta src que apunte a la biblioteca externa de JavaScript.
Para este codelab, abre el archivo index.html. Deberías 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 tu secuencia de comandos se cargue y ejecute de forma asíncrona junto con el resto de la página, de modo que el tiempo de carga inicial de tu documento no se vea afectado.onloadte ayuda a diferir la ejecución del código que depende de esta biblioteca hasta que se cargue tu secuencia de comandos. Una vez que se completa, se ejecuta la función que especificas en este atributo. En este caso, la función esonGooglePayLoaded.
Crea una instancia del cliente de API
Una vez que se cargue la secuencia de comandos, todo estará listo para que comiences a usar esta biblioteca. Comienza por crear una instancia del objeto cliente, que usarás para realizar llamadas a la API de Google Pay más adelante.
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. Configurar environment en TEST te permite experimentar con información de pago simulada en toda la integración. Cuando esté todo listo para crear operaciones que admitan transacciones reales, puedes actualizar la propiedad environment a PRODUCTION.
Descripción general
Ya cargamos la biblioteca cliente de JavaScript de la API de Google Pay. Ahora, configuremos el cliente para que realice llamadas a la API por nosotros.
Todos los siguientes cambios de código para el resto del codelab se realizarán en el archivo index.js.
La estructura base
Cada vez que te comunicas con la API de Google Pay, hay un número de parámetros de configuración que debes incluir en tus solicitudes, como la versión de la API que estás integrando. Para 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 contiene una lista de formas de pago. Debes incluir las siguientes propiedades por cada forma de pago:
{
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.
Configuración de la forma de pago
En este ejemplo, solo aceptarás una configuración que permita pagos con tarjetas Mastercard y Visa, ambos con formato de número de cuenta principal (PAN) y un token asignado.
Así es como se debe configurar en index.js:
const baseCardPaymentMethod = {
type: 'CARD',
parameters: {
allowedCardNetworks: ['VISA','MASTERCARD'],
allowedAuthMethods: ['PAN_ONLY','CRYPTOGRAM_3DS']
}
};Resumen
Repasemos:
Definiste una forma de pago para que tu sitio web la acepte y vas a trabajar con la versión 2.0 de la API. Así es como debería verse 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 ya tienes lista la configuración básica, pasemos a la parte divertida.
Uno de los objetivos principales de Google Pay es proporcionar una experiencia de finalización de compra más rápida y conveniente para tus usuarios. Esto se aplica a situaciones en las que una persona puede usar Google Pay y en las que no. Usar la solicitud isReadyToPay te permite determinar la disponibilidad para pagar con Google Pay y representa una oportunidad para modificar la experiencia en tu sitio de forma acorde.
¿Tu usuario puede pagar con Google Pay?
Lo primero que debes hacer es comprobar si un usuario específico que está a punto de pagar en tu sitio puede usar Google Pay para hacerlo. Esta solicitud requiere que especifiques 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 básica 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 devuelve una respuesta incorrecta, no se puede realizar ninguna otra acción en el contexto de Google Pay. En esta situación, el próximo paso más adecuado sería mostrar la IU adicional que admite otros medios de pago.
Por otro lado, si la respuesta es correcta, ya puedes permitir a tus usuarios beneficiarse con el uso de Google Pay y, por lo tanto, puedes agregar un botón para iniciar el proceso de pago en la activación del usuario (por ejemplo, clics del botón).
Agrega un botón para pagar con Google Pay
Aunque puedes usar cualquier botón que cumpla con los lineamientos de la marca de Google Pay para iniciar 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 la marca, sino que también te beneficias de otras mejoras integradas 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 necesaria para determinar el objeto de devolución de llamada o la función que se activará cada vez que los usuarios activen el botón. buttonColor y buttonType te permiten personalizar el aspecto de tu botón. Ajusta los valores según los requisitos de la IU y el tema de tu aplicación.
Una vez que se crea el botón, solo debes agregarlo a un nodo adecuado 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 procesar eventos de clics en el 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, cargaste la API de Google Pay y determinaste que el usuario de tu sitio puede usar Google Pay para hacer 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. Es momento de cargar la hoja de pagos final que contiene las formas de pago disponibles para los diferentes usuarios conectados.
Al igual que hiciste durante la definición de la solicitud isReadyToPay, esta llamada también requiere las propiedades del objeto de configuración básica definido anteriormente (apiVersion, apiVersionMinor y allowedPaymentMethods) además de algunas nuevas. Esta vez, hay una nueva propiedad, tokenizationSpecification, y parameters adicionales en tus formas de pago que son relevantes para los fines de esta solicitud. Además, también es necesario agregar transactionInfo y merchantInfo.
Incluye la información adicional necesaria en tus formas de pago
Comienza por crear una copia de la forma de pago de tarjeta básica que utilizamos antes. Esta forma de pago de tarjeta ahora requiere una propiedad tokenizationSpecification para definir cómo procesar los datos relacionados con la forma de pago seleccionada, además de los datos obligatorios para la transacción en sí: en este ejemplo, se requieren 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 procesa y utiliza la forma de pago seleccionada por tus clientes para completar una transacción.
Se admiten dos tipos de estrategias de procesamiento. Si estás procesando la transacción de pago desde servidores que cumplen 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 tanto, configuras 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 a partir de la lista de proveedores compatibles con la API de Google Pay, junto con la configuración adicional que requiere cada puerta de enlace. Para los fines de este lab, es suficiente usar la puerta de enlace example, que produce resultados de prueba para las transacciones ejecutadas.
Parámetros adicionales
De manera similar, ahora puedes brindar más detalles sobre la información que necesitas solicitar para que la transacción se realice correctamente. Observa cómo, en este ejemplo, puedes 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
}
}
};Cómo agregar 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 de 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'
};Cómo agregar información sobre el comercio
La solicitud de pago toma la información sobre el comercio que realiza la solicitud de la propiedad merchantInfo. En este codelab, te enfocarás en dos de ellas:
-
merchantIdespera el identificador asociado a tu cuenta una vez que Google aprueba tu sitio para operar en producción. Ten en cuenta que esto no se evalúa cuando se usa el entornoTEST. merchantNamees un nombre de tu sitio o organización que el usuario puede ver. Esto puede aparecer dentro de la hoja de pago de Google Pay para brindar a los usuarios 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 preguntarle a la API de Google Pay para una forma de pago válida. Para ello, usa el método loadPaymentData del objeto PaymentsClient, que se encuentra en 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 }
});Cuando se llama al método loadPaymentData, se activa la presentación de la hoja de pago de Google Pay. Si no hay errores de configuración, puedes ver una lista de formas de pago válidas asociadas con la cuenta conectada actualmente.
Una vez que se realiza la selección, la hoja se cierra y el objeto Promise se completa con un objeto PaymentData que incluye la información pertinente 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 esta información sobre la forma de pago para realizar la transacción en sí.
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. Sin embargo, supongamos que deseas actualizar el precio en función de la selección de ciertas propiedades de la transacción (por ejemplo, los detalles de envío). Para ello, proporciona el parámetro paymentDataCallback cuando construyas el cliente. Esta devolución de llamada se usa para que manejes los cambios en la transacción y apliques las modificaciones según corresponda. Puedes escuchar los cambios en la dirección de envío, la opción de envío y la forma de pago seleccionadas. En este ejemplo, escucharás los cambios 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;
A continuación, modificarás la creación del googlePayClient para incluir un paymentDataCallback, al que se llama cada vez que se realiza una modificación incluida en el callbackIntents en la operación de pago. Esta devolución de llamada incluye un objeto con las propiedades modificadas. Puedes usar estos cambios para crear 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 devuelve este nuevo objeto en la devolución de llamada, se actualiza la información que se presenta en la hoja de pagos para reflejar las modificaciones realizadas en la transacción.
Ahora que probaste que la integración funciona correctamente, puedes ir un paso más allá y realizar una recuperación previa de la configuración de pago en cuanto determines que se puede usar Google Pay. Esto sucede antes de que el usuario active (haga clic en) el botón de pago de Google Pay.
Si realizas una recuperación previa de los datos de pago, cuando el usuario decida pagar, la información que necesita la hoja para cargarse ya estará disponible, lo que reducirá significativamente 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 que definiste antes. Ahora, todo lo que debes hacer es incluir una llamada al método de recuperación previa tan pronto como determines que el usuario puede usar Google Pay, después de que isReadyToPay devuelva un resultado exitoso:
googlePayClient.isReadyToPay(googlePayBaseConfiguration)
.then(function(response) {
if(response.result) {
createAndAddButton();
googlePayClient.prefetchPaymentData(paymentDataRequest);
}
});De esta manera, redujiste el tiempo de carga con la recuperación previa de los datos de pago antes de que el usuario hiciera clic en el botón. La mayor capacidad de respuesta de tu sitio debería mejorar tu porcentaje de conversiones.
Integraste correctamente la API de Google Pay en el sitio de ejemplo de este codelab o en tu propia aplicación.
Ahora, para implementarlo en la producción, no olvides echar un vistazo a la lista de tareas de integración. Cuando la hayas completado y revisado, recibirás un identificador de comerciante para agregarlo a tu configuración de cliente. De manera similar, si planeas usar (o ya estás usando) un procesador de pagos o una puerta de enlace externa, consulta la lista de proveedores compatibles en Google Pay y configura los tuyos. Si integras con Google Pay directamente, observa la sección de documentación sobre este tema.
Temas abordados
- Importa y configura la API de Google en tu sitio.
- Cómo determinar la compatibilidad de la API y reaccionar según corresponda
- Cómo agregar un botón para permitir a los usuarios pagar con Google Pay
- Cómo cargar y procesar la información de pago del usuario almacenada anteriormente
- Optimiza el tiempo de carga con la recuperación anticipada de la información de pago.
Próximos pasos
- Obtén más información sobre Google Pay.
- Revisa la lista de tareas de integración y obtén un identificador de comerciante.
- Observar los dos tipos diferentes de integración y decidir cuál es mejor para ti: integrar directamente o usar una puerta de enlace o un procesador de pago
- Configura Authorize Payments para iniciar el proceso de pago y confirmar el estado de autorización de un pago. (Autorizar o rechazar)
Más información
- Consulta la referencia de la biblioteca.
- Soluciona problemas en tu implementación si presenta errores.
- Obtén más información para integrar Google Pay en Android.