> ## 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.

# Lite SDK (Enrollment Web)

<Warning>
  **Orientation: Choosing Your Integration Flow**, before you begin, please review the [Official Integration Flow](/docs/sdks/overview/understanding-flows).

  * **Standard Flow ([Full Checkout](/docs/sdks/full-checkout/web-payments))**: Recommended for most merchants. Yuno handles the UI, security, and automatic updates for payment methods.
  * **Custom Flow (This SDK)**: Use this only if you require full control over the UX. **Note**: You will be responsible for manually handling payment statuses, 3DS transitions, and fraud routing data collection.
</Warning>

Follow this step-by-step guide to implement and enable Yuno's Lite Web SDK enrollment functionality in your application.

## Step 1: Include the library in your project

Before proceeding with the Lite SDK implementation, see the [SDK Integration Overview](/docs/sdks/overview/quickstart) for detailed instructions on how to properly integrate the SDK into your project.

The integration guide provides three flexible methods:

1. Direct HTML script inclusion
2. Dynamic JavaScript injection
3. NPM module installation

Choose the integration method that best suits your development workflow and technical requirements. After completing the SDK integration, you can proceed with the following steps to implement the lite enrollment functionality.

<Note>
  **TypeScript Library**

  If you are using TypeScript, Yuno offers a [library](https://www.npmjs.com/package/@yuno-payments/sdk-web-types) that provides access to all available methods in the Yuno Web SDK.
</Note>

## Step 2: Initialize SDK with the public key

Initialize the Yuno SDK in your JavaScript application by providing a valid `PUBLIC_API_KEY`:

```javascript theme={"theme":{"light":"github-dark","dark":"github-dark"}}
const yuno = await Yuno.initialize(PUBLIC_API_KEY);
```

<Note>
  **Credentials**

  See the credentials page for more information: [/reference/getting-started/authentication](/reference/getting-started/authentication)
</Note>

## Step 3: Create a customer session

To start the enrollment process, you need to provide the `customer_session`. First, you need to create a customer. Use the [Create Customer](/reference/customers/create-customer) endpoint to create new customers. In the response, you will receive the customer `id`, which you use to create the customer session.

After creating the customer, you can create the customer session. Use the customer `id` and the [Create Customer Session](/reference/customer-sessions-enrollment/create-customer-session) endpoint. The `customer_session` will be provided in the response. You need a new `customer_session` every time you enroll in a new payment method.

## Step 4: Start the enrollment process

Use the configuration below to provide a lite and user-friendly enrollment experience for your customers:

```javascript theme={"theme":{"light":"github-dark","dark":"github-dark"}}
await yuno.mountEnrollment({
  customerSession: "438413b7-4921-41e4-b8f3-28a5a0141638",
  elementSelector: "#root",
  countryCode: "US",
  language: "en-US",
  showLoading: true,
  issuersFormEnable: true,
  onLoading: (args) => console.log(args),
  card: {
    type: "extends",
    styles: "",
    texts: {},
  },
  texts: {},
  yunoEnrollmentStatus(data) {
    console.log("Enrollment status:", data);
  },
  yunoError(error, data) {
    console.error("An error occurred:", error);
    await yuno.hideLoader();
  },
});
```

When using `mountEnrollment`, specify the callbacks to handle enrollment. You can also customize the interface using the `texts` objects.

### Parameters

Configure the lite enrollment with the following options:

| Parameter              | Description                                                                                                             |
| ---------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| `customerSession`      | Refers to the current enrollment's [customer session](/reference/customer-sessions-enrollment/create-customer-session). |
| `elementSelector`      | The HTML element where the enrollment form will be rendered.                                                            |
| `countryCode`          | This parameter specifies the country code for which the enrollment is being set up.                                     |
| `language`             | Language for enrollment forms.                                                                                          |
| `showLoading`          | Controls the visibility of the Yuno loading/spinner page during the enrollment process.                                 |
| `onLoading`            | Required to receive notifications about server calls or loading events during the enrollment process.                   |
| `issuersFormEnable`    | Enables the issuer's form (e.g., a list of banks).                                                                      |
| `card`                 | Defines the configuration for the card form.                                                                            |
| `texts`                | Allows you to set custom button texts.                                                                                  |
| `yunoEnrollmentStatus` | Callback invoked when the enrollment process finishes. Receives `{ vaultedToken, status }`.                             |
| `yunoError`            | Callback invoked when there is an error in the enrollment process.                                                      |

<Note>
  **Status Values**

  Common status values include `ENROLLED`, `DECLINED`, `CANCELED`, and `ERROR`.
</Note>

## Step 5: Initiate the enrollment (Required)

After mounting the SDK using `await yuno.mountEnrollment()`, the form will be displayed in the specified element. The user can then proceed with entering their payment method details to complete the enrollment.

<Note>
  **Demo App**

  In addition to the code examples provided, you can access the [Demo App](https://github.com/yuno-payments/yuno-sdk-web) for a complete implementation of Yuno SDKs (clone from the repository).
</Note>

## Error handling

Handle errors returned by the SDK in your app (e.g. failed enrollment, validation errors). For HTTP status and response codes, see [Status and response codes](/reference/getting-started/response-codes) in the API reference.

## Stay updated

Visit the [changelog](/changelog/web#v1-6-0) for the latest SDK updates and version history.