Obtén información sobre el funcionamiento general de la API de Payment Request.
API de Payment Request
Cuando un cliente intenta comprar en tu sitio web, este debe solicitarle que proporcione información de pago y, opcionalmente, otra información, como la preferencia de envío. Puedes lograr esto de manera fácil y rápida con la API de Payment Request (API de PR).
Estructura básica
La construcción de un objeto PaymentRequest requiere dos parámetros: formas de pago y detalles de pago. Además, el tercer parámetro de opciones de pago es opcional. Se podría crear una solicitud básica de la siguiente manera:
const request = new PaymentRequest(paymentMethods, paymentDetails);
Veamos cómo se compila y se 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.
Para 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 aplicación de pago debe proporcionar ambos datos.
// 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 del pago de la transacción. Contiene el valor obligatorio total, que especifica el importe total que debe pagar el cliente. De manera opcional, este parámetro también puede enumerar los artículos comprados.
En el siguiente ejemplo, se muestra la lista opcional de artículos comprados (en este caso, solo un artículo), como el importe total pendiente. 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
Antes de invocar el procedimiento de pago, el comercio puede verificar si el usuario y el entorno están listos para realizar un pago.
Llamar a canMakePayment() permite verificar si el navegador admite al menos una forma de pago especificada 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
});
Más información sobre PaymentRequest.canMakePayment() en MDN
El método show()
Después de establecer los dos parámetros y crear el objeto request como se mostró anteriormente, 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');
});
La apariencia de la interfaz de usuario de la app de pagos depende completamente del proveedor de la app de pagos. Una vez que el cliente acepta realizar un pago, se pasa al comercio un objeto JSON que contiene toda la información necesaria para transferir dinero. Luego, el comercio puede enviarlo al PSP para procesar el pago.
Por último, puedes cerrar la IU de Payment Request si completas el proceso con response.complete('success') o response.complete('fail'), según el resultado que muestre el PSP.
Cuál es el próximo paso
Obtén más información sobre los pagos web.