¿Sabe que muchos navegadores modernos tienen una API incorporada llamada Solicitud de pago? Esta API se describe en
el estándar W3C, que tiene como objetivo apoyar el trabajo con la facturación y la información de contacto.
Aquí hay una descripción general del estándar en developers.google.com. Una revisión de la
implementación de esta API en el sitio web de MDN sugiere que la Solicitud de pago brinda al desarrollador herramientas de navegación que permiten a los usuarios asociar sus sistemas y plataformas de pago preferidos con las tiendas en línea. Esto aumenta la conveniencia de realizar pagos por bienes y servicios, acelerando y simplificando este proceso. En particular, por ejemplo, la API de solicitud de pago permite al usuario ingresar sus datos de pago y dirección solo una vez, y no ingresar la misma información en cada sitio. El pago en todos los sitios que admiten esta API se verá igual para el usuario. La API de solicitud de pago tiene otras características valiosas. Entre ellos, la resolución de problemas con la disponibilidad de herramientas de pago para usuarios con discapacidades, sincronización de datos de pago entre diferentes dispositivos de usuario, herramientas estandarizadas de manejo de errores.
El material, cuya traducción publicamos hoy, está dedicado a una demostración del uso práctico de la Solicitud de pago API. Vale la pena señalar de inmediato que la API de solicitud de pago es una tecnología experimental que bien puede cambiar en el futuro. Sin embargo, el autor de este material dice que, a pesar de esto, ella es digna de conocerla. Confía en que esta tecnología tiene un futuro brillante y que los cambios que se le puedan realizar no afectarán demasiado los principios básicos de trabajar con ella.
Los fundamentos
La adopción generalizada de la API de solicitud de pago beneficiará a todos los involucrados en la creación y uso de sistemas de pago en línea. En particular, para los programadores y propietarios de sitios, esto significará facilitar la creación de sistemas de aceptación de pagos, y para los usuarios, simplificar y acelerar el proceso de pago de bienes y servicios.
Para usar esta API en JavaScript, primero debe crear un objeto
PaymentRequest . El comando para crearlo se ve así:
new PaymentRequest(methodData: fn, details: fn, options?);
Al constructor
PaymentRequest pasan dos parámetros obligatorios y uno opcional:
- El parámetro
methodData es una matriz de objetos que contiene información sobre el proveedor de servicios de pago. Esto, por ejemplo, es información sobre los métodos de pago admitidos. - El parámetro de
details es un objeto que contiene información sobre un pago específico. Por ejemplo, el monto total del pago, el monto del impuesto, el costo de envío. - El parámetro de
options , opcional, es un objeto que contiene información de pago adicional.
Puede encontrar información en la
documentación con MDN de que la API de solicitud de pago solo se puede usar con HTTPS. Esto es bastante obvio teniendo en cuenta con qué funciona esta API.
Así es como se ve la interacción del usuario con la API de solicitud de pago.
Uso de API de solicitud de pagoComo puede ver, el sistema de pago está integrado directamente en el navegador. Esto significa que no necesita usar operaciones de redireccionamiento inseguras para completar el pago, tampoco necesita usar ninguna API externa. Todo sucede directamente en el navegador.
Aquí hay un proyecto en el que se presenta una implementación de una pantalla, que muestra al usuario una lista de los datos guardados de la tarjeta de pago.
Tarjetas guardadasConsidere un ejemplo práctico de trabajar con la API de solicitud de pago.
Resumen del proyecto
Si desea experimentar con el proyecto por su cuenta, que analizaremos, puede ejecutar el siguiente comando:
git clone https:
Clona el repositorio apropiado, instala las dependencias del proyecto e inicia el servidor, disponible en
localhost:3000 . Tenga en cuenta que la aplicación en consideración se inicia en el sistema local para fines de investigación.
La página principal de la aplicación es muy simple. Imita un fragmento de la interfaz de una tienda en línea que le permite "poner en una cesta" un determinado producto. Para comenzar el proceso de pago, haga clic en el botón
BUY .
Página de solicitudEstamos tratando con una aplicación muy simple. Por lo tanto, podemos colocar toda la lógica relacionada con la interfaz de la "tienda en línea" y con los pagos en el archivo
app.js :
let count = 0 const cartIncrementButton = document.getElementById('cartIncrement') const cartDecrementButton = document.getElementById('cartDecrement') const countElement = document.getElementById('count') const buyButton = document.getElementById('purchase') function init() { countElement.innerHTML = count cartIncrementButton.addEventListener('click', () => { count++ countElement.innerHTML = `${count}$` }) cartDecrementButton.addEventListener('click', () => { if (count === 0) return count-- countElement.innerHTML = `${count}$` }) } init()
Aquí obtenemos enlaces a elementos DOM, en particular, botones para aumentar y disminuir la cantidad de "bienes", y les adjuntamos controladores de eventos. El importe total se muestra en el elemento de página correspondiente.
El botón
cartIncrementButton de nuestro código se puede imaginar como un botón que le permite agregar algún producto al carrito. El botón
cartDecrementButton permite eliminar los productos de la cesta, y en el elemento
countElement el precio de todos los productos que se colocaron en la cesta.
Implementación de un sistema de pago.
El siguiente código también entra en
app.js Es una implementación del controlador de eventos que ocurre cuando hace clic en el botón
BUY (se llama
buyButton en el código):
buyButton.addEventListener('click', () => { const request = new PaymentRequest( buildSupportedPaymentMethodData(), buildShoppingCartDetails() ); })
Después de que el usuario hace clic en el botón
BUY , creamos una nueva instancia del objeto
PaymetnRequest . Usamos aquí un par de funciones que devuelven lo que se debe pasar al constructor del objeto. Estas son las funciones
buildSupportedPaymentMethodData y
buildShoppingCartDetails .
El primer argumento para el constructor está representado por una llamada a la función
buildSupportedPaymentMethodData . Devuelve una matriz de objetos que son métodos de pago compatibles. Esta función se declara en
app.js :
function buildSupportedPaymentMethodData() {
El segundo argumento para el constructor,
buildShoppingCartDetails , es una llamada de función que genera la información necesaria para completar la compra.
Esta información puede incluir, por ejemplo, una descripción de los bienes comprados, su valor, el monto total de la compra. El código para la función
buildShoppingCartDetails también
buildShoppingCartDetails en
app.js :
function buildShoppingCartDetails() { return { id: 'count-order', displayItems: [ { label: 'Example item', amount: {currency: 'USD', value: '1.00'} } ], total: { label: 'Total', amount: {currency: 'USD', value: count } } }; }
Tenga en cuenta que esta función devuelve un objeto, no una matriz de objetos.
Ahora estamos listos para mostrarle al usuario una ventana para realizar un pago. Llame al método
.show() del objeto de
request . Esta llamada devolverá la promesa. Si no está familiarizado con las promesas, eche un vistazo a
este material. El código, nuevamente, está en
app.js :
buyButton.addEventListener('click', () => { const request = new PaymentRequest( buildSupportedPaymentMethodData(), buildShoppingCartDetails() ); request.show().then(paymentResponse => { console.log(paymentResponse) }) })
Como resultado, después de presionar el botón
BUY , deberíamos ver lo que se muestra en la siguiente figura.
Consideración de pago del usuarioEn este paso, probablemente necesite agregar información de la tarjeta bancaria al sistema. Recomiendo usar la tarjeta de prueba VISA aquí. Ingrese el número de tarjeta, su nombre y dirección en los campos correspondientes. Solo estamos probando la API, por lo que los datos ingresados pueden no ser reales.
Número de tarjeta de prueba VisaIngrese los detalles de la tarjetaProcesamiento de pagos
Después de ingresar la información de la tarjeta en el sistema y confirmar el pago, recibimos el objeto
PaymentResponse devuelto de la promesa.
Llamamos a su método
.complete () para decirle al usuario que todo va como debería. Así es como se ve en el código:
buyButton.addEventListener('click', () => { const request = new PaymentRequest(buildSupportedPaymentMethodData(), buildShoppingCartDetails()); request.canMakePayment().then(result => { if (result) { request.show().then(paymentResponse => { console.log(paymentResponse.details)
Eso es todo! Acabamos de examinar el código que se necesita para implementar la canasta más simple de una tienda en línea.
Aquí hay una demostración completa de la aplicación.
Demostración de aplicación→
Aquí puede encontrar el código fuente del proyecto.
Acerca del soporte para los navegadores API de solicitud de pago
Aquí hay información de soporte para la API de solicitud de pago con caniuse.com.
¿Qué navegadores admiten la API de solicitud de pago?Como puede ver, esta API es relativamente nueva, por lo que aún no tiene un soporte de navegador particularmente amplio. Lo bueno es que es compatible con Chrome, Safari, Firefox y Edge. Probablemente use al menos uno de estos navegadores, para que pueda experimentar fácilmente todo lo que mencionamos anteriormente.
Cabe señalar que es bastante obvio que en el área de soporte para los buscadores de API de Solicitud de pago todavía hay mucho trabajo por hacer. Esto es especialmente cierto para los navegadores móviles. Por lo tanto, si tuviera que usar esta API ahora, no contaría con su trabajo en dispositivos móviles hasta ahora.
Resumen
La API de solicitud de pago tiene todas las posibilidades de convertirse en una tecnología común y popular. Por lo tanto, si esta tecnología le interesa,
aquí ,
aquí ,
aquí y
aquí , materiales que pueden ayudarlo a comprenderla mejor.
Estimados lectores! ¿Está considerando usar la API de solicitud de pago en sus proyectos?
