With Yuno Full SDK, you can seamlessly integrate Yuno into your system. This approach simplifies integration, maintenance, and operations without requiring additional compliance work.

Key features

  • User experience: Yuno manages the entire checkout process.
  • Customization: Configure payment methods and UI elements directly from Yuno's dashboard.
  • Flexibility: Add new payment methods and features without extra development.
  • Single integration: Support multiple payment methods through a single implementation, regardless of the customer's chosen method.

What you can do with the full SDK

  1. Process payments seamlessly.
  2. Enroll a credit card while processing a payment.
  3. Use a vaulted token from an enrolled payment method.

Follow the step-by-step guides below to integrate the full SDK:

Payment workflow

The Full SDK provides a unified payment experience, allowing customers to complete transactions using multiple payment methods within a single integration. The diagram below illustrates the complete process:

Step 1: Create a customer

If your system does not already have a customer_id, you must create one to associate payment methods with the customer.

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

Note: Skipping the customer session simplifies integration but removes features that enhance conversion rates by reducing checkout friction.

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

Each payment requires a new checkout session, which grants access to all available payment methods for a specific customer.

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

The Full SDK displays all available payment methods and collects additional customer details if required.

To initialize the SDK:

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

During this process, the SDK may collect customer details such as card information, email, phone number, or document ID.

After a successful initialization, the SDK returns a one-time token (OTT) via the yunoCreatePayment() callback function.

For platform-specific SDK setup, refer to:

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.

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 5: Continue payment (if needed)

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

Yuno recommends implementing continuePayment() since some asynchronous payment methods require customer actions to finalize the transaction.

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 recommends configuring webhooks in your dashboard. Webhooks ensure your system remains updated with payment statuses in real-time, removing the need for manual status checks.

Payment workflow using a vaulted token

If a customer has an enrolled payment method, they can use a vaulted token from the enrollment process to complete transactions without entering payment details again.

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. Retrieve payment status.
  6. Receive payment result via webhook.

For these steps, follow the guidelines in 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:

  • Via API: Set vault_on_success = 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.
  • Via SDK settings: 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.

You should only use one option to enroll a card.

To enroll alternative payment methods, you have to use the Lite SDK.

After enrolling 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.

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.