Full SDK (Flutter)
This page provides a step-by-step guide to integrating the Full Flutter SDK functionalities into your application.
Ensure all required Flutter SDK dependencies are included in your project before following the setup example.
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:
Parameter | Description |
---|---|
apiKey | Your unique public API key for authentication. |
countryCode | The user’s country code. Refer to the Country Coverage page for a complete list of supported country codes. |
yunoConfig | Configures various SDK settings. Contains additional parameters listed below. |
lang | The language for SDK content. Supported options include: en - English es - Spanish pt - Portuguese ms - Malay id - Indonesian th - Thai |
cardflow | Defines the card flow type for the payment process. The default is CardFlow.multiStep . |
saveCardEnable | Specifies whether to enable the "Save Card" option. Defaults to true . |
keepLoader | Controls whether to keep the loader visible. Defaults to true . |
iosConfig | Optional iOS-specific configurations. If omitted, the default configuration is used. |
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.
Function | Description |
---|---|
config | An instance of PaymentMethodConf that configures the payment method list based on session and locale. Key properties include: - checkoutSession : Unique identifier for the current checkout session.- countryCode : User’s country code for displaying relevant payment methods. |
listener | Triggered when the payment method selection state changes. Parameters: - context : Allows interactions with other UI elements or navigation.- isSelected : Boolean indicating whether a payment method is selected (true ) or not (false ). |
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.
Ensure that your backend is set up to handle this call to Yuno’s Create Payment endpoint for successful payment processing.
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.
Transaction State | Description |
---|---|
success | Indicates that the transaction or payment process has been completed successfully. |
fail | Indicates that the transaction or payment process has failed. This means there was an error or issue during the payment process, preventing it from being completed successfully. |
processing | Indicates that the transaction or payment process is currently being processed. This state is typically used when there is a delay in processing the payment, such as waiting for approval from a third-party service or financial institution. |
reject | Indicates that the transaction has been rejected. This rejection can occur for various reasons, such as insufficient funds, fraudulent activity, or a request that violates specific rules or policies. |
internalError | Suggests that an unexpected error occurred within the system or infrastructure handling the payment process. This indicates a problem on the server or backend side rather than an issue with the user's input or request. |
userCancell | Indicates that the user has voluntarily canceled or aborted the transaction or payment process. This state is typically used when there is an option for the user to cancel or abandon the payment process. |
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.
Updated 15 days ago