Obtén información sobre cómo los comercios integran las apps de pago y cómo funcionan las transacciones de pago con la API Payment Request.
Las APIs de Web Payments son funciones de pago dedicadas integradas en el navegador por primera vez. Con los pagos web, la integración de los comerciantes con las aplicaciones de pagos se simplifica y mejora la seguridad de la experiencia del cliente.
Para obtener más información sobre los beneficios de utilizar Pagos web, consulta Empoderamiento aplicaciones de pago con Pagos web.
En este artículo, se explica cómo realizar una transacción de pago en el sitio web de un comercio y te ayuda a comprender cómo funciona la integración de apps de pago.
El proceso consta de 6 pasos:
- El comercio inicia una transacción de pago.
- El comercio muestra un botón de pago.
El cliente presiona el botón de pago.
El navegador inicia la app de pagos.
Si el cliente cambia algún detalle (como las opciones de envío o sus dirección), el comerciante actualiza los detalles de la transacción que reflejan el cambio.
Una vez que el cliente confirma la compra, el comercio valida el pago y completa la transacción.
Paso 1: El comercio inicia una transacción de pago
Cuando un cliente decide realizar una compra, el comercio inicia el pago.
transacción construyendo un
PaymentRequest
. Este objeto incluye información importante sobre la transacción:
- Formas de pago aceptables y sus datos para procesar la transacción
- Son los detalles, como el precio total (obligatorio) y la información sobre los artículos.
- Opciones en las que los comercios pueden solicitar información de envío, como un dirección IP y una opción de envío.
- Los comercios también pueden solicitar la dirección de facturación, el nombre del pagador, el correo electrónico y número de teléfono.
- Los comercios también pueden incluir envíos opcionales
tipo
(
shipping
,delivery
opickup
) enPaymentRequest
. La app de pagos puedes usarlo como sugerencia para mostrar las etiquetas correctas en su IU.
const request = new PaymentRequest([{
supportedMethods: 'https://bobpay.xyz/pay',
data: {
transactionId: '****'
}
}], {
displayItems: [{
label: 'Anvil L/S Crew Neck - Grey M x1',
amount: { currency: 'USD', value: '22.15' }
}],
total: {
label: 'Total due',
amount: { currency: 'USD', value : '22.15' }
}
}, {
requestShipping: true,
requestBillingAddress: true,
requestPayerEmail: true,
requestPayerPhone: true,
requestPayerName: true,
shippingType: 'delivery'
});
Es posible que algunos controladores de pago requieran que el comercio proporcione el ID de transacción. que haya emitido con anticipación como parte de la información de la transacción. R La integración típica incluye la comunicación entre el comercio el servidor del controlador de pagos para reservar el precio total. Esto evita que los recursos maliciosos que los clientes manipulen el precio y engañen al comercio con un la validación al final de la transacción.
El comercio puede pasar un ID de transacción como parte del
PaymentMethodData
propiedad data
del objeto.
Con la información de la transacción, el navegador pasa por un descubrimiento
Proceso de las aplicaciones de pago especificado en el PaymentRequest
basado en el pago
identificadores de métodos de pago. De esta manera, el navegador puede determinar la app de pago para
se lanza en cuanto el comercio está listo para continuar con la transacción.
Para obtener más información sobre cómo funciona el proceso de descubrimiento, consulta Configura una pago método.
Paso 2: El comercio muestra un botón de pago
Los comercios admiten muchas formas de pago, pero solo deben presentar el pago.
para aquellos que el cliente realmente puede usar. Cómo mostrar un botón de pago
que no se pueda usar es una mala experiencia del usuario. Si un comercio puede predecir que un
La forma de pago especificada en el objeto PaymentRequest
no funcionará para
puede proporcionar una solución de resguardo o no mostrar ese botón en absoluto.
Con una instancia de PaymentRequest
, un comercio puede consultar si un cliente
la aplicación de pago disponible.
¿El cliente tiene disponible la app de pagos?
El
canMakePayment()
La forma de pago de PaymentRequest
devuelve true
si hay una app de pagos disponible en el
el dispositivo del cliente. “Disponible” significa que una aplicación de pago que admita
se descubre la forma de pago y se instaló la aplicación de pago específica de la plataforma.
la aplicación de pagos basada en la web está lista para ser
registrada.
const canMakePayment = await request.canMakePayment();
if (!canMakePayment) {
// Fallback to other means of payment or hide the button.
}
Paso 3: El cliente presiona el botón de pago
Cuando el cliente presiona el botón de pago, el comercio llama al show()
de la instancia de PaymentRequest
, que activa inmediatamente el inicio de
la IU de pago.
En caso de que el precio total final se establezca de forma dinámica (por ejemplo, si se recupera de un de pago), el comerciante puede diferir el lanzamiento de la IU de pago hasta que el total sea conocidos.
Aplaza el lanzamiento de la IU de pago
Consulta una demostración sobre cómo diferir el pago de usuario final hasta que el precio total final sea determinado.
Para diferir la IU de pago, el comercio pasa una promesa al método show()
.
El navegador mostrará un indicador de carga hasta que se resuelva la promesa y
de que la transacción esté lista para comenzar.
const getTotalAmount = async () => {
// Fetch the total amount from the server, etc.
};
try {
const result = await request.show(getTotalAmount());
// Process the result…
} catch(e) {
handleError(e);
}
Si no hay ninguna promesa especificada como argumento para show()
, el navegador
iniciar la IU de pago de inmediato.
Paso 4: El navegador inicia la app de pagos
El navegador puede iniciar una aplicación de pago específica de la plataforma o basada en la Web. (Puedes obtener más información sobre cómo Chrome determina qué aplicación de pagos lanzamiento).
En gran parte, la forma de crear una aplicación de pago depende del desarrollador, emitidos desde y hacia el comercio, así como la estructura de los datos que se transmiten con esos eventos, se estandarizan.
Cuando se inicia la aplicación de pago, recibe la transacción.
información
el objeto PaymentRequest
en el paso 1, que incluye lo siguiente:
- Datos de la forma de pago
- Precio total
- Opciones de pago
La app de pagos usa la información de la transacción para etiquetar su IU.
Paso 5: Cómo puede un comercio actualizar los detalles de la transacción según las acciones del cliente
Los clientes tienen la opción de cambiar los detalles de la transacción, como el pago. forma de pago y la opción de envío en la app de pago. Mientras el cliente hace cambios, el comercio recibe los eventos de cambio y actualiza los detalles de la transacción.
Hay cuatro tipos de eventos que puede recibir un comercio:
- Evento de cambio de forma de pago
- Evento de cambio de dirección de envío
- Evento de cambio de opción de envío
- Evento de validación del comercio
Evento de cambio de forma de pago
Una app de pagos admite varias formas de pago, y un comercio puede ofrecer un descuento especial según la selección del cliente. Para abordar este caso de uso, El evento de cambio de la forma de pago puede informar al comercio sobre el nuevo pago. de modo que puedan actualizar el precio total con el descuento y devolverlo volver a la aplicación de pago.
request.addEventListener('paymentmethodchange', e => {
e.updateWith({
// Add discount etc.
});
});
Evento de cambio de dirección de envío
De manera opcional, una app de pago puede proporcionar la dirección de envío del cliente. Este es es conveniente para los clientes porque no tienen que ingresar manualmente ningún detalle en un formulario y pueden almacenar su dirección de envío en el en lugar de hacerlo en varios sitios web de comercios diferentes.
Si un cliente actualiza su dirección de envío en una app de pagos después del
se inició la transacción, se enviará un evento 'shippingaddresschange'
al comercio. Este evento ayuda al comercio a determinar el costo de envío
en la nueva dirección, actualiza el precio total y devuélvelo a la app de pagos.
request.addEventListener('shippingaddresschange', e => {
e.updateWith({
// Update the details
});
});
Si el comercio no puede realizar envíos a la dirección actualizada, puede mostrar un mensaje de error agregando un parámetro de error a los detalles de la transacción que se muestran al de pagos de Google.
Evento de cambio de opción de envío
Un comercio puede ofrecer varias opciones de envío al cliente y delegar esa opción a la app de pago. Las opciones de envío se muestran como una lista de precios y nombres de servicios que el cliente puede seleccionar. Por ejemplo:
- Envío estándar gratis
- Envío exprés: USD 5
Cuando un cliente actualiza la opción de envío en una app de pagos, se genera una
Se enviará el evento 'shippingoptionchange'
al comercio. El comercio puede
determinar el costo de envío, actualizar el precio total y devolverlo al
de pagos de Google.
request.addEventListener('shippingoptionchange', e => {
e.updateWith({
// Update the details
});
});
El comercio puede modificar dinámicamente las opciones de envío en función de la dirección de envío. Esto es útil cuando un comercio quiere ofrecer conjuntos diferentes de opciones de envío para clientes nacionales e internacionales.
Evento de validación del comercio
Para mayor seguridad, una app de pagos puede realizar una validación de comerciante antes y avanzar al flujo de pago. El diseño del mecanismo de validación depende la aplicación de pagos, pero el evento de validación del comercio informa al comercio de la URL que pueden usar para validarse a sí mismos.
request.addEventListener('merchantvalidation', e => {
e.updateWith({
// Use `e.validateURL` to validate
});
});
Paso 6: El comercio valida el pago y completa la transacción
Cuando el cliente autoriza correctamente el pago, se usa el método show()
devuelve una promesa que resuelve un
PaymentResponse
El objeto PaymentResponse
incluye la siguiente información:
- Detalles del resultado del pago
- Dirección de envío
- Opción de envío
- Información de contacto
En este punto, es posible que la IU del navegador aún muestre un indicador de carga, lo que significa que aún no se completa la transacción.
Si la aplicación de pago se cancela debido a un error o error en el pago, la
se rechaza la promesa que devuelve show()
y el navegador cancela el pago
transacción.
Procesamiento y validación del pago
El details
en PaymentResponse
es el objeto de credencial de pago que se muestra.
desde la app de pagos. El comercio puede usar la credencial para procesar o validar
el pago. El funcionamiento de este proceso crítico depende del controlador de pago.
Completa la transacción o vuelve a intentarlo
Cuando el comercio determina si la transacción se realizó correctamente o no, pueden hacer lo siguiente:
- Llama al método
.complete()
para completar la transacción y descartar el indicador de carga de trabajo. - Permite que el cliente vuelva a intentarlo llamando al método
retry()
.
async function doPaymentRequest() {
try {
const request = new PaymentRequest(methodData, details, options);
const response = await request.show();
await validateResponse(response);
} catch (err) {
// AbortError, SecurityError
console.error(err);
}
}
async function validateResponse(response) {
try {
const errors = await checkAllValuesAreGood(response);
if (errors.length) {
await response.retry(errors);
return validateResponse(response);
}
await response.complete("success");
} catch (err) {
// Something went wrong…
await response.complete("fail");
}
}
// Must be called as a result of a click
// or some explicit user action.
doPaymentRequest();
Próximos pasos
- Obtenga información sobre cómo declarar un identificador de forma de pago en detalle en Cómo configurar un forma de pago.
- Aprende a compilar una app de pagos específica para plataformas en Guía para desarrolladores sobre apps de pago para Android
- Aprende a compilar una app de pagos basada en la Web en la página para desarrolladores de apps de pago basadas en la Web. de la guía de YouTube.