Skip to main content
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 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.
TypeScript LibraryIf you are using TypeScript, Yuno offers a library that provides access to all available methods in the Yuno Web SDK.

​
Step 2: Initialize SDK with the public key

Initialize the Yuno SDK in your JavaScript application by providing a valid PUBLIC_API_KEY: 
const yuno = await Yuno.initialize(PUBLIC_API_KEY);
CredentialsSee the credentials page for more information: /reference/getting-started/authentication

​
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 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 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: 
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:
ParameterDescription
customerSessionRefers to the current enrollment’s customer session.
elementSelectorThe HTML element where the enrollment form will be rendered.
countryCodeThis parameter specifies the country code for which the enrollment is being set up.
languageLanguage for enrollment forms.
showLoadingControls the visibility of the Yuno loading/spinner page during the enrollment process.
onLoadingRequired to receive notifications about server calls or loading events during the enrollment process.
issuersFormEnableEnables the issuer’s form (e.g., a list of banks).
cardDefines the configuration for the card form.
textsAllows you to set custom button texts.
yunoEnrollmentStatusCallback invoked when the enrollment process finishes. Receives { vaultedToken, status }.
yunoErrorCallback invoked when there is an error in the enrollment process.
Status ValuesCommon status values include ENROLLED, DECLINED, CANCELED, and ERROR.

​
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.
Demo AppIn addition to the code examples provided, you can access the Demo App for a complete implementation of Yuno SDKs (clone from the repository).

​
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 in the API reference.

​
Stay updated

Visit the changelog for the latest SDK updates and version history.