Lite SDK (Payment Flutter)

This page outlines the steps to integrate the Lite Flutter SDK payment functionalities into your project. Follow these instructions to add, configure, and use the Yuno Flutter SDK.

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 a Public Key

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

await Yuno.init(
  apiKey: 'your_api_key_here',
  countryCode: 'your_country_code',  // The complete 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: Start Payment Lite

After setting up the SDK, use the Yuno.startPaymentLite method to initiate the payment process with the selected parameters, as shown in the following code snippet:

import 'package:yuno/yuno.dart';

void initiatePayment() async {
  // Define the payment method with required values
  final methodSelected = MethodSelected(
    vaultedToken: 'your_vaulted_token',       // The token for the selected payment method
    paymentMethodType: 'your_payment_method', // The type of payment method (e.g., 'credit_card')
  );

  // Start the payment process
  await Yuno.startPaymentLite(
    arguments: StartPayment(
      checkoutSession: 'your_checkout_session_id', // Current payment's checkout session
      showPaymentStatus: true,                     // Set to true to display payment status
      methodSelected: methodSelected,              // Payment method selection
    ),
    countryCode: 'your_country_code',              // Customer's country code
  );
}

The functions used in Yuno.startPaymentLite are described in the table below.

By using the methodSelected parameter, the merchant specifies the payment method chosen by the customer.

Step 4: Retrieve the One Time Token (OTT)

Use the YunoPaymentListener widget to listen for updates in the payment process and retrieve the One Time Token (OTT) after the customer has entered their information.

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(),
)

Step 5: Create the Payment

Once you have obtained the One-Time Token (OTT), create the payment using the Create Payment endpoint, using both the OTT and the checkout session.

Some asynchronous payment methods require additional customer actions after the payment initiation. The response from the Create Payment endpoint will indicate this with the sdk_action_required attribute, which will be set to true if further action is needed. When this occurs, you can use the Yuno.continuePayment() function to guide the customer through the necessary steps:

Yuno.continuePayment(showPaymentStatus: true)

The Yuno.continuePayment(showPaymentStatus: true) method does not return any data. It displays additional screens in the mobile app where the customer can complete the required actions. If sdk_action_required is false, this step is not necessary, and you can proceed without calling continuePayment.

Callback

After the payment is completed, the SDK can return different transaction states. The descriptions of each transaction state is presented in the table below.

Complementary Features

The SDK offers additional features to enhance customer experience, including appearance customization, payment status updates, and 3DS integration. Refer to the SDK Customizations page for more details.