Documentación

Configuración del Checkout

Suggest Edits

El Checkout DEUNA tiene funcionalidades adicionales que te pueden ser de utilidad.

En esta página se documenta cómo configurar el Checkout para tu negocio.

Usar la dirección elegida por el cliente

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.

Permite a tus clientes programar la fecha y hora de entrega de su pedido.

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

Configura acciones específicas para eventos durante el proceso de compra como:

  • Cambios de dirección
  • Cambios de tienda
  • Cambios de cupones.

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

Personaliza el comportamiento del proceso de compra según tus preferencias y necesidades.

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

Configura callbacks personalizables como respuesta a determinados eventos.

Añade callbacks al 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();

Updated 3 days ago