Flutter
KnotAPI Flutter SDK
Reference for integrating with the KnotAPI Card Switcher Flutter SDK
Overview
KnotAPI for Flutter is an embeddable framework that is bundled and distributed with your application used to create an easy and accessible experience for your customers to update their old saved cards across the web to your new card.
Screenshots
Install Flutter SDK
In your Flutter project directory:
flutter pub add knotapi_flutter
Import SDK
To open the Card on File Switcher first you must import the SDK
Import knotapi
import 'package:knotapi_flutter/knotapi_flutter.dart';
import 'package:knotapi_flutter/knotapi_configuration.dart';
Create a session
Then, create a session and obtain the session ID
. We recommend, saving this session ID for future debugging, logging, and connecting.
Open Card On File Switcher
To open the Card on File Switcher, you can use the following:
_knotapiFlutterPlugin.openCardOnFileSwitcher(KnotConfiguration(
sessionId: SESSION_ID,
clientId: CLIENT_ID,
environment: ENVIRONMENT
));
Open with specific merchants
To open the Card on File Switcher with specific merchants, first contact [email protected] to receive the list of merchantIds and names. Pass in the ids or merchant names in the session instance as an array of numbers or strings.
_knotapiFlutterPlugin.openCardOnFileSwitcher(KnotConfiguration(
sessionId: SESSION_ID,
clientId: CLIENT_ID,
environment: ENVIRONMENT,
merchantIds: [44, 16],
merchantNames: ["Netflix", "Amazon"]
));
Environment
Development
Development is one of the KnotAPI environments on which you can run your code, Development is a test environment in which no real data can be used.
Test Credentials
To test a merchant you can use the login:
username/email: user_good
password: pass_good
Completing the switch
Before showing success in the SDK, Knot expects to receive card details. On the server side, listen for theAUTHENTICATED
webhook before sending the card. You can enter your webhook on the dashboard here. Alternatively, in development only, you can mock the endpoint without using a webhook.
Events
import 'dart:async';
import 'package:knotapi_flutter/events.dart';
onSuccess
The closure is called when a user successfully update payment info in one account. It should take a single argument, containing the Merchant name String .
StreamSubscription<KnotSuccess>? _streamSuccess;
void initState() {
super.initState();
_streamSuccess = KnotapiFlutter.onSuccess.listen(_onSuccess);
}
void _onSuccess (KnotSuccess event) {
String eventName = event.eventName;
String type = event.type;
String merchant = event.merchant;
print("eventName: $eventName, type: $type, merchant: $merchant");
}
onError
This closure is called when an error occurs during Account updater initialization or one of the account has an issue when updating payment info. It should take a two String arguments errorCode and errorMessage.
StreamSubscription<KnotError>? _streamError;
void initState() {
super.initState();
_streamError = KnotapiFlutter.onError.listen(_onError);
}
void _onError (KnotError event) {
String eventName = event.eventName;
String type = event.type;
String message = event.message;
print("eventName: $eventName, type: $type, message: $message");
}
onExit
This optional closure is called when a user exits Account updater without successfully updating all selected merchants, or when an unhandled error occurs during Account updater initialization or one of the account has an issue when updating payment info.
StreamSubscription<KnotExit>? _streamExit;
void initState() {
super.initState();
_streamExit = KnotapiFlutter.onExit.listen(_onExit);
}
void _onExit (KnotExit event) {
String eventName = event.eventName;
String type = event.type;
print("eventName: $eventName, type: $type");
}
onEvent
This closure is called when certain events in the Account updater flow have occurred, for example, when the user start updating payment info of an account. This enables your application to gain further insight into what is going on as the user goes through the Account Updater flow. It should take a two String arguments eventName and merchantName.
StreamSubscription<KnotEvent>? _streamEvent;
void initState() {
super.initState();
_streamEvent = KnotapiFlutter.onEvent.listen(_onEvent);
}
void _onEvent (KnotEvent event) {
String eventName = event.eventName;
String type = event.type;
String name = event.event;
print("eventName: $eventName, type: $type, event: $name");
}
Events
login started
When the Account Updater starts login in an account.
login success
When the Account Updater successfully login in an account.
require otp
When the Account Updater requires the user to enter an OTP.
card error
When the Account Updater encounters an error related the card info when updating the card.
Updated 29 days ago