Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.y.uno/llms.txt

Use this file to discover all available pages before exploring further.

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 install @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.
  },
});
FieldDescription
elementRootThe ID of the DOM element where the SDK should render the checkout UI.
payloadThe payment context for the current shopper, provided by the Yuno Payment Connector.
languageThe language to display the SDK in (e.g., en, es, pt-BR).
domainVTEXYour VTEX store domain.
onPaymentDoneCallback invoked when the payment finishes.
onErrorCallback invoked when an error occurs during the payment.
onLoadingCallback 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