Configure Checkout

The DEUNA Checkout has additional features that may be useful to you.

This page documents how to set up Checkout for your business.

Use address chosen by customer

To use the address entered by the customer at Checkout.

Include the address within the request in the order tokenization with the following structure:

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

Schedule deliveries

The Checkout has support for scheduling the delivery of the customer's order.

Allow your customers to schedule the date and time for their order to be delivered.

To configure delivery, include the information within the order payload following the structure below:

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

Additional settings

Set up specific actions for events during the checkout process such as:

Changes of address
Store changes
Coupon changes

Add an checkoutConfig object to the widget configuration object.

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
  			// Allows that address is editable in the Checkout
        addressReadonly?: boolean,
      	// Quita opcion de seleccionar tipo de direccion y pone como default "other"
  			// Removes option to un select the adress tipe and uses "other" as default
        removeAddressTypeSelector?: boolean,
        // Oculta formulario para agregar y visualizar cupones
  			// Hides coupon form
        hideCoupons?: boolean,
      	// Oculta formulario para agregar comentarios adicionales a la orden
  			// Hides form to add comments to the order
      	hideAdditionalComments?: boolean,
      	// Selecciona el elemento donde renderizar el checkout
  			// Select the element where to render the checkout
      	targetSelector?: string,
        // Deshabilita el formulario para poder introducir el cambio de efectivo en la orden
  			// Hides the form the introduce cash change on order
        disableCashAmount?: boolean,
    }
};

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

Attribute	Description	Default value
`addressReadonly`	Shows the customer a previously entered address without the possibility of editing.	false
`removeAddressTypeSelector`	Hides the address type selector.	false
`hideCoupons`	Hide form to add and view coupons.	false
`hideAdditionalComments`	Hide form to add additional comments to the order.	false
`targetSelector`	Select the element where to render the checkout.	false
`disableCashAmount`	Hide the form so you can enter the requested change for the order.	false

Actions

Customize the purchasing process according to your preferences and needs.

To configure actions on checkout events, pass callback functions to the widget's configuration object.

const deunaCheckout = window.DunaCheckout();

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

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

Callback	Descriptipn
`onAddressEdit`	When you want to change the user's address outside of Checkout, you can implement that callback .
`onStoreChange`	When you want to change the pickup pickup store.
`onCouponEdit`	When you want to exchange coupons given by the business.
`onAppCrash`	When you want to redirect to another page if the checkout error appears.

Callbacks

Configure customizable callbacks in response to certain events.

Add callbacks to the Checkout:

const deunaCheckout = window.DunaCheckout();

const config = {
    apiKey: "...",
    env: "staging",
    orderToken: "order token",
    // Arreglo de callbacks útiles para disparar comportamiento 
    // Fix the useful callbacks to trigger a behaviour
    callbacks?:{
      // Callback disparada cuando compra se realice exitosamente independientemente del método de pago.
  		// Callback is triggered when a successful purchase is done (independent of payment method)
    	onSuccess?: (data) => void;
      // Callback disparada cuando compra falle.
			// Callback triggered on failed purchase.
      onError?: (data) => void;
      // Callback disparada al cerrar la ventana del Checkout Widget
			// Callback triggered when the Checkout Widget window is closed
      onSuccess?: (data) => void;
      // Callback para escuchar eventos que no sean los principales descritos anteriormente.
			// Callback to listen to non-main events that are not described previously.
      eventListener?: (eventType, payload)) => void;
     }
};

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

Priority to display modules

The following table documents the priority for displaying each module:

Priority	Source	Description
1	Modules passed by executinfg `.initPaymentWidget`in `checkout_modules`	Modules are displayed based on what is passed when starting the widget.
2	Módulos passed through payement link in`checkout_modules`	The order is checked to verify if `checkout_modules` has modules to display.
3	Global merchant configuration	If it is not passed in the `checkout_modules` in the function `.initPaymentWidget` or in `checkout_modules` At the time of creating the order, the following are taken: `checkout_modules` configured at the trade level.