Presentamos pagos web: compras en línea más fáciles con la API de solicitud de pago

Comprar cosas en línea puede ser un proceso frustrante, especialmente en dispositivos móviles. Incluso si las páginas están bien diseñadas, se requiere mucha información: nuestra información de contacto, direcciones de envío y facturación, opciones de envío y detalles de la tarjeta. Si alguna vez te has dado por vencido, estás en la mayoría.

El Instituto Baymard tomó un promedio de 37 estudios diferentes y descubrió que el 69% de los carritos de compras están abandonados.

Como era de esperar, las cifras son peores en los dispositivos móviles, donde la pantalla más pequeña y la falta de un teclado físico pueden hacer que la entrada sea más lenta. ¡La tasa de abandono en dispositivos móviles puede llegar al 84 % o más! Con el auge y auge de la navegación móvil en los últimos años, esto significa que el problema general ha empeorado cada vez más. Para los sitios de comercio electrónico, estos carritos abandonados cuestan una gran cantidad de dinero. Business Insider estimó que en un año se abandonarían mercancías por valor de 4 billones de dólares.

Afortunadamente, la web está luchando contra este problema. El grupo de trabajo del W3C sobre "pagos web" ha estado ocupado trabajando en "una revolución en los pagos en la web" , desarrollando nuevos estándares para ayudar a que los pagos en línea sean mucho más fáciles. Además de ser el nombre del Grupo de trabajo, "Pagos web" es esencialmente un término general que cubre estos nuevos estándares prometedores.

La API de solicitud de pago

El primero de estos estándares, la API de solicitud de pago , es un gran paso adelante. Nos da la capacidad de solicitar el pago de un usuario y hacer que el navegador proporcione la interfaz de usuario para aceptarlo. Ya es compatible con Chrome, Edge y Samsung Internet, y está en desarrollo en Firefox y Safari. Muchas empresas de alto perfil están adoptando la API, incluidos el New York Times, el Washington Post y Monzo.

Solicitar esta información desde el navegador proporciona un gran beneficio inmediato porque probablemente ya tenga estos detalles almacenados . Siempre que hayamos ingresado nuestros detalles en otro sitio web que use la API y permitimos que nuestro navegador lo recuerde, el navegador podrá completar previamente el formulario, permitiéndonos pagar mucho más rápido.

Esto es mejor que el autocompletado estándar; Permitir que el navegador maneje los campos de entrada significa que puede ser totalmente preciso, lo que evita problemas con el llenado previo de información incorrecta en los campos incorrectos. También significa que tenemos un formulario de pago de una sola página optimizado para dispositivos móviles, sin tener que escribir nuestro propio HTML y CSS.

Los beneficios pueden sentirse aún más en dispositivos móviles, pero la API de solicitud de pago no se limita a los navegadores móviles. Ya es compatible con las versiones de escritorio de Chrome, Edge y Samsung Internet para DeX. También podemos esperar que el soporte llegue más tarde a Firefox y Safari de escritorio (en el momento de escribir este artículo, recientemente se ha habilitado de forma predeterminada en Safari Technology Preview 44).

Nuestra primera solicitud de pago

Empecemos a explorar la API con un ejemplo básico. Vamos a solicitar un pago con tarjeta al usuario y permitirle pagar así:

En el video de arriba, notará que el usuario confirma el pago con su huella digital. Esto no es parte del estándar de solicitud de pago en sí, sino una función de seguridad que proporciona el navegador de Internet de Samsung (junto con el escaneo del iris) en los dispositivos compatibles.

Si está interesado en un mayor potencial para integrar la autenticación biométrica en la web, es posible que desee estar atento al próximo estándar de autenticación web.

Primero, como de costumbre, deberíamos adoptar la mejora progresiva y verificar que este navegador sea compatible con la API:

 if (window.PaymentRequest) { // We can continue with the Payment Request API } else { // Here we could fall back to a legacy checkout form }

Ahora podemos configurar la configuración de nuestra PaymentRequest: el tipo de pago que aceptaremos y los detalles que se mostrarán sobre la compra:

 var methodData = [{ // 'basic-card' means standard card payments - credit and debit cards supportedMethods: 'basic-card' }]; var details = { // If we are buying multiple items, each one can be included displayItems: [ { label: 'Some product that we are buying', amount: {currency: 'USD', value: '699.99'} } ], total: { label: 'Total', amount: {currency: 'USD', value: '699.99'} } }; var paymentRequest = new PaymentRequest(methodData, details);

Cuando queremos mostrar la interfaz de usuario de pago (por ejemplo, cuando el usuario hace clic en "Comprar ahora"), podemos llamar a show() . Luego manejamos los datos que el usuario proporcionó cuando se resuelve la promesa:

 // show() makes it actually display the user interface paymentRequest.show() .then(function(paymentResponse) { // User has confirmed. paymentResponse contains the data entered. // Here we would process it server-side... processPaymentDetails(paymentResponse) .then(function(paymentResponse) { // ...Then when processed successfully, this will make the dialog indicate success & then close: paymentResponse.complete('success'); // We could also update the page here appropriately }); }) .catch(function(error) { // Handle error, eg if user clicks the 'cancel' button. });

Ahora tenemos el flujo de la interfaz de usuario configurado en el front-end. También podemos configurarlo aún más, para que coincida con nuestros requisitos. Por ejemplo, si deseamos solicitar detalles adicionales del cliente, podemos pasar options adicionales al constructor de PaymentRequest. Por ejemplo, para solicitar el nombre del usuario, dirección de correo electrónico, número de teléfono y dirección de envío:

 var options = { requestPayerName: true, requestPayerEmail: true, requestPayerPhone: true, requestShipping: true }; var paymentRequest = new PaymentRequest(methodData, details, options);

También podemos definir múltiples opciones de envío e incluso controlar qué opciones se presentan de forma dinámica, en función de la dirección del cliente. Puedes encontrar un ejemplo de esto aquí en Glitch.

Experiencia de usuario

Estamos empezando a ver algunas estadísticas impresionantes sobre los beneficios que la solicitud de pago puede brindar a las empresas. Google compartió recientemente que J.Crew, una marca de moda, descubrió que el 50% de sus usuarios ahora pasan por el flujo de Solicitud de pago y reduce su tiempo de transacción en un 75%.

Depende de usted cómo integrar la solicitud de pago en su experiencia de compra, pero una forma común es ofrecer algo como una opción de "Pago exprés" o "Comprar ahora", sin requerir que el cliente inicie sesión primero. Si lo desea, puede recopilar los datos de contacto del usuario mediante la interfaz de usuario de solicitud de pago y, una vez que haya realizado la compra, ofrecerle la oportunidad de crear una cuenta para uso futuro.

Si lo desea, puede verificar primero si el cliente ya tiene configurado un método de pago válido, antes de presentar la interfaz de usuario de solicitud de pago. Para hacer esto, puede llamar a canMakePayment :

 if (paymentRequest.canMakePayment) { paymentRequest.canMakePayment().then(function(result) { if (result) { // User has an active payment method } else { // No active payment method yet (but they could add one) } }).catch(function(error) { // Unable to determine }); }

Integración de back-end

Hemos visto cómo configurar la interfaz de usuario para recibir pagos, pero ¿cómo procesamos realmente los pagos en el back-end?

La mayoría de los sitios web no manejarán los pagos por sí mismos (algo que requeriría mucho cuidado y cumplimiento de PCI DSS), sino que utilizarán una pasarela de pago (PG) o un proveedor de servicios de pago (PSP) de terceros. Varias pasarelas de pago ya han introducido soporte específico para la API de solicitud de pago. Pueden iniciar la Solicitud de pago a través de su propio script que usted incluye en su página, lo que ayuda a garantizar que los datos se envíen de forma segura y que no tenga que manejarlos usted mismo. También pueden ofrecer una solución de iFrame o redirección. La mejor manera de proceder es consultar con su Pasarela de Pago cómo recomiendan incorporar Solicitudes de Pago.

Integración de aplicaciones de pago

Hasta ahora hemos hablado de los pagos con tarjeta. Sin embargo, la API de solicitud de pago también admite aplicaciones de pago móvil como Samsung Pay, Pay with Google (que incorpora Android Pay) y Apple Pay.

Permitir que nuestros clientes paguen con una de estas aplicaciones significa que pueden usar la tarjeta que han guardado en la aplicación, sin tener que volver a ingresar los datos (incluso la primera vez) en el navegador. El uso de estas aplicaciones también puede ser más rápido porque no requieren que el cliente vuelva a ingresar su CVC (Código de verificación de tarjeta, también conocido como CVV) desde el reverso de su tarjeta. Finalmente, pueden brindar beneficios de seguridad adicionales porque no transmiten los detalles originales de la tarjeta, solo tokens de un solo uso, lo que nos protege de posibles intercepciones y ataques de repetición.

Cuando el cliente selecciona la aplicación de pago como su método de pago elegido, el navegador cambia a una hoja de pago proporcionada por la aplicación para confirmar el pago. La aplicación de terceros generalmente aceptará la huella digital o el escaneo del iris del cliente para confirmar el pago si el dispositivo lo admite.

Cada aplicación de pago tendrá sus propias instrucciones particulares, pero la idea general es la misma. Puede identificarlos como posibles métodos de pago utilizando sus propias URL especiales y pasar la configuración requerida en el campo de data . Por ejemplo, para admitir Samsung Pay, incluiría un código como este en su matriz methodData :

 var methodData = [ { supportedMethods: 'https://spay.samsung.com', data: { // Samsung Pay specific data here } }, … // Other payment methods ];

En términos generales, existen dos métodos para integrar estas aplicaciones con su pasarela de pago: un método de "token de puerta de enlace" y un método de "token de red". Si está utilizando un servicio de terceros que lo admita, lo más probable es que utilice el modo Gateway Token, donde el servicio de la aplicación de pago llamará a su pasarela de pago en su nombre. Alternativamente, puede usar el método Token de red donde manejará el envío del token a su Pasarela de pago de forma segura, usando su SDK. Su Pasarela de pago y/o proveedor de aplicaciones de pago deberían poder brindarle más detalles.

Google anunció recientemente la API de pago de Google que incorpora Android Pay, así como las tarjetas almacenadas en las cuentas de Google de los clientes.

Apple Pay actualmente usa su propia solución de JavaScript, Apple Pay JS. Sin embargo, los desarrolladores de Google han creado un contenedor que le permite usarlo a través de la API de solicitud de pago estándar.

¿Que sigue?

El Grupo de trabajo de pagos web no se detiene en la API de solicitud de pago. También se está trabajando en otros estándares, incluida la API del controlador de pagos, que permitirá que las aplicaciones web actúen como una aplicación de pago de terceros. Otros temas que se están discutiendo incluyen la posible estandarización en torno a la tokenización y la capacidad de las solicitudes de pago para admitir cosas como tarjetas de regalo. Si desea mantenerse al día con los desarrollos, aquí está la lista de correo pública. ¡Espero que juntos podamos resolver las frustrantes experiencias de pago del pasado y lograr la visión de una revolución de pagos web!

Más recursos

• "Wiki de pagos web de W3C", GitHub
• "Información para desarrolladores de la API de solicitud de pago de W3C", GitHub; consulte también Preguntas frecuentes
• "Web Payments 101: un breve tutorial de codificación de solicitud de pago", Glitch
• "Profundización en la API de solicitud de pago", Google Developers
• “Guía para desarrolladores de la API de solicitud de pago”, Microsoft Edge
• "Cómo aceptar Samsung Pay en su sitio web mediante pagos web", Winston Chen, Medium