> ## Documentation Index
> Fetch the complete documentation index at: https://yuno-3979e326-fix-create-subscription-card-usage.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](/docs/plugins/vtex/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

<Steps>
  <Step title="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:

    <CodeGroup>
      ```bash npm theme={null}
      npm install @yuno-payments/sdk-web-vtex
      ```

      ```bash yarn theme={null}
      yarn add @yuno-payments/sdk-web-vtex
      ```
    </CodeGroup>
  </Step>

  <Step title="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:

    ```javascript theme={null}
    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.
      },
    });
    ```

    <Accordion title="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.                             |
    </Accordion>

    <Note>
      For specific implementation guidance and the exact configuration values for your store, contact your **Yuno integration partner**.
    </Note>
  </Step>
</Steps>

***

**Resources**

* [NPM Package: @yuno-payments/sdk-web-vtex](https://www.npmjs.com/package/@yuno-payments/sdk-web-vtex)