Documentación

Configuración del Checkout

Suggest Edits

Nuestro checkout tiene funcionalidades adicionales que te pueden ser de utilidad.

Features Adicionales

Que vas a poder configurar con este apartado:

  • 📍 Dirección de entrega: Permite utilizar la dirección ingresada por el cliente para el proceso de compra.
  • 🚚 Programación de entrega: Permite a los clientes programar la fecha y hora de entrega de su pedido.
  • ⚙️ Configuraciones adicionales: Personaliza el comportamiento del proceso de compra según las preferencias y necesidades del comercio.
  • 🛠️ Acciones configurables: Configura acciones específicas para eventos como cambios de dirección, tienda o cupones durante el proceso de compra.
  • Callbacks personalizables: Configura callbacks personalizables como respuesta a determinados eventos.

Usar dirección ingresada por el cliente en el eCommerce

Para usar la dirección ingresada por el cliente en el Checkout, incluye la dirección dentro de la solicitud en la tokenización de la orden con la siguiente estructura:

{
   "order":{
     ...
      "shipping_address":{
         "first_name":"Jhon",
         "last_name":"Doe",
         "phone":"+599999999",
         "identity_document":"123456789",
         "lat":-0.190974,
         "lng":-78.496911,
         "address1":"Av. América 56, Quito 170129, Ecuador",
         "address2":"Av. América 56, Quito 170129, Ecuador",
         "city":"Quito",
         "zipcode":"170129",
         "state_name":"Pichincha",
         "country":"EC",
         "additional_description":"Cachan de la florita",
         "address_type":"home",
         "is_default":true
      }
   }
  ...
}

Programación de entrega

El Checkout tiene soporte para programar la entrega de la orden del cliente.

Para configurar la entrega, incluye la información dentro del payload de la orden siguiendo la estructura siguiente:

{
   "order":{
      "shipping_methods":[
         {
            "code":"delivery",
            "name":"Entrega inmediata",
            "cost":0,
            "tax_amount":0,
            "min_delivery_date":"",
            "max_delivery_date":""
         },
         {
            "code":"programado",
            "name":"Envío Programado",
            "cost":0,
            "tax_amount":0,
            "min_delivery_date":"",
            "max_delivery_date":"",
            "scheduler":[
               {
                  "date":"2022-06-21",
                  "start_time":"09:00",
                  "end_time":"22:00",
                  "steps_minutes":15
               },
               {
                  "date":"2022-06-22",
                  "start_time":"09:00",
                  "end_time":"22:00",
                  "steps_minutes":15
               },
               {
                  "date":"2022-06-23",
                  "start_time":"09:00",
                  "end_time":"22:00",
                  "steps_minutes":15
               },
               {
                  "date":"2022-06-24",
                  "start_time":"09:00",
                  "end_time":"22:00",
                  "steps_minutes":15
               },
               {
                  "date":"2022-06-25",
                  "start_time":"09:00",
                  "end_time":"22:00",
                  "steps_minutes":15
               },
               {
                  "date":"2022-06-26",
                  "start_time":"09:00",
                  "end_time":"22:00",
                  "steps_minutes":15
               }
            ]
         }
      ]
   }
}

Configuraciones adicionales

Puedes configurar comportamientos específicos sobre el checkout.

Agrega un objeto checkoutConfig al objeto de configuración del Widget.

const deunaCheckout = window.DunaCheckout();

const config = {
    apiKey: "...",
    env: "staging",
    orderToken: "order token",
    checkoutConfig?: {
      	// Permite que la dirección tomada por el cliente sea editable en el Checkout
        addressReadonly?: boolean,
      	// Quita opcion de seleccionar tipo de direccion y pone como default "other"
        removeAddressTypeSelector?: boolean,
        // Oculta formulario para agregar y visualizar cupones
        hideCoupons?: boolean,
      	// Oculta formulario para agregar comentarios adicionales a la orden
      	hideAdditionalComments?: boolean,
      	// Selecciona el elemento donde renderizar el checkout
      	targetSelector?: string,
        // Deshabilita el formulario para poder introducir el cambio de efectivo en la orden
        disableCashAmount?: boolean,
    }
};

deunaCheckout.configure(config);
deunaCheckout.show();
AtributoDescripciónValor por defecto
addressReadonlyMuestra al cliente una dirección previamente ingresada y sin posibilidad de edición.false
removeAddressTypeSelectorOculta el selector de tipo de dirección.false
hideCouponsOculta formulario para agregar y visualizar cupones.false
hideAdditionalCommentsOculta formulario para agregar comentarios adicionales a la orden.false
targetSelectorSelecciona el elemento donde renderizar el checkout.false
disableCashAmountOculta el formulario para poder introducir el cambio solicitado para la orden.false

Acciones

Para configurar acciones sobre eventos en el checkout, pasa funciones tipo callback al objeto de configuración del widget.

📘

Esta configuración es totalmente opcional.

const deunaCheckout = window.DunaCheckout();

const config = {
    apiKey: "...",
    env: "staging",
    orderToken: "Token de la orden",
    actions: {
      // Para editar direccion dada por comercio
      onAddressEdit: () => {
        window.location.href = "https://somepage.com/address-selector";
      },
      // Para cambiar tienda dada por comercio en  pickup
      onStoreChange: () => {
        window.location.href = "https://somepage.com/address-selector";
      },
      // Para cambiar cupones dados por el comercio
      onCouponEdit: () => {
        window.location.href = "https://somepage.com/products-selector";
      },
      // Para redirigir cuando sucede algun error desconocido en el checkout
      onAppCrash: () =>{
      	window.location.href = "https://somepage.com";
      }
    }
};

deunaCheckout.configure(config);
deunaCheckout.show();
CallbackDescripción
onAddressEditCuando se quiera cambiar la dirección del usuario fuera del Checkout, se puede implementar ese callback.
onStoreChangeCuando se quiere cambiar la tienda de recogida pickup.
onCouponEditCuando se quiere cambiar cupones dados por el comercio.
onAppCrashCuando se quiere redirigir a otra página si se levanta la vista de error del checkout.

Callbacks

Añade callbacks al Checkout:

const deunaCheckout = window.DunaCheckout();

const config = {
    apiKey: "...",
    env: "staging",
    orderToken: "order token",
    // Arreglo de callbacks útiles para disparar comportamiento 
    callbacks?:{
      // Callback disparada cuando compra se realice exitosamente independientemente del método de pago.
    	onSuccess?: (data) => void;
      // Callback disparada cuando compra falle.
      onError?: (data) => void;
      // Callback disparada al cerrar la ventana del Checkout Widget
      onSuccess?: (data) => void;
      // Callback para escuchar eventos que no sean los principales descritos anteriormente.
      eventListener?: (eventType, payload)) => void;
     }
};

deunaCheckout.configure(config);
deunaCheckout.show();

Updated about 12 hours ago