Integración: Payment Widget

Integra nuestro widget y orquesta pagos con nosotros.

Introducción

Esta sección explica como integrar nuestro widget de pagos de DEUNA a tu comercio.

El widget de pagos es un widget que abre de manera modal o pantalla completa (redirect) en web y app y se encarga en recolectar la información del usuario para procesar el pago. Este widget recibe constantes mejoras basadas en como los usuarios en los diferentes comercios que lo tienen integrado lo usan y por ende se asegura de mantener una alta conversión.

Pros de la integración Widget

Ventajas:

  • Le permite a los comercios activar y disponibilizarle al usuario nuevos métodos de pago sin cambios en la integración. Con solo activar el método de pago en el admin (portal de comecio) de DEUNA, en tiempo real aparecería disponible para el usuario final dentro del widget de pagos.
  • El widget en sí se encarga de permitirle al usuario guardar sus tarjetas y administrarlas.
  • EL widget se encarga de soportar y controlar el flujo de 3DS de forma nativa.
  • No requiere re-dirección a otra pestaña/página web (si es requerido por el comercio, se puede conservar la re-dirección)
  • Se puede personalizar con los colores, logo y estilos que se ajusten a los del comercio

Ejemplos :

Widget donde solo se usa tarjeta crédito/ débito:

Ambientes

DEUNA cuenta con dos ambientes 100% independientes:

  1. Sandbox: también conocido como STG o Sandbox. Este es el ambiente que se usa para realizar pruebas. Este ambiente contiene las conexiones a los diferentes proveedores de pagos y fraude apuntado también a sus ambientes de prueba, por ende, las pruebas deben realizarse con datos de pruebas (tarjetas, etc.) que disponga cada proveedor en sus ambientes de prueba.
    • URL: https://api.sandbox.deuna.io
    • Timeout: debido a que los ambientes de prueba de los diferentes proveedores ofrecen tiempos de respuesta más altos tenemos un timeout en este ambiente de 75 segundos. El tiempo de respuesta promedio es una fracción de este tiempo.
  2. Producción: Este es el ambiente real que usará el comercio para procesar transacciones en su ambiente productivo. Lo más recomendado es que el comercio siempre pruebe su integración primero en el ambiente de Staging antes de moverse al productivo.
    • URL: https://api.deuna.io
    • Timeout: contamos con un timeout duro de 60 segundos. Este timeout time tiene en consideración que la transacción puede contactar multiples proveedores anti-fraude y de pagos.

Autenticación

DEUNA creará para tu comercio un API Key privado y uno público que son usados para autenticarte como comercio a nuestro API. En los APIs para permitir transaccionar, almacenar tarjetas a nombre de un cliente/usuario, usamos un Token de autenticación tipo JWT con expiración para hacer operaciones a nombre del usuario.

Cuando crees tu cuenta de staging de DEUNA, desde el ADMIN o por ayuda a soporte, puedes obtener tu API Key publica y privada. Estas pueden ser eliminadas en cualquier momento si así lo desean y multiples mas se pueden crear.

Métodos de integración

  1. Uso de SDKs: Tenemos SDKs para Web y para aplicaciones mobiles en React Native, Swift (iOS) y Kotlin (Android). En web, el SDK abre como un modal y en mobil abre un webView que carga el widget de pagos o el formulario de pagos como una página web. El SDK también expone callbacks como cuando el usuario cierra el widget, completa el pago, falla el pago, etc. Con estos callbacks, el comercio pueda reaccionar y continuar la experiencia de compra como lo desee. Del mismo modo, el comercio puede escuchar a actualizaciones de estado de los pagos usando nuestros webhooks.
  2. Uso de un link de pagos: Mediante nuestra API de crear un orden con DEUNA podemos retornar order.payment_link que es una URL que puedan abrir en un WebView/iFrame y este cargaría el payment widget mediante una página web. Vía los webhooks, les notificaríamos las actualizaciones de los pagos.
    1. Esta opción le es útil a aquellos comercios que por cuestiones de seguridad, compliance, etc; se les complique el uso del SDK. También es buena opción para aquellos comercios que hoy por hoy su integración ya usa un webView/iFrame donde cargan el checkout de un proveedor externo.
    2. El uso directo del payment_link URL (sin el uso del SDK) pierde la conveniencia de los callbacks del SDK para que el comercio pueda reaccionar a ellos y determinar que hacer luego que el pago se complete, por ejemplo. En este caso algunos comercios configuran un error_url y success_url en DEUNA para poder redireccionar al los usuarios posterior de que se complete el pago.

Diagrama de integración

Integración

  1. Crear orden en DEUNA (tokenizar una orden): Este API se utiliza para enviar toda la información de la orden o compra realizada por el usuario a DEUNA. A cambio, el API devuelve un "token" de la orden que formará parte del URL del "payment_link" para cargar el checkout a través de WebView o se utilizará para inicializar el SDK.
    1. Se recomienda crear siempre una nueva orden en DEUNA cada vez que el usuario cambie o actualice su carrito.
    2. Para la integración en aplicaciones, el "payment_link" que ya incluye el "order token" de DEUNA se encuentra en la respuesta de este API en order.payment_link.
  2. Integración del SDK

Sigue estos pasos para integrar el SDK de pagos de DEUNA en tu comercio:

  1. Paso 1: Agregar el SDK a tu Aplicación:
    1. Web: Agrega los scripts y estilos necesarios.
    2. iOS: Usa CocoaPods o Swift Package Manager.
    3. Android: Usa Gradle
  2. Paso 2: Inicializar el SDK: Configura el SDK con las credenciales y parámetros necesarios para tu comercio.
  3. Paso 3: Mostrar el Widget: Implementa la lógica para mostrar el widget de pagos en tu aplicación.
  4. Paso 4: Escuchar los Eventos de Cambio de Estado: Utiliza los callbacks del SDK para manejar eventos como pago exitoso, errores, cambios en el carrito, etc.

¡Es fácil!

Para más detalles sobre la integración y ejemplos específicos, consulta la documentación de los SDKs disponibles:

Sigue leyendo para integrar el SDK de manera sencilla y rápida. Estos pasos te ayudarán a garantizar una experiencia de pago fluida y segura para tus usuarios..