Configuración opcional

Adicional a la configuración que implementamos anteriormente, puedes implementar las siguientes funcionalidades opcionales que permitirán tener una mejor experiencia a tus clientes.

Dirección de entrega

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
               }
            ]
         }
      ]
   }
}

Feature Flags

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?: {
      	// Toma direccion dada por el comercio y la muestra en un expander
        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";
      },
      onAppCrash: () =>{
      	window.location.href = "https://sompage.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.