Obtén información sobre el funcionamiento general de la API de Payment Request.
API de Payment Request
Cuando un cliente intenta comprar algo en tu sitio web, este debe preguntar que el cliente proporcione información de pago y, opcionalmente, otra información como la preferencia de envío. Puedes lograr esto de forma fácil y rápida usando el API de Payment Request (API de PR).
Estructura básica
La construcción de un objeto PaymentRequest requiere dos parámetros: payment
formas de pago y los detalles de pago. Además, se agrega un 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 comerciante debe especificar una forma de pago
Identificador
como https://bobbucks.dev/pay. La existencia y el contenido de data dependen de
el contenido de supportedMethods y el 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 requerido total,
que especifica el importe total que debe pagar el cliente. Este parámetro también puede
opcionalmente los artículos comprados.
En el ejemplo a continuación, se muestra la lista opcional de artículos comprados (solo un artículo, en este caso), así como el importe total pendiente. En ambos casos, la moneda unidad 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. Llamando
canMakePayment() muestra true si el navegador admite al menos un pago.
método 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
});
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 muestra
arriba, puedes llamar al método show(), que muestra el usuario de la app de pagos
interfaz de usuario.
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 totalmente de la app de pagos. proveedor. Después de que el cliente acepta realizar un pago, se pasa un objeto JSON al comercio, la cual contiene toda la información necesaria para transferir dinero. Luego, el comercio puede enviarlo al PSP para procesar el pago.
Finalmente, puedes cerrar la IU de Payment Request completando el proceso con
response.complete('success') o response.complete('fail') según el
que muestra el PSP.
Cuál es el próximo paso
Obtén más información sobre los pagos web.