Skip to main content
The Web SDK makes it easy to implement enrollment flows for saving payment methods to a customer account. Include the library in your project by following the same steps as in payment flows. This lets you complete step 1 and continue with the enrollment flow below.

​
Additional resources

​
Requirements

​
Parameters

For the full list of parameters and callbacks, see the Web SDK Common Reference.
ParameterDescription
customerSessionCustomer session ID from your backend (Create customer session API). Required.
countryCodeISO country code (e.g. US).
languageLanguage code for the UI (e.g. en). Optional.
showLoadingShow loading spinner. Optional.
onLoadingCallback: loading state updates. Optional.
elementSelectorCSS selector where the enrollment form mounts. Optional.
cardCard form options. Optional.
yunoEnrollmentStatusCallback: enrollment ended; receives vaultedToken and status.
issuersFormEnableShow issuer (bank) list. Optional.
textsCustom button/label text. Optional.

​
full-checkout Enrollment (Web)

Use full-checkout for a seamless integration with pre-built UI. Implement enrollment as follows.

​
Step 1: Include the library in your project

Including the library in your project is done in the same way as in payment flows.

​
Step 2: Initialize the SDK

See Quickstart guide for initialization.

​
Step 3: Create a customer session and an enrollment payment method object

Create a customer session and an enrollment payment method object on your server-side to keep private API keys secure; define which payment method the customer can enroll when creating the payment method object.

​
Server-side example

Create a customer session and enrollment payment method on your backend. This keeps your private API keys secure. 
// 1. Create customer session
const customerSession = await fetch(
  "https://api-sandbox.y.uno/v1/customers/sessions",
  {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${PRIVATE_SECRET_KEY}`,
    },
    body: JSON.stringify({
      customer_id: "your-customer-id",
      country: "US",
    }),
  }
).then((res) => res.json());

// 2. Create enrollment payment method
const enrollment = await fetch(
  `https://api-sandbox.y.uno/v1/customers/sessions/${customerSession.id}/payment-methods`,
  {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${PRIVATE_SECRET_KEY}`,
    },
    body: JSON.stringify({
      type: "CARD",
    }),
  }
).then((res) => res.json());

// Return customerSession to your client
return customerSession;

​
Client-side example

After receiving the customerSession from your server, initialize the Yuno SDK and mount the enrollment form on the client-side. 
// Initialize Yuno SDK
const yuno = await Yuno.initialize(PUBLIC_API_KEY);

// Mount the enrollment form
yuno.mountEnrollment({
  customerSession, // Received from your server
  countryCode: "US",
  language: "en",
  showLoading: true,
  onLoading: (args) => {
    console.log(args);
  },
});
To verify cards (zero-value authorization) before enrollment, add the verify struct when defining the payment method object on the server.

​
Step 4: Mount the enrollment

Use yuno.mountEnrollment with the parameters below.
ParameterDescription
customerSessionRefers to the current enrollment’s customer session. Example: e15648b0-fcd5-4799-a14c-cc463ae8a133.
countryCodeCountry for the payment process. Use an ENUM value; see Country Coverage.
languageLanguage for payment forms. Use any code listed in Supported languages. Example: en-US. Defaults to browser language when available.
showLoadingControls visibility of the Yuno loading/spinner page during the payment process.
onLoadingRequired to receive notifications about server calls or loading events.
elementSelectorHTML element where the Yuno SDK is mounted.
cardDefine specific settings for the credit card form.
yunoEnrollmentStatusCallback after enrollment ends; receives vaultedToken and status. Status options: CREATED, EXPIRED, REJECTED, READY_TO_ENROLL, ENROLL_IN_PROCESS, UNENROLL_IN_PROCESS, ENROLLED, DECLINED, CANCELED, ERROR, UNENROLLED.
issuersFormEnableEnable the issuer’s form (bank list).
textsCustom text for payment form buttons to match your application’s language or branding.
card.isCreditCardProcessingOnlyOptional. Forces card transactions to process as credit only—useful where cards act as both credit and debit.
The next code block presents an example of the Enrollment parameter configuration and mounting. 
yuno.mountEnrollment({
  customerSession: 'e15648b0-fcd5-4799-a14c-cc463ae8a133',
  /**
   * The complete list of country codes is available on /docs/sdks/resources/country-coverage
   */
  countryCode: country,
  /**
  - Language for payment forms (see Supported languages)
  - Defaults to browser language when available
  */
  language: 'en-US',
  /**
   * Hide or show the Yuno loading/spinner page
   * Default is true
   * @optional
   */
  showLoading: true,
  /**
   * Required if you'd like to be informed if there is a server call
   * @param { isLoading: boolean, type: 'DOCUMENT' | 'ONE_TIME_TOKEN'  } data
   * @optional
   */
  onLoading: (args) => {
    console.log(args);
  }
  /**
   *  API card
   *  @optional
   */
  card: {
    /**
     * Mode render card can be step or extends
     * Default extends
     */
    type: "extends",
    /**
     * Write custom CSS to style the card form. Your CSS will be injected into the iframe.
     * Example:
     * `@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');
     *  .Yuno-front-side-card__name-label {
     *    color: red !important;
     *    font-family: 'Luckiest Guy' !important;
     *   }`
     */
    styles: '',
    /**
     * Show checkbox for save/enroll card
     * Default is false
     */
    cardSaveEnable: false,
    /**
     * Custom texts in Card forms buttons
     * Example:
     *
     *  texts: {
     *    cardForm?: {
     *      enrollmentSubmitButton?: string;
     *       paymentSubmitButton?: string;
     *     }
     *     cardStepper?: {
     *       numberCardStep?: {
     *         nextButton?: string;
     *       },
     *       cardHolderNameStep?: {
     *         prevButton?: string;
     *         nextButton?: string;
     *       },
     *       expirationDateStep?: {
     *         prevButton?: string;
     *         nextButton?: string;
     *       },
     *       cvvStep?: {
     *         prevButton?: string;
     *         nextButton?: string;
     *       }
     *     }
     *  }
     */
    texts: {},
    /**
     * Hide or show the document fields into card form
     * Default is true
     * @optional
     */
    documentEnable: true,
  },
  /**
   * Call back is called with the following object
   * @param {{
   *  status: 'CREATED'
   *    | 'EXPIRED',
   *    | 'REJECTED',
   *    | 'READY_TO_ENROLL',
   *    | 'ENROLL_IN_PROCESS',
   *    | 'UNENROLL_IN_PROCESS',
   *    | 'ENROLLED',
   *    | 'DECLINED',
   *    | 'CANCELED',
   *    | 'ERROR',
   *    | 'UNENROLLED',
   *  vaultedToken: string,
   * }}
   */
  yunoEnrollmentStatus: ({ status, vaultedToken}) => {
    console.log('status', { status, vaultedToken})
  },
  /**
   * If this is called the SDK should be mounted again
   * @param { error: 'CANCELED_BY_USER' | any }
   * @optional
   */
  yunoError: (error) => {
    console.log('There was an error', error)
  },
});

​
Common reference

For full parameter and customization details, see the Web SDK Common Reference.