Direct SDK integration

Render the Yuno checkout experience directly on your own front-end using the SDK Web for VTEX.

Most stores integrate Yuno through the standard plugin flow described in Set up Yuno on VTEX. For stores that need to render the Yuno checkout experience directly on their own front-end instead, Yuno provides the Yuno SDK Web for VTEX as an npm package.

When this applies

If your store has standard requirements, you do not need this page — the standard plugin flow already handles everything. Use the direct SDK integration only when your store has specific needs that require the Yuno checkout experience to be rendered directly by your front-end (for example, in headless or highly customized checkouts).

What stays the same

The setup in your VTEX dashboard and Yuno dashboard does not change:

• You still configure Yuno as a payment provider in VTEX.
• You still configure the webhook in your Yuno dashboard.
• The Yuno Payment Connector remains the backbone of the integration — every payment continues to flow through it.

What’s different

Instead of letting the standard flow render the Yuno checkout for you, your front-end mounts the Yuno SDK Web for VTEX directly and provides it with the configuration it needs to render the checkout experience for the current shopper.

---

Integration steps

1. Install the SDK

   The Yuno SDK Web for VTEX is published on npm as @yuno-payments/sdk-web-vtex. Install it in your project using your preferred package manager:

   npm

   npm install @yuno-payments/sdk-web-vtex
   

   yarn add @yuno-payments/sdk-web-vtex
   
2. Mount the SDK

   Mount the SDK on the page where the shopper completes the payment. Initialize it by calling the mount method with a configuration object:

   import { mount } from '@yuno-payments/sdk-web-vtex';
   
   mount({
     elementRoot: 'yuno-sdk-root', // ID of the DOM element
     payload: payloadFromConnector,
     language: 'en',
     domainVTEX: 'yourstore.myvtex.com',
     onPaymentDone: (result) => {
       // Continue to your order confirmation flow.
     },
     onError: (error) => {
       // Handle and surface the error to the shopper.
     },
     onLoading: (isLoading) => {
       // Show or hide a loading indicator.
     },
   });
   

   Configuration reference

   Field	Description
   elementRoot	The ID of the DOM element where the SDK should render the checkout UI.
   payload	The payment context for the current shopper, provided by the Yuno Payment Connector.
   language	The language to display the SDK in (e.g., en, es, pt-BR).
   domainVTEX	Your VTEX store domain.
   onPaymentDone	Callback invoked when the payment finishes.
   onError	Callback invoked when an error occurs during the payment.
   onLoading	Callback invoked when the SDK changes its loading state.

   For specific implementation guidance and the exact configuration values for your store, contact your Yuno integration partner.

---

Resources

• NPM Package: @yuno-payments/sdk-web-vtex