The Tonder Flutter SDK Full is a solution for integrating our system into your mobile application. This solution ensures PCI DSS (Payment Card Industry Data Security Standard) by securely collecting and tokenizing sensitive data in the browser, without exposing your front-end infrastructure to any sensitive data.

Integrating Tonder is made effortless with our Full SDK. Our SDK offers complete checkout and enrollment flows, making integration, maintenance, and operational efforts minimal.

This guide will walk you through all the steps, from installation and configuring our SDK to fit your application.

​
Installation

Tonder’s Flutter SDK Full can be installed using the following command:

flutter pub get full_sdk

​
Requirements

You need to add the following code blocks to android.build.gradle and android.gradle.properties to be able to use the SDK:

  • Add to android.build.gradle:
maven {
    url 'https://maven.pkg.github.com/skyflowapi/skyflow-android-sdk'
    credentials {
        username = 'username'
        password = 'password'
    }
}
  • Add to android.gradle.properties:
android.useAndroidX=true

​
Configuration

With Tonder’s SDK installed, and requirements met, you are ready to configure and use the SDK. The following step-by-step process takes you through everything, from starting a new instance, to performing a new transaction using the needed methods:

1

Initialize Tonder's SDK Instance

First, remove any existing checkout instances to avoid duplicates:

if (_fullPlugin != null) _fullPlugin!.removeCheckout();

Now, initialize Tonder’s Flutter SDK Full instance with the following parameters:

Field NameDescription
platformsA list or null that specifies which platforms the checkout is available on. If null, it implies universal compatibility.
apiKeyTonderYour Tonder API key. You can find it in your Tonder dashboard.
returnUrlThe URL to which the user will be redirected after the transaction is completed.
renderPaymentButtonA boolean that specifies whether a payment button should be rendered by the checkout plugin. Setting this to false implies that the button rendering is handled elsewhere or not needed.
const apiKey = "00d17d61e9240c6e0611fbdb1558e636ed6389db";
const returnUrl = "http://localhost:8100/tabs/tab2";

_fullPlugin = InlineCheckout(
  platforms: null, // Specify platforms if needed
  apiKeyTonder: apiKey,
  returnUrl: returnUrl,
  renderPaymentButton: false, // Set to true if a payment button should be rendered
);

Ensure all API keys and sensitive data are secured and not hardcoded in production applications. Use environment variables or a secure way to load such configurations.

2

Set Payment Data

Set the payment data on the checkout instance using the customer and cart data you collected from the customer:

_fullPlugin!.setPaymentData(customerData);
_fullPlugin!.setCartTotal(250); // Reset or update the cart total if necessary
_fullPlugin!.setCustomerEmail("mail@gmail.com");

Below you find an example of the data needed in the customerData parameter:

3

Launch the Checkout Interface

Use the injectCheckout to inject Tonder’s checkout into the current widget tree:

await _fullPlugin!.injectCheckout();
4

Add 3DS verification

Use Tonder’s SDK verify3dsTransaction() method to validate if the 3DS challenge was successful or not. Use the example below to call the method and handle the response as needed:

void verify3dsTransaction() async {
  try {
    final response = await inlineCheckout.verify3dsTransaction();
    print('Verify 3ds response: $response');

    if (response.transaction_status == 'Success') {
      print('3DS Transaction verified.');
      // Proceed with normal payment flow
    } else if (response.transaction_status == 'Failed') {
      print('3DS Transaction Failed');
    }
  } catch (error) {
    print('Error verifying 3DS transaction: $error');
  }
}
5

Display the Checkout UI

Use a Scaffold widget to contain and display the checkout interface:

Scaffold(
    body: SizedBox(
      height: 1200,
      child: _fullPlugin?.cardTemplate ?? Text("Loading card template"),
    ),
);
6

Update the application

Update the state to reflect the changes:

setState(() {});
Flutter SDK LiteOverview