V2 VTEX Widget

This page provides instructions for installing the VTEX V2 connector.

The VTEX platform features a payment app system designed to allow customers to complete their purchases without leaving your website.

However, this solution has some limitations when it comes to implementing targeted promotions and providing relevant information about financing options, such as interest-based and interest-free payment plans.

The V2 widget allows you to:

• Apply promotions under specific conditions
• Facilitates the transmission of information on financing options
• Includes details of monthly payments with and without interest.

Configure the DEUNA Widget V2

To start using the DEUNA V2 widget in your VTEX store, you will need to provide some details to the DEUNA team:

1. VTEX API KEY
2. VTEX APP TOKEN
3. Name of the credential account holder

With this information, DEUNA will be able to configure everything necessary so that you can configure the V2 widget.

1. Integrate the Widget script

To use the V2 connector, you must integrate the following script into your checkout configuration in your VTEX store.

📘

Make sure that notification_type is set to sync. For this configuration you can ask DEUNA support for help.

For checkout Legacy

Add the script by entering your VTEX administrator in the following path: Store Settings -> Storefront -> Checkout -> Code -> checkoutcustom6.js

function loadScriptWithAttributes(url, attributes, target) {
    return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = url;

        if (attributes) {
            Object.keys(attributes).forEach(key => {
                script.setAttribute(key, attributes[key]);
            });
        } else {
           console.error("DEUNA: no attributes: ", attributes);
        }

        script.onload = resolve;
        script.onerror = reject;

		    const currentTarget = target ?? document.head
        if (!currentTarget) {
          console.error("DEUNA: 'currentTarget': is not defined")
 		    }
		    currentTarget.appendChild(script);        
    });
}

const baseURL = "<base_url>";
console.log("DEUNA cdn: ", baseURL);
const attributes = { 
	  env: "<environment_name>",
    publicApiKey: "<public_key>"
};
 

loadScriptWithAttributes(baseURL, attributes)
    .then(() => {
      console.log("DEUNA: loaded script Succesfully!")
    })
    .catch((err) => {
      console.error("DEUNA: Error load script cdn: ", err);
    });

Click on Save to finish.

For UI custom Checkout

Add the script by entering your VTEX administrator in the following path: Store Settings -> Storefront -> Checkout UI Custom -> Javascript

function loadScriptWithAttributes(url, attributes, target) {
    return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = url;

        if (attributes) {
            Object.keys(attributes).forEach(key => {
                script.setAttribute(key, attributes[key]);
            });
        } else {
           console.error("DEUNA: no attributes: ", attributes);
        }

        script.onload = resolve;
        script.onerror = reject;

		    const currentTarget = target ?? document.head
        if (!currentTarget) {
          console.error("DEUNA: 'currentTarget': is not defined")
 		    }
		    currentTarget.appendChild(script);        
    });
}

const baseURL = "<base_url>";
console.log("DEUNA cdn: ", baseURL);
const attributes = { 
	  env: "<environment_name>",
    publicApiKey: "<public_key>"
};
 

loadScriptWithAttributes(baseURL, attributes)
    .then(() => {
      console.log("DEUNA: loaded script Succesfully!")
    })
    .catch((err) => {
      console.error("DEUNA: Error load script cdn: ", err);
    });

Click Save to finish.

For Checkout Custom / Customized by the merchant

Add the JavaScript checkout file to the following script:

function loadScriptWithAttributes(url, attributes, target) {
    return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = url;

        if (attributes) {
            Object.keys(attributes).forEach(key => {
                script.setAttribute(key, attributes[key]);
            });
        } else {
           console.error("DEUNA: no attributes: ", attributes);
        }

        script.onload = resolve;
        script.onerror = reject;

		    const currentTarget = target ?? document.head
        if (!currentTarget) {
          console.error("DEUNA: 'currentTarget': is not defined")
 		    }
		    currentTarget.appendChild(script);        
    });
}

const baseURL = "<base_url>";
console.log("DEUNA cdn: ", baseURL);
const attributes = { 
	  env: "<environment_name>",
    publicApiKey: "<public_key>"
};
 

loadScriptWithAttributes(baseURL, attributes)
    .then(() => {
      console.log("DEUNA: loaded script Succesfully!")
    })
    .catch((err) => {
      console.error("DEUNA: Error load script cdn: ", err);
    });

2. Replace the values of the variables

After copying the script, replace the variables with the corresponding information:

👍

Now you have the complete installation and can perform a test transaction.

3. Make your first purchase

Once configured, you can carry out a trial purchase in a few simple steps.

Get cards to take tests

For our sandbox environment, DEUNA provides you with cards for testing.

You can get themhere

Get connector test credentials

In order to get credentials to test the connector, you need to send an email to your executive or by writing to [email protected].

Result

Instal Widget V1 (Legacy)

Widget V1 VTEX Connector instrucctions.

A Payment App in VTEX displays our service directly in your store without redirecting the user, improving the experience by keeping the buyer on your site.

Our Payment App is available on the VTEX marketplace and can be easily installed with a few clicks.

1. Go to https://apps.vtex.com/.

2. Search for DEUNA in the search bar.

3. Select the DEUNA plugin and click on "GET APP".

4. Add the URL of your store and click on Confirm.

   1. Once you press it, VTEX will validate that you are logged into your VTEX account and will add it to the VTEX marketplace cart.
   2. Once you add it you must press the "PLACE ORDER" button. This will add our app to your store.

5. On the DEUNA screen, click the install button.
   • After executing the URL, a pop-up window appears.
6. Click on Install.
   
7. Accept the Terms and Conditions.
8. Click on Save.

📘

After installing the page and accepting the terms and conditions, you may remain on the same page. This could be due to the VTEX cache. We suggest you refresh the page and wait a few minutes to allow VTEX to update the corresponding information.