Headless SDK (Enrollment Web)

Yuno's Headless SDK lets you enroll in payment methods and tokenize cards, saving them for future usage. Yuno recommends using one of the other SDK implementations, such as Full, Lite, or Secure Fields, for a more frictionless integration.

The following steps describe creating a payment using Yuno's Headless SDK.

Requirements

To execute the enrollment process, you need to provide the customer_session to start the enrollment process in Step 3. To acquire the customer_session, you need to:

Create a customer: A customer is required to enroll in payments. 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.
Create the customer session: Use the customer id and the Create Customer Session endpoint to receive the customer_session.

Step 1: Include the library in your project.

The first step is to include the Yuno SDK script in your webpage before closing the <body> tag. See the example below:

<script src="https://sdk-web.y.uno/v1/static/js/main.min.js"></script>

Typescript library

If you are using Typescript, Yuno provides a library that you can use to see all available methods available in the Yuno Web SDK.

Step 2: Initialize Headless SDK with the public key

In your JavaScript application, create an instance of the Yuno class by providing a valid PUBLIC_API_KEY. If you don't have your API credentials, access the Developers (Credentials) page to check how to retrieve them from the dashboard.

The code block below presents an example of initializing the Yuno class and assigning it to the yunoconstant.

const yuno = Yuno.initialize(PUBLIC_API_KEY)

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. You need a customer to enroll payments with. 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: Create an enrollment payment method object

You need an enrollment payment method object to set Headless SDK integration for enrollment. You can create one using the Enroll Payment Method endpoint. While creating the payment method object, you need to define which payment method your customer can enroll in. Currently, only CARD is available for Headless SDK.

Verify card

If you want to verify cards (zero value authorization) before enrollment, you need to provide the verify object when creating the payment method object for the customer session.

Step 5: Start the enrollment process

Next, you will start the checkout process using the apiClientEnroll function, providing the necessary configuration parameters. The following table lists all required parameters and their descriptions.

Parameter	Description
`country_code`	This parameter determines the country for which the payment process is being configured. The complete list of supported countries and their `country_code` is available on the Country coverage page.
`customer_session`	Refers to the current enrollment's customer session received as a response to the Create Customer Session endpoint. `Example: '438413b7-4921-41e4-b8f3-28a5a0141638'`

The next code block presents an example of the parameter configuration.

const apiClientEnroll = yuno.apiClientEnroll({
  /**
     * country can be one of the following: https://docs.y.uno/docs/country-coverage-yuno-sdk
     */
    country_code: "CO",
     /**
     * The customer_session created in https://docs.y.uno/reference/create-customer-session
     */
    customer_session: "eec6578e-ac2f-40a0-8065-25b5957f6dd3"
  })

Step 6: Generate a vaulted token

After collecting all user information, you can start the enrollment. First, you need to create a vaulted_token using the function apiClientEnroll.continueEnrollment. As it is an asynchronous function, you can use try/catch to ensure you will correctly handle triggered errors. Below, you will find an example of creating a vaulted_token:

/**
* Create Token
* This will trigger an error if there is missing data
* You can catch it using a try/catch
*/
const vaultedTokenResponse = await apiClientEnroll.continueEnrollment({
   /**
    * @optional
    * The customer_session created in https://docs.y.uno/reference/create-customer-session
    */
   customer_session:"eec6578e-ac2f-40a0-8065-25b5957f6dd3",
   /**
    * The necessary info to use the payment method structure
    */
   payment_method: {
         type: "CARD",
         card: {
             detail: {
                 expiration_month: 11,
                 expiration_year: 25,
                 number: "4111111111111111",
                 security_code: "123",
                 holder_name: "ANDREA B",
                 type: 'DEBIT' or 'CREDIT'
             }
         },
        /**
         * @optional
         * customer information
         */
         customer: {
        // Add the complete customer object here.
        // You can check the object here: https://docs.y.uno/reference/the-customer-object
        // You create the customer using the following endpoint: https://docs.y.uno/reference/create-customer
        }
     }
 })

PCI Compliance

Please bear in mind that you are capturing sensitive card data. Therefore, you need to comply with good practices regarding data management. If you don't have a PCI certification, you can't save any card data other than the token provided by the SDK.

After enrolling the new card, you will receive the vaulted_token, which you can use to make payments in the future without asking for your customer's card information. The following code block presents an example of a response from the apiClientEnroll.continueEnrollment function.

{
 vaulted_token: "9104911d-5df9-429e-8488-ad41abea1a4b",
 customer: {
   session: "eec6578e-ac2f-40a0-8065-25b5957f6dd3"
 },
 status: "ENROLLED" 
 
 /**List of possible statuses:
 * CREATED,
 * EXPIRED,
 * REJECTED,
 * READY_TO_ENROLL,
 * ENROLL_IN_PROCESS,
 * UNENROLL_IN_PROCESS,
 * IN_PROCESS,
 * ENROLLED,
 * DECLINED,
 * CANCELED,
 * ERROR,
 * UNENROLLED;
 */

}

Demo App

In addition to the code examples provided, you can access the Demo App for a complete implementation of Yuno SDKs.