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.
You're responsible for displaying the payment methods and capturing the customer's selection when using the Lite SDK.
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:
- Include the library in your project.
- Initialize the SDK with the public key.
- Start the checkout process by calling
yuno.startCheckout()
with your configuration. - Mount the SDK to display the checkout to your users on a browser or mobile.
- 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
isfalse
, the payment is complete. - Asynchronous Payment: If
sdk_action_required
istrue
, additional actions are required to complete the payment. Use thecontinuePayment
function to complete the payment. See the instructions in Step 6.
Status
During integration, use the payment status
and sub_status
as your primary reference for the payment's state. Since a payment might have multiple associated transactions, concentrating on the payment status
/sub_status
ensures you're informed of the most recent state. This provides a clear basis for decision-making regardless of the number of transactions involved.
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:
- Create checkout session.
- Implement the SDK and get a One-Time Token. When mounting the SDK, you will inform the vaulted token from the enrolled payment method.
- Create the payment.
- Continue payment (if needed).
- Get payment status
- 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 thevaulted_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 thevaulted_token
.
You should only use one option 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:
Using a vaulted token
Even if the user selects an enrolled payment method, Yuno recommends using the SDK to tokenize the information instead of directly using the vaulted token with Yuno's API. This approach provides several benefits:
- Support 3DS: Enhanced security for online payments.
- Fraud Screening: Better protection against fraudulent transactions.
- Collect Required Information: Gather additional fields required by the provider if necessary.
To implement this, send the vaultedToken
when mounting the SDK. The SDK will handle the rest. If the payment method requires an extra step (such as a 3DS challenge), use the yuno.continuePayment()
method. This method handles any required redirections and works for both enrolled and regular payment methods that need additional customer actions.
Updated 29 days ago