Lite SDK (Payment)

The Lite SDK provides full control over your payment experience. Unlike the Full SDK, this version allows you to query available payment methods and decide which to display at checkout. After the customer selects a payment method, the payment process follows the same steps as the Full SDK.

Additionally, the Lite SDK supports enrolling payment methods for future use. For more details, see Lite SDK (Enrollment).

With the Lite SDK, you can:

• Execute the payment process
• Enroll a credit card while making a payment
• Use a vaulted token from an enrolled payment method to complete a transaction

Use the following guides to implement each process:

Payment workflow

The diagram below illustrates the complete payment workflow:

Step 1: Create a customer (optional)

If you want to associate a customer with stored payment methods, start by creating a customer profile.

• Use the Create customer endpoint to generate a new customer id.
• If a customer session is not used, payments will proceed without stored user data (e.g., pre-filled fields or saved payment methods).

You can skip this step if you already have a customer id or prefer to omit it entirely.

Note:
Skipping the customer session simplifies integration but removes features that enhance the user experience and improve conversion rates.

Step 2: Create a checkout session

Next, create a checkout session. You must create a new checkout session for every new payment. This session provides access to all available payment methods (previously enrolled or not) for a specific customer.

Use the Create checkout session endpoint and provide the customer id to get a new checkout_session.

Step 3: Display payment methods

Query the available payment methods using the Retrieve payment methods endpoint using the checkout_session. Show these methods to the customer so they can select their preferred payment method to execute the payment.

Step 4: Implement the SDK and retrieve a one-time token

After the customer selects a payment method, initialize the Lite SDK to retrieve a one-time token (OTT) before creating the payment.

To initialize the Lite SDK, follow these steps:

1. Include the SDK library in your project
2. Initialize it with your API credentials and checkout_session
3. Start the checkout process by calling yuno.startCheckout() with your configuration
4. Display the checkout interface in a browser or mobile app
5. Add a payment button that calls yuno.startPayment() when clicked

The SDK may also collect customer details (e.g., card information, email, phone number, document ID) required by the provider.

Once initialized, the SDK returns a one-time token (OTT) via the yunoCreatePayment() callback function.

For platform-specific setup, refer to:

Step 5: Create the payment

With the one-time token (OTT), create the payment. This process includes:

• Customer information
• Total amount and currency
• Product details
• Shipping information

Use the Create payment endpoint, passing the one_time_token.

The API response includes sdk_action_required, which determines if additional steps are necessary:

• Synchronous payment: If sdk_action_required is false, the payment is complete.
• Asynchronous payment: If sdk_action_required is true, additional customer action is required - call continuePayment() to complete the transaction and follow the instructions in Step 6.

Step 6: Continue payment (if needed)

If sdk_action_required is true, call continuePayment() to display additional screens or steps for the customer.

Yuno recommends you incorporate the continuePayment() method because some asynchronous payment methods demand additional action from the customer for completion.

Step 7: Get payment status

Call the yunoPaymentResult() function to obtain the payment status. Based on the status, you can show your customer the corresponding screen depending on the final result of the payment.

Step 8: Receive payment result through webhook

Yuno also recommends configuring Webhooks in your dashboard. Webhooks are the best way to ensure your system is up-to-date with payment progress and status. Since the event notifications trigger automatically, your system won't need to perform recurrent requests to Yuno.

Payment workflow using a vaulted token

If your customer has enrolled in one of the available payment methods, the payment can be made back to back using the Vaulted token from the enrollment process. With this approach, you don't need to request additional information about the payment method.

The following image describes the complete workflow:

Different from the Payment workflow, for payments using the vaulted token, you'll use information from an existing customer who previously enrolled in the payment method.

This workflow follows the same steps as the Payment workflow, but instead of collecting new payment details, the SDK retrieves the stored vaulted token:

1. Create a checkout session.
2. Implement the SDK and retrieve a one-time token, using the vaulted token.
3. Create the payment.
4. Continue payment (if needed).
5. Get payment status.
6. Receive payment result through webhook.

For these steps, follow the guidelines in the Payment workflow.

Enroll a credit card while paying

With the Lite SDK, you can save credit or debit cards for future purchases within the same payment request, without additional enrollment integration.

How to obtain a vaulted token

You can retrieve a vaulted token in two ways:

• Via API: Set vault_on_success = true when using the Create payment endpoint. The response will return the vaulted_token for the customer's card.
• Via SDK settings: Enable cardSaveEnable = true in the SDK settings for Web, iOS, Android, or Flutter. The SDK will display a checkbox allowing users to save their card.

Use only one method to enroll a card. To enroll alternative payment methods, see the Lite SDK (Enrollment) page.

After enrolling in a payment method, you can use the vaulted token to perform payments. To access information about the payment methods enrolled by each user, you can use one of the following endpoints:

• Get payment methods by checkout session.
• Get payment methods by customer.