Full SDK (Flutter)

This page provides a step-by-step guide to integrating the Full Flutter SDK functionalities into your application.

Step 1: Add the SDK Dependency

To add the Yuno SDK to your Flutter project, run the following command:

dart pub add yuno

Step 2: Initialize the SDK with the Public Key

Create an instance of Yuno.init by providing a valid PUBLIC_API_KEY. Refer to the Yuno documentation for details on obtaining API credentials.

await Yuno.init(
  apiKey: 'your_api_key_here',
  countryCode: 'your_country_code',  // Full list of country codes is available at https://docs.y.uno/docs/country-coverage-yuno-sdk
  yunoConfig: YunoConfig(
    lang: YunoLanguage.en, // Supported languages: ENGLISH, SPANISH, PORTUGUESE, MALAY, INDONESIAN, THAI
    cardflow: CardFlow.multiStep, // Default card flow
    saveCardEnable: true, // Default save card option
    keepLoader: true, // Default keep loader option
  ),
  iosConfig: IosConfig(), // Optional, can use default value
);

Below is a table describing the parameters required for initializing the Yuno SDK in your Flutter application. These settings allow you to customize the SDK behavior to align with your application needs:

Step 3: Add the SDK Widget View

After initializing the SDK, implement the YunoPaymentMethods widget in your view to display available payment methods. Use the code below to add it to your layout.

YunoPaymentMethods(
  config: PaymentMethodConf(
    checkoutSession: 'your_checkout_session_id',
    countryCode: 'your_country_code',
    // Add additional configuration options as needed
  ),
  listener: (context, isSelected) {
    if (isSelected) {
      print('A payment method has been selected');
    } else {
      print('No payment method is currently selected');
    }
  },
)

The functions used in YunoPaymentMethods are described in the table below.

By using the listener callback, the merchant is notified as soon as a customer selects a payment method. This allows the merchant to initiate the payment process immediately upon selection, improving the user experience.

Step 4: Initiate the Payment Process

Once a payment method is selected, initiate the payment by calling the Yuno.startPayment method.

The isSelected variable indicates when the merchant has selected a payment option. This variable name, isSelected, is customizable by the merchant.

With isSelected set to true, proceed with the Yuno.startPayment method to initiate the payment process.

Yuno.startPayment(bool showPaymentStatus)

Step 5: Retrieve the One Time Token (OTT)

The YunoPaymentListener widget listens for updates in the payment process, specifically to retrieve a One-Time Token (OTT) once the customer has completed entering the required information. The OTT is used to initiate the payment.

YunoPaymentListener(
  listener: (state) {
    // Handle [state] - it is YunoState with [String token] and [PaymentStatus status]
    // - [token]: One Time Token
    // - [paymentStatus]: [reject, success, fail, processing, internalError, cancelByUser]
  },
  child: SomeWidget(),
)

Once you have the OTT, the next step is to create the payment. This process must be handled on the backend by calling Yuno's Create Payment endpoint. The merchant should call their backend to initiate the payment within Yuno, passing both the OTT and the checkout session to complete the payment process.

Step 6: Create the Payment

Once you have the OTT (One-Time Token), initiate the payment within Yuno by using the Create Payment endpoint, leveraging both the OTT and the checkout session.

After the payment is created, some asynchronous payment methods may require additional customer action. In such cases, the Create Payment endpoint will indicate this requirement through the sdk_action_required field in the response, which will be set to true. When this occurs, you should call the Yuno.continuePayment() function in your mobile app to display the necessary screens for the customer, where they can complete the required steps for the payment.

If sdk_action_required is false, there is no need to call continuePayment, and you can proceed without it.

Yuno.continuePayment(bool showPaymentStatus)

Callback

After the payment is completed, the SDK can return different transaction states. The table below describes each transaction state.

Additional Features

• Continue Payment: Use continuePayment to handle asynchronous payment steps if required.
• Customizations: Configure SDK appearance, update payment status, or integrate 3DS into your flow.

For a full implementation example, refer to the Demo App on GitHub.