Integración del Checkout

Full Checkout widget

Integra nuestro Full Checkout widget a tu comercio.

Cómo funciona

El siguiente diagrama ilustra cómo se hace una compra exitosa mediante el widget de Checkout DEUNA:

Requisitos

El siguiente contenido detalla los requisitos para inicializar el widget de Checkout:

• 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 Crear 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.

Integrar el checkout

Instala el checkout. Los siguientes pasos describen la instalación de nuestro Checkout.

📘

Ve a nuestra integración de muestra para un ejemplo práctico.

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

1. Agrega referencias necesarias

Añade las siguientes 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>

El segundo script levanta el Checkout-widget:

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

📘

Coloca los scripts dentro de la etiqueta para una inicialización correcta.

2. Tokeniza una orden

Haz un pedido al servicio Crear Orden de la API y para crear y tokenizar una orden.

3. Inicializa el checkout

Inicializa una instancia del checkout en tu aplicación:

// 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:

4. Activa el botón del Checkout

El botón de Checkout activará el Widget, permitiendo a tus clientes 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