Checkout en un click al alcance de todos: la Payment Request API

Año 2018: tenemos drones, aparatos que reconocen tu voz, realidad virtual, realidad aumentada, inteligencias artificiales y hasta la Nintendo Switch, pero entras en cualquier tienda online a comprar algo que te gusta y, a la hora del pago, te encuentras inevitablemente con un glorioso formulario de Checkout.

Para cuando has terminado de rellenar todos los datos desde tu móvil, ya ha salido un nuevo iPhone y tienes que volver a empezar el proceso, pero no te preocupes, seguramente la tienda ya tendrá guardados tus datos y te ahorrará parte del trabajo en tus futuras compras.

Más de un tercio de las compras online se abandonan por un proceso de checkout tedioso o la necesidad de registrar una cuenta, barreras que se agravan aún más cuando el cliente intenta comprar desde su móvil. El checkout siempre ha sido una pieza clave donde se invierten horas y horas de UX, desarrollo y analíticas para mejorar lo máximo posible la tasa de conversión, pero la necesidad de recoger los datos de pago, envío y facturación en la primera compra nos dejaba con pocas opciones para hacerlo más simple.

¿Y si pudiésemos ahorrarle al cliente ese trabajo desde la primera compra y con cualquier medio de pago? Con ese objetivo nace la Payment Request API.

Pago integrado en el navegador web

Payment Request es una nueva candidata a estándar W3C que tiene como objetivo eliminar los tediosos formularios de checkout. Mejora la experiencia de usuarios y desarrolladores permitiendo un proceso de pago fácil y consistente sea cual sea la web o la pasarela escogida.

Esta nueva API pone al navegador como intermediario entre el vendedor y el cliente, y permite a cualquier tienda implementar checkouts en un solo click con una simple llamada a la API, gracias a los datos de envío y pago que se pueden almacenar directamente en el navegador.

El nuevo proceso de checkout funciona así:

1. Cuando el usuario está listo para el checkout, el vendedor crea una nueva Payment Request y le pasa al navegador la información necesaria para completar la compra: medios de pago aceptados, datos necesarios para completar la compra, detalles del pedido, tipos de envío y cantidad a pagar.
2. El navegador muestra al usuario la interfaz de pago. Si ya tiene métodos de pago y direcciones guardadas, le permite elegir una y si no, puede añadir los datos en ese momento.
3. Cuando el usuario autoriza la operación, se envían los datos de pago y las direcciones de envío y facturación seleccionadas al vendedor para registrar el pedido y enviarlos a la pasarela de pago.

Mientras que antes el usuario tenía que seguir un proceso de varios pasos y rellenar muchos campos, ahora todo el proceso se hace en un solo paso y de forma consistente para cualquier tienda. Por el lado del vendedor, desaparece el desarrollo del formulario de checkout y solo queda la integración con la pasarela de pago que corresponda. Todos ganamos.

Los métodos de pago posibles van desde la clásica tarjeta de débito o crédito a sistemas integrados de terceros como PayPal, Apple Pay, Microsoft Pay o Android Pay. El objetivo final de la API es permitir cualquier método de pago posible, desde transferencias bancarias a pago con criptomonedas.

¿Cómo funciona?

Para crear una PaymentRequest se utilizan 3 parámetros: una lista de opciones de pago soportadas, los detalles de la transacción (productos incluidos, tipos de envío, total…) y las opciones adicionales, que nos permiten decidir si hay que solicitarle al usuario dirección de envío, teléfono, email, etc.

Un ejemplo de PaymentRequest para un producto y con una opción de envío.

Una vez creada la instancia, para activar la interfaz de pago del navegador llamamos al método show(), que devolverá una promesa donde recibiremos los datos del usuario cuando termine de seleccionar su medio de pago, de envío y direcciones asociadas:

Una vez resuelta la promesa, tendremos acceso a un objeto con todos los datos seleccionados por el usuario y un identificador único de la transacción generado por el navegador, y podremos enviarlos al servidor para confirmar el pedido y el pago con la pasarela elegida.

El resultado es que con tan solo un poco de configuración y una promesa, tenemos un proceso de checkout completo sin necesidad de desarrollar formularios, y que aprovecha los datos que los usuarios ya tienen en su navegador y una interfaz uniforme sea cual sea la tienda visitada.

Si queremos cancelar el proceso antes de que el usuario envíe los datos (por ejemplo, porque haya pasado demasiado tiempo desde que se lanzó la petición), podemos llamar al método abort(), y el navegador cerrará la interfaz de pago.

La API también incluye callbacks que se ejecutan cuando el usuario selecciona una dirección o cambia el método de envío, para permitir casos avanzados como métodos de envío no disponibles para una dirección concreta, o actualizar el total si se elige uno más caro.

Si quieres probarla en vivo en tu navegador, puedes visitar (desde cualquier navegador compatible) esta demostración que hemos preparado.

¿Cuándo podrá usarse?

La Payment Request API ya está soportada por los navegadores Chrome, Chrome para Android, Safari (macOS e iOS), Edge y Samsung Internet, cubriendo aproximadamente un 73% de usuarios españoles. El soporte de Safari es muy reciente (29 de marzo de 2018), por lo que la cifra aumentará por encima del 85% cuando los usuarios vayan actualizando en las próximas semanas.

Para mejorar el checkout de forma progresiva y utilizarla en los navegadores soportados, podemos detectar fácilmente su presencia con éste código, y redireccionar a un checkout clásico si el navegador no tiene soporte todavía.

Además, Google ha desarrollado este shim para facilitar la implementación (ya que la API aún puede tener cambios) y un wrapper de Apple Pay, que permite integrar Apple Pay usando la API de Payment Request.

En resumen, no hay excusa para empezar a hacerle la vida más fácil a nuestros clientes, y tener una conversión más alta que nunca.