La API de solicitud de pago es una nueva API de JavaScript que proporciona un estándar de navegador cruzado para recopilar el pago, la dirección y la información de contacto de un cliente que se puede usar para procesar un pedido. También facilita el intercambio de esta información entre el navegador y el sitio web. La idea detrás de esto es mejorar la experiencia de compra en línea del usuario al facilitarle al usuario almacenar información de pago y contacto en el navegador.
Soporte del navegador
La API de solicitud de pago todavía está en desarrollo activo y solo es compatible con las últimas versiones de los navegadores modernos. Antes de que comencemos a realizar una solicitud de pago, debemos incluir la función de detección para garantizar que el navegador admita la API:
if(window.PaymentRequest) {
// Yes, we can use the API
} else {
// No, fallback to checkout page
window.location.href = '/checkout';
}
PaymentRequest Objeto
Una solicitud de pago siempre se inicia creando un nuevo objeto de PaymentRequest - usando el PaymentRequest() constructor. El constructor toma dos parámetros obligatorios y un parámetro opcional:
paymentMethodsdefine qué formas de pago se aceptan. Por ejemplo, solo puede aceptar tarjetas de crédito Visa y MasterCard.paymentDetailscontiene el monto total del pago adeudado, impuestos, costo de envío, elementos de exhibición, etc.optionses un argumento opcional que se puede usar para solicitar detalles adicionales del usuario, como nombre, correo electrónico, teléfono, etc.
Vamos a crear una nueva solicitud de pago con solo los parámetros requeridos:
const paymentMethods = [
{
supportedMethods: ['basic-card']
}
];
const paymentDetails = {
total: {
label: 'Total Amount',
amount: {
currency: 'USD',
value: 8.49
}
}
};
const paymentRequest = new PaymentRequest(
paymentMethods,
paymentDetails
);
Observe el supportedMethods parámetro en paymentMethods objeto. Cuando se establece en basic-card , se aceptarán tanto tarjetas de débito como de crédito de todas las redes. Sin embargo, podemos limitar las redes admitidas y los tipos de tarjeta. Por ejemplo, con las siguientes solo se aceptan tarjetas de crédito Visa, MasterCard y Discover:
const paymentMethods = [
{
supportedMethods: ['basic-card'],
data: {
supportedNetworks: ['visa', 'mastercard', 'discover'],
supportedTypes: ['credit']
}
}
];
// ...
Detalles de pago
El segundo parámetro obligatorio que se pasa al PaymentRequest constructor es el objeto de detalles de pago. Contiene el total del pedido y una matriz opcional de elementos de visualización. El total el parámetro debe contener un label parámetro y un amount parámetro con currency y value .
También puede agregar elementos de visualización adicionales para proporcionar un desglose de alto nivel del total:
const paymentDetails = {
total: {
label: 'Total Amount',
amount: {
currency: 'USD',
value: 8.49
}
},
displayItems: [
{
label: '15% Discount',
amount: {
currency: 'USD',
value: -1.49
}
},
{
label: 'Tax',
amount: {
currency: 'USD',
value: 0.79
}
}
]
};
El displayItems El parámetro no está destinado a mostrar una larga lista de elementos. Dado que el espacio es limitado para la interfaz de usuario de pago del navegador en dispositivos móviles, debe usar esto para mostrar solo los campos de nivel superior, como subtotal, descuento, impuestos y costo de envío, etc.
Solicitud de detalles adicionales
El tercer parámetro opcional se puede utilizar para solicitar información adicional del usuario, como el nombre, la dirección de correo electrónico y el número de teléfono:
// ...
const options = {
requestPayerName: true,
requestPayerPhone: true,
requestPayerEmail: true,
};
const paymentRequest = new PaymentRequest(
paymentMethods,
paymentDetails,
options
);
De forma predeterminada, todos estos valores son false , pero agregando cualquiera de ellos a options objeto con un valor true resultará en un paso adicional en la interfaz de usuario de pago. Si el usuario ya almacenó estos detalles en el navegador, se completarán previamente.
Mostrar interfaz de usuario de pago
Después de crear un PaymentRequest objeto, debe llamar al show() para mostrar la interfaz de usuario de la solicitud de pago al usuario. El show() método devuelve una promesa que se resuelve con un PaymentResponse objeto si el usuario ha completado con éxito los detalles. Si hay un error o el usuario cierra la interfaz de usuario, la promesa se rechaza.
// ...
const paymentRequest = new PaymentRequest(
paymentMethods,
paymentDetails,
options
);
paymentRequest
.show()
.then(paymentResponse => {
// close the payment UI
paymentResponse.complete()
.then(() => {
// TODO: call REST API to process the payment at backend server
// with the data from `paymentResponse`.
});
})
.catch(err => {
// user closed the UI or the API threw an error
console.log('Error:', err);
});
Con el código anterior, el navegador mostrará la interfaz de usuario de pago al usuario. Una vez que el usuario haya completado los datos y haya hecho clic en el botón 'Pagar', recibirá un PaymentResponse objeto en el show() promesa. La interfaz de usuario de la solicitud de pago se cierra inmediatamente cuando llama al PaymentResponse.complete() método. Este método devuelve una nueva promesa para que pueda llamar al servidor backend con la información recopilada y procesar el pago.
Si desea llamar al servidor backend para procesar el pago mientras la interfaz de usuario de pago muestra una rueda giratoria, puede retrasar la llamada a complete() . Vamos a crear una función simulada para el procesamiento de pagos con el servidor backend. Se necesitan paymentResponse como parámetro y devuelve una promesa después de 1,5 segundos que se resuelve en un objeto JSON:
const processPaymentWithServer = (paymentResponse) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({ status: true });
}, 1500);
});
};
//...
paymentRequest
.show()
.then(paymentResponse => {
processPaymentWithServer(paymentResponse)
.then(data => {
if (data.status) {
paymentResponse.complete('success');
} else {
paymentResponse.complete('fail');
}
});
})
.catch(err => {
console.log('Error:', err);
});
En el ejemplo anterior, la interfaz de usuario de pago del navegador mostrará una pantalla de procesamiento hasta la promesa devuelta por el processPaymentWithServer() se liquida el método. También usamos cadenas de "éxito" y "fallo" para informar al navegador sobre el resultado de la transacción. El navegador mostrará un mensaje de error al usuario si llama al complete('fail') .
Cancelación de solicitud de pago
Si desea cancelar la solicitud de pago por falta de actividad o por cualquier otro motivo, puede utilizar el PaymentRequest.abort() método. Cierra la interfaz de usuario de la solicitud de pago inmediatamente y rechaza el show() promesa.
// ...
setTimeout(() => {
paymentRequest.abort()
.then(() => {
// aborted payment request
console.log('Payment request aborted due to no activity.');
})
.catch(err => {
// error while aborting
console.log('abort() Error: ', err);
});
}, 5000);
Conclusión
Ese es el final de una introducción rápida a la API de solicitud de pago de JavaScript. Proporciona un método basado en navegador para recopilar el pago del cliente y la información de contacto que se puede enviar al servidor backend para procesar el pago. El objetivo es reducir el número de pasos necesarios para completar un pago en línea. Hace que todo el proceso de pago sea más sencillo al recordar la forma preferida de pago de bienes y servicios del usuario.
Si desea obtener más información sobre la API de solicitud de pago, aquí hay un buen recurso que analiza los conceptos principales y el uso de la API.