Configuración del Checkout
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();
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
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();
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
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