Checkout setup

This page loads the widget on your checkout page, which enables the campaign label and icon on the Nelo payment row and the explainer card in the payment step. The steps are the same for Store Framework and legacy CMS stores.

Product pages are set up separately — see Product page setup.

Add the loader

Load the widget from checkout6-custom.js. The content is the same in both variants below:

window._neloConfig = { publishableKey: 'YOUR_PUBLISHABLE_KEY' };
var s = document.createElement('script');
s.src = 'https://js.nelo.co/platform/vtex.js';
s.defer = true;
document.head.appendChild(s);

checkout6-custom.js is a JavaScript file, not HTML. Do not wrap this snippet in <script> tags — doing so breaks the entire file and every customization in it, with Uncaught SyntaxError: Unexpected token '<' in the browser console.

Which variant applies to your store: open https://<account>.myvtex.com/files/checkout6-custom.js. If the first line is a comment like /* source: <[email protected]> */, your store generates that file from a repository — use variant A.

Variant A — your store uses the checkout-ui-settings app

1. In that repository, open checkout-ui-custom/checkout6-custom.js and append the snippet.
2. Bump the patch version in manifest.json.
3. Test with vtex link on a workspace, then release as usual: vtex publish, then vtex deploy (allowed 7 minutes after publish), then install the new version on master.

Do not paste the snippet in the admin code editor in this case — the app overwrites admin edits on its next deploy.

Variant B — your store edits checkout code in the admin

1. Open Admin → Store Settings → Checkout, click the gear icon, then the Code tab.
2. Select checkout6-custom.js, append the snippet at the end, and save.

Admin checkout files are account-wide and take effect on production immediately. Shoppers see nothing until they select Nelo in the payment step, and removing the snippet reverts it instantly.

Show Nelo higher in the payment list

Vtex orders payment methods by the order in which their payment conditions were activated, oldest first. To move Nelo up, go to Admin → Store Settings → Payments → Payment conditions, deactivate the conditions that should appear below Nelo, then reactivate them one at a time in the order you want. Nelo's own condition stays untouched.

Do this outside peak hours: while a condition is deactivated, that method does not appear in checkout. Some gateway-affiliated methods always resolve last regardless of order.

Next

Validate both surfaces with the checklist on Improve conversion in Vtex, including a real test order with Nelo. If you have not set up product pages yet, see Product page setup.