Integrate Checkout
This page provides a guide for integrating DEUNA's Full Checkout widget into your store.
Choose your integration
Integrate Checkout into your payment solution using the following options:
Full Checkout widget
The Full Checkout widget is a customizable solution that provides a complete user experience (UX/UI). Ideal for those looking for a streamlined and distinctive shopping experience.
Headless (SDK)
An option that offers DEUNA Checkout's capabilities in the backend, without altering the current user experience.
Flexible modules
Complement your current experience with our Checkout modules and adapt them to your needs.
Each module includes different features. Decide which module to use for your checkout and customize it.
You can configure the flexible modules according to your needs.
Integrate the checkout
The following steps describe how to install our checkout..
For a practical example, refer to the Sample integration.
In order to use the Widget, you have to follow the following steps:
Requisites
The following content details the requirements for initializing the Checkout widget:
- Public and private API keys: Make sure you have the public and private API keys provided by the DEUNA Administrator.
- Valid Order Token: Obtain a valid order token from the merchant server according to the instructions provided in Create Order
- Enabling external scripts: Verify that your application or website allows the loading of external scripts from DEUNA domains to ensure the Widget works properly.
1. Add necessary references
Add the following references to your HTML code.
Place the scripts inside the <head> tag for correct initialization.
The first script will help us for Cross Domain Login:
<script src="https://cdn.getduna.com/cdl/index.js"></script>
The second script launches the Checkout-widget:
<script src="https://cdn.getduna.com/cdl/index.js"></script>
2. Tokenize an order
Make a request to the Create Order endpoint to create and tokenize an order.
3. Initialize the Checkout
Initialize a checkout instance in your application:
// Inicializar una instancia del checkout - Initialize a checkout instance
const deunaCheckout = window.DeunaCheckout();
const config = {
apiKey: "<tu clave API pública>",
env: "production",
orderToken: "<token de la orden>"
};
// Configurar el checkout - Configure the checkout
await deunaCheckout.config(config);
// Mostrar checkout - show the checkout
await deunaCheckout.initCheckout();
Variables for widget configuration
Here are the essential variables to be able to build our widget:
| Attribute | Description | Default value |
|---|---|---|
| Env | For development use staging and for production use production . | production |
| API KEY | Public API Key obtained in the Admin. | null |
| orderToken | Identifier generated by DEUNA and obtained from the merchant's serve | null |
4. Activate the Checkout button
The Checkout button will activate the Widget, allowing your customers to make purchases quickly and securely.
You can use your own button.
<button id="button-checkout-deuna" onclick="shouldOpen()">
<img src="https://images.getduna.com/logo-full-deuna-D.svg" alt="DEUNA"> Checkout
</button>
<script>
function shouldOpen() {
const config = {
// Configures previous point
};
deunaCheckout.configure(config).then(() => {
deunaCheckout.shouldOpenCheckout().then((openCheckout) => {
if (openCheckout) {
deunaCheckout.show().then(() => {
// Make additional actions if necessary
});
}
});
});
// Alternative option:
// await deunaCheckout.configure(config);
// const openCheckout = await deunaCheckout.shouldOpenCheckout();
// if (openCheckout) {
// await deunaCheckout.show();
// }
}
</script>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
#button-checkout-deuna {
margin: 30px auto;
font-family: 'Roboto', sans-serif;
background: #283271;
border-radius: 4px;
color: #ffff;
width: 205px;
height: 34px;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
border: none;
font-weight: 500;
letter-spacing: -0.08em;
}
#button-checkout-deuna img {
width: 20px;
}
Updated 2 days ago