Configuración Adicional

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, se debe incluir 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

Nuestro checkout tiene soporte para poder programar la entrega de la orden del cliente, para poder configurar esto se debe incluir la información dentro del payload de la orden tokenizada siguiendo esta estructura.

{
   "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

Sirven para configurar comportamientos específicos sobre el checkout, se debe agregar 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();

Atributo	Descripción	Valor por defecto
`addressReadonly`	Muestra al cliente una dirección previamente ingresada y sin posibilidad de edición.	false
`removeAddressTypeSelector`	Oculta el selector de tipo de dirección.	false
`hideCoupons`	Oculta formulario para agregar y visualizar cupones.	false
`hideAdditionalComments`	Oculta formulario para agregar comentarios adicionales a la orden.	false
`targetSelector`	Selecciona el elemento donde renderizar el checkout.	false
`disableCashAmount`	Oculta el formulario para poder introducir el cambio solicitado para la orden.	false

Acciones

Para configurar acciones sobre ciertos eventos en el checkout, se deben pasar 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();

Callback	Descripción
`onAddressEdit`	Cuando se quiera cambiar la dirección del usuario fuera del Checkout, se puede implementar ese callback.
`onStoreChange`	Cuando se quiere cambiar la tienda de recogida pickup.
`onCouponEdit`	Cuando se quiere cambiar cupones dados por el comercio.
`onAppCrash`	Cuando se quiere redirigir a otra página si se levanta la vista de error del checkout.

Callbacks

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();