Integración: Full Checkout Widget

Full Checkout

Integra nuestro Full Checkout Widget a tu comercio

El Widget de Checkout de DEUNA es una herramienta poderosa para integrar un proceso de pago seguro y personalizable en aplicaciones de comercio electrónico. Ofrece una solución intuitiva y robusta para gestionar el flujo de compra y garantizar transacciones seguras para los usuarios finales.

Funcionalidades clave del Widget

• 💳 Integración intuitiva: Diseñado para ser integrado sin complicaciones en proyectos de comercio electrónico, ofreciendo una experiencia de compra sin fisuras.
• 🛍 Experiencia de compra completa: Controla y personaliza la experiencia final del cliente, desde el proceso de compra hasta la notificación de estados mediante webhooks.
• 🔄 Flexibilidad y configuración: Configurable para adaptarse a las necesidades únicas de tu negocio, con opciones de personalización para la marca y la experiencia del usuario.
• 🚀 Integración sencilla y documentación completa: Implementación sencilla con bajo código y documentación detallada, proporcionando ejemplos prácticos y guías exhaustivas para su uso.
• ✨ Documentación exhaustiva: Accede a una documentación fácil de leer y en constante mejora para todas tus necesidades de desarrollo. ¡Lee la documentación! ➡️

Flujo del Widget

Aquí una imagen del flujo general:

Pasos de instalación

Descubre cómo instalar el widget de DEUNA.

Nota
Esta referencia cubre el paso a paso de instalación de nuestro Checkout. Si prefieres aprender haciendo, echa un vistazo a una integración de muestra.

Para poder utilizar el Widget, tienes que seguir los siguientes pasos:

Requisitos

❗️

NOTA:

Vas a necesitar cada uno de estos requisitos, sino no podrás inicializar nuestro Widget.

• Clave API Pública y Privada: Asegúrate de contar con las claves API pública y privada proporcionadas por el Administrador de DEUNA.
• Token de Orden Válido: Obtén un token de orden válido desde el servidor del comercio según las instrucciones proporcionadas en la sección de Tokenización de una Orden.
• Habilitación de Scripts Externos: Verifica que tu aplicación o página web permita la carga de scripts externos desde los dominios de DEUNA para garantizar el funcionamiento adecuado del Widget.

1. Agrega referencias necesarias

Primero, añade estas referencias en tu código HTML:

Este primer script nos ayudará para el Cross Domain Login

<script src="https://cdn.getduna.com/cdl/index.js"></script>

Asegúrate de colocar estos scripts dentro de la etiqueta para una inicialización correcta.

Este segundo script, nos ayudará a levantar nuestro Checkout-widget

<script src="https://cdn.getduna.com/cdl/index.js"></script>

2. Tokeniza una orden

📘

NOTA:

Para detalles más específicos, se recomienda revisar la sección especializada Tokenizar una Orden

Flujo para Tokenizar una Orden

1. Obtener la API KEY Privada: Utiliza la API KEY privada obtenida en el Admin como parte del header de la petición a /merchants/orders con el nombre X-API-KEY.
2. Datos de la Orden: Proporciona los datos necesarios para la orden, como ejemplos de JSON para tipos de entrega como delivery o pickup.
3. Tokenización de la Orden: Desde el servidor del comercio, realiza una petición POST a Deuna para obtener una orden tokenizada con la estructura mínima requerida.

Realiza una petición POST desde el servidor del comercio a Deuna para obtener una orden tokenizada con la estructura mínima necesaria.

3. Inicializa el checkout

// Inicializar una instancia del checkout
const deunaCheckout = window.DeunaCheckout();

const config = {
    apiKey: "<tu clave API pública>",
    env: "production",
    orderToken: "<token de la orden>"
};

// Configurar el checkout
await deunaCheckout.config(config);

// Mostrar checkout
await deunaCheckout.initCheckout();

Variables para la Configuración del Widget

Aquí se muestran las variables esenciales para poder levantar nuestro widget:

Botón del checkout

El botón de Checkout activará el Widget, permitiendo a los clientes del comercio realizar compras de manera rápida y segura. Puedes utilizar tu propio botón si así lo deseas.

<button id="button-checkout-deuna" onclick="shouldOpen()">
  <img src="https://images.getduna.com/logo-full-deuna-D.svg" alt="DEUNA"> Checkout
</button>

<script>
  function shouldOpen() {
    const config = {
      // ...Configuración del punto anterior
    };

    deunaCheckout.configure(config).then(() => {
      deunaCheckout.shouldOpenCheckout().then((openCheckout) => {
        if (openCheckout) {
          deunaCheckout.show().then(() => {
            // Realizar acciones adicionales si es necesario
          });
        }
      });
    });

    // Opción alternativa:
    // await deunaCheckout.configure(config);
    // const openCheckout = await deunaCheckout.shouldOpenCheckout();
    // if (openCheckout) {
    //   await deunaCheckout.show();
    // }
  }
</script>

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

#button-checkout-deuna {
  margin: 30px auto;
  font-family: 'Roboto', sans-serif;
  background: #283271;
  border-radius: 4px;
  color: #ffff;
  width: 205px;
  height: 34px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  font-weight: 500;
  letter-spacing: -0.08em;
}

#button-checkout-deuna img {
  width: 20px;
}

🎉 ¡Perfecto! Ya estamos listos