Skip to main content
The Yuno checkout inside VTEX moves from Web SDK 1.6 to Web SDK 1.11. Since Web SDK 1.9, every class and id the SDK renders is named sdk-payments-* instead of yuno-* or Yuno-*. For example, Yuno-accordion__heading becomes sdk-payments-accordion__heading. Nothing throws an error after the upgrade. Custom CSS and JS that targets an old name simply stops applying: a hidden element shows again, a restyled button goes back to the default style, a script that reads an element finds nothing. These names keep working:
  • window.Yuno and the yuno-sdk-ready event, which stay as aliases.
  • The names owned by the VTEX layer, such as yuno-checkout-root, yuno-form-root, yuno-external-button-root, yuno-sdk-web-vtex-app and the express button classes (yuno-google-pay-button, yuno-samsung-pay-button and their groups).
Use one of the three checks below before the upgrade reaches your store.

Option 1: console snippet on the live checkout

Use this to check what the live store loads, including CSS from your theme and apps.
1

Open the checkout at the payment step

Open your store’s checkout in Chrome, go to the payment step and make sure the Yuno form is visible.
2

Paste the snippet in the DevTools console

Open DevTools, go to the Console tab, paste the snippet and press Enter.
3

Read the table

The snippet prints the SDK bundle on the page, a table with every CSS rule and inline script that uses a yuno-* name, and the count of selectors that break on 1.11. The on_1_11 column says BREAKS -> <new name> for a renamed selector, BREAKS (removed) for a name with no counterpart, and ok or not an SDK name otherwise.
yuno-upgrade-check.browser.js
The snippet fetches the rename map from docs.y.uno, so the console needs network access to that host. If the map cannot be loaded it stops with an error instead of reporting a clean result. The snippet cannot read stylesheets served from another origin. It lists each one as a warning, so check those files by hand or with the scanner below.

Option 2: scanner on your files

Use this on the files you edit: checkout6-custom.css, checkout6-custom.js, a theme folder or a VTEX IO app. It needs Node.js 18 or later.
1

Save the scanner as a file

Copy the script below into a file named yuno-upgrade-check.mjs. It loads the rename map from docs.y.uno by itself; to run it offline, download the rename map next to it or point YUNO_RENAME_MAP at the file.
yuno-upgrade-check.mjs
2

Run it on your files or folders

It scans .css, .scss, .less, .js, .mjs, .ts, .jsx, .tsx, .html, .vue, .liquid and .hbs files and skips node_modules, dist and build folders found inside the paths you pass (a path you pass explicitly is always scanned). A merchant name that only starts like an SDK name, such as yuno-checkout-banner, is reported as not-sdk.
3

Read the result

Each line shows the status, the file and line, the name and what to do. The exit code is 1 when at least one name breaks on 1.11 and 0 otherwise, so you can run it in CI.
Sample output:

Option 3: the rename map

The rename map is the JSON file both tools read. Use it to look up a name by hand or to build your own check. It lists the 222 class and id names found in the Web SDK 1.6 bundle, plus the VTEX layer names that do not change: A name that is not in the map is not an SDK 1.6 name. It is most likely your own id or class and needs no change.

What to do with a hit

  1. Renamed: replace the old name with the new one in your CSS or JS. A selector that has to work before and after the upgrade can list both names, for example .Yuno-accordion__heading, .sdk-payments-accordion__heading.
  2. Removed: open the checkout on Web SDK 1.11 in sandbox, find the element your rule was meant for and write the selector against the 1.11 DOM. The element may have a different structure or may no longer exist.
  3. Test before production: ask your technical account manager for a sandbox test of your checkout on Web SDK 1.11 with your custom files applied.
The same renames apply to any merchant on Web SDK 1.6, 1.7 or 1.8 that moves to 1.9 or later, inside or outside VTEX. The scanner and the rename map work the same way for those integrations.