Seamless SDK
Yuno’s Seamless SDK offers a simple and efficient integration while giving you full control over the payment experience. Similar to the Lite SDK, it allows you to query available payment methods and decide which to display during checkout. Once the selection is made, a single API and SDK call completes the payment process, ensuring a seamless end-user experience identical to the Lite SDK.
When using the Seamless 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.
Step 1: Create a customer (Optional)
First, create a customer. After you create a customer, you can associate payment methods to their account. Use the Create Customer endpoint to create new customers and get a customer id
. The customer id
will be used in the following steps.
The parameter customer_session
is optional.
You can skip this step if you have already created a customer and plan to provide the customer id
directly when creating the payment. Alternatively, you may choose to omit this step entirely.
Omit customer session step
When you choose to not use a customer_session
, the payment will be created without a customer id
, leaving it empty when creating the payment. As a result, the process will not use any stored customer date, such as pre-filled form fields or saved payment details.
While skipping the customer session can simplify integration, it removes features designed to streamline the user experience, which can improve conversion rates by reducing friction during checkout.
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, providing 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.
If the customer has previously enrolled payment methods, you'll receive them as well. Use the vaulted_token
for these methods to create the One-Time Token and process the payment.
You are responsible for displaying the payment methods and capturing the customer's selection when using the Seamless SDK.
Step 4: Implement the SDK
After the customer selects the payment method, you only have to initialize the SDK with the checkout information. The SDK will generate the One-Time Token, create the payment, and call on continuePayment()
to display any screens necessary for the user to complete the payment automatically.
To initialize Yuno's Seamless 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 through the yunoCreatePayment()
callback function.
For more information on how to initiate Yuno's SDK, refer to the corresponding platform guide:
Step 5: Get payment status
To get the payment status, call the yunoPaymentResult()
function. Based on the status, you can show your customer the corresponding screen depending on the final result of the payment.
Step 6: 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.
Updated 7 days ago