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.