Full SDK

With Yuno Full SDK, you can easily integrate Yuno into your system. This integration approach reduces the effort needed for integration, maintenance, and operations without requiring compliance work.

The Full SDK has the following characteristics:

• User Experience: Yuno handles the user experience.
• Customization: Customize the checkout and payment methods from Yuno's dashboard.
• Flexibility: Easily add new payment methods and features without writing more code.
• Single Integration: Manage all payment methods with one integration. Yuno takes care of every scenario for your customers regardless of their chosen payment method.

When using the Full 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 of these processes.

Payment workflow

The Full SDK streamlines the payment process, rendering all available payment methods with a single integration. 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: Implement the SDK and get a One-Time Token

The Full SDK will show the customer all available payment methods, including previously enrolled payment methods. If necessary, the customer will be asked to provide additional information to make the payment. For this process to happen, you need to initialize the Full SDK.

To initialize Yuno's Full 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. At this step, you need to configure the callback function used by yunoCreatePayment() to inform the One-Time Token.
4. Display the checkout to your users on a browser or mobile. At this step, your customer will select the payment method.
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 4: 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 in the payment_method.token attribute.

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 5.

Step 5: 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 6: 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 7: 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 Full 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.