Lite SDK (Payment)

With the Lite version of the Yuno SDK, you have full control of your payment experience. Unlike the Full SDK, this version lets you check available payment methods and decide which to show during checkout. After your customer selects a payment method, the process is the same for both Lite and Full SDKs.

The Lite SDK also allows you to enroll payment methods for future use. Access Lite SDK (enrollment) for more information. This page covers the payment operation.

When using the Lite SDK, you can execute the payment process, enroll a credit card while making a payment, or use a vaulted token from an enrolled payment method to execute the payment. Use the following buttons to check the guides on executing each process.

Payment workflow

The following image describes the complete payment workflow. Below, each step is described in detail.

Step 1: Create a customer

First, create a customer. After you create a customer, you can associate payment methods to their account. You can skip this step if you already have a customer ID received from a previous customer creation.

Use the Create Customer endpoint to create new customers and get a customer id. The customer id will be used in the following steps.

Step 2: Create a checkout session

Next, create a checkout session. You have to 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 get a One-Time Token

After the customer selects the payment method, you have to initialize the Lite SDK to get a One-Time Token before creating the payment.

To initialize Yuno's Lite SDK, you have to provide your API credentials and the checkout_session. Follow these steps to complete the process:

1. Include the library in your project.
2. Initialize the SDK with the public key.
3. Start the checkout process by calling yuno.startCheckout() with your configuration.
4. Mount the SDK to display the checkout to your users on a browser or mobile.
5. Create a payment button in your front end. When clicked, call yuno.startPayment() to start the payment process.

The SDK may collect additional payment information, like card or customer information (email, phone number, document, etc.) required by the provider. After completing this process, the SDK provides a One-Time Token in the yunoCreatePayment() callback function.

For more information on how to initiate Yuno's SDK, refer to one of the following pages according to the corresponding platform:

Step 5: Create the payment

With the One-Time Token, create the payment. This process gathers all order details, including customer specifics, total amount, currency, products, and shipping details. Use the Create Payment endpoint, informing the one_time_token.

The response from Create Payment will include the sdk_action_required, which defines if additional actions are required based on the payment type:

• Synchronous Payment: If sdk_action_required is false, the payment is complete.
• Asynchronous Payment: If sdk_action_required is true, additional actions are required to complete the payment. Use the continuePayment function to complete the payment. See 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. The following steps describe the complete workflow:

1. Create checkout session.
2. Implement the SDK and get a One-Time Token. When mounting the SDK, you will inform the vaulted token from the enrolled payment method.
3. Create the payment.
4. Continue payment (if needed).
5. Get payment status
6. Receive payment result through webhook

For the above steps, you should follow the recommendations for the Payment workflow.

Enroll a credit card while paying

With the Lite SDK, you can save credit/debit cards for future purchases with the same payment request without the enrollment integration. You can obtain the vaulted token in two ways:

• Set vault_on_sucess = true when using the Create Payment endpoint. You will receive the vaulted_token that corresponds to the card used by the customer payer in the response.
• Set cardSaveEnable = true in the SDK complementary features (Web, iOS, Android, and Flutter). The SDK will display a checkbox for users to select if they want to save the card for future purchases. If the user checks the box, you will receive the vaulted_token.

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.