Cuando un cliente intenta comprar algo en tu sitio web, este debe pedirle que proporcione información de pago y, de manera opcional, otra información, como la preferencia de envío. Puedes lograrlo de forma rápida con la API de Payment Request (API de PR).
Estructura de pago básica
Para construir un objeto PaymentRequest, se requieren dos parámetros: métodos de pago y detalles de pago. Además, un tercer parámetro de opciones de pago es opcional. Una solicitud básica se podría crear de la siguiente manera:
const request = new PaymentRequest(paymentMethods, paymentDetails);
Consulta cómo se compila y usa cada parámetro.
Formas de pago
El primer parámetro, paymentMethods, es una lista de formas de pago admitidas en una variable de array. Cada elemento del array consta de dos componentes: supportedMethods y, de forma opcional, data.
En el caso de supportedMethods, el comercio debe especificar un identificador de forma de pago, como https://bobbucks.dev/pay. La existencia y el contenido de data dependen del contenido de supportedMethods y del diseño del proveedor de la app de pagos.
El proveedor de la app de pagos debe proporcionar ambas partes de la información.
// Supported payment methods
const paymentMethods = [{
supportedMethods: 'https://bobbucks.dev/pay',
data: {
... // Optional parameters defined by the payment app provider.
}
}];
Detalles del pago
El segundo parámetro, paymentDetails, se pasa como un objeto y especifica los detalles de pago de la transacción. Contiene el valor obligatorio total, que especifica el importe total que debe pagar el cliente. Este parámetro también puede enumerar de forma opcional los elementos comprados.
En el siguiente ejemplo, se muestra la lista opcional de artículos comprados (solo un artículo, en este caso), así como el importe total adeudado requerido. En ambos casos, la unidad de moneda se especifica con cada importe individual.
const paymentDetails = {
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' }
}
};
Verifica si la forma de pago está disponible
Chrome verifica si el usuario y el entorno están listos para realizar el pago durante la construcción de un objeto PaymentRequest.
Para verificar si el usuario y el entorno están listos para realizar un pago, llama a canMakePayment() antes de invocar el procedimiento de pago. La llamada a canMakePayment() devuelve true si el navegador admite al menos un método de pago especificado en el objeto.
request.canMakePayment().then(result => {
if (result) {
// This browser supports the specified payment method.
} else {
// This browser does NOT support the specified payment method.
}
}).catch(e => {
// An exception
});
Obtén más información sobre PaymentRequest.canMakePayment() en MDN
El método show()
Después de configurar los dos parámetros y crear el objeto request, puedes llamar al método show(), que muestra la interfaz de usuario de la app de pagos.
request.show().then(response => {
// [process payment]
// send to a PSP etc.
response.complete('success');
});
El aspecto de la interfaz de usuario de la app de pagos depende completamente del proveedor de la app de pagos. Después de que el cliente acepta realizar un pago, se pasa un objeto JSON al comercio que contiene toda la información necesaria para transferir dinero. Luego, el comercio puede enviarlo al PSP para que procese el pago.
Por último, puedes cerrar la IU de Payment Request completando el proceso con response.complete('success') o response.complete('fail'), según el resultado que devuelva el PSP.
Cuál es el próximo paso
Obtén más información sobre los pagos en la Web.