Configure Checkout

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

Use address chosen by customer

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

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":"Fast delivery",
            "cost":0,
            "tax_amount":0,
            "min_delivery_date":"",
            "max_delivery_date":""
         },
         {
            "code":"programado",
            "name":"Programmed delivery",
            "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?: {
  			// Allows that address is editable in the Checkout
        addressReadonly?: boolean,
  			// Removes option to un select the adress tipe and uses "other" as default
        removeAddressTypeSelector?: boolean,
  			// Hides coupon form
        hideCoupons?: boolean,
  			// Hides form to add comments to the order
      	hideAdditionalComments?: boolean,
  			// Select the element where to render the checkout
      	targetSelector?: string,
  			// Hides the form the introduce cash change on order
        disableCashAmount?: boolean,
    }
};

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

Attribute	Description	Default value
`addressReadonly`	Show the customer a previously entered address without the possibility of editing.	false
`removeAddressTypeSelector`	Hide 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 to render Checkout.	false
`disableCashAmount`	Hide the form so that 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: {
      // To change commerece granted address
      onAddressEdit: () => {
        window.location.href = "https://somepage.com/address-selector";
      },
      // To change store used by commerce on pickup
      onStoreChange: () => {
        window.location.href = "https://somepage.com/address-selector";
      },
      // To change commerce granted coupons
      onCouponEdit: () => {
        window.location.href = "https://somepage.com/products-selector";
      },
      // Redirect on unknown checkout error
      onAppCrash: () =>{
      	window.location.href = "https://somepage.com";
      }
    }
};

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

Callback	Description
`onAddressEdit`	To change the user's address outside of Checkout, you can implement that callback .
`onStoreChange`	Change the pickup store.
`onCouponEdit`	Exchange coupons given by the business.
`onAppCrash`	Redirect to another page if a Checkout error appears.

Callbacks

Configure customizable callbacks in response to certain events.

Add callbacks to the Checkout:

const deunaCheckout = window.DeunaCheckout();

const config = {
    apiKey: "...",
    env: "staging",
    orderToken: "order token",
    // Fix the useful callbacks to trigger a behaviour
    callbacks?:{
  		// Callback is triggered when a successful purchase is done (independent of payment method)
    	onSuccess?: (data) => void;
			// Callback triggered on failed purchase.
      onError?: (data) => void;
			// Callback triggered when the Checkout Widget window is closed
      onSuccess?: (data) => void;
			// 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 executing `.initPaymentWidget`in `checkout_modules`	Modules are displayed based on what is passed when starting the widget.
2	Modules passed through payment 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` When the order is created, the following are taken: `checkout_modules` configured at the trade level.