> ## Documentation Index > Fetch the complete documentation index at: https://docs.knotapi.com/llms.txt > Use this file to discover all available pages before exploring further. # Flutter > Integrate the Knot Flutter SDK into your Flutter application to enable merchant account linking. ## Overview **SDK Updates**\ New versions of the SDK are released frequently, not only to add new features and address issues in the SDK, but also to continuously improve the conversion of merchant login flows. As a result, it is strongly recommended that you frequently update your SDK version across any platforms where you invoke the SDK. The Knot Link SDK provides a seamless way for end users to link their merchant accounts to your app, serving as the foundation for Knot's merchant connectivity platform. It is a client-side integration, consisting of initializing & configuring the SDK and handling events. ## Installation The Knot SDK can be installed using **pub package manager**. ```shell icon="terminal" Shell theme={"system"} flutter pub add knotapi_flutter ``` ### Import the SDK ```dart icon="dart-lang" Dart theme={"system"} import 'package:knotapi_flutter/knotapi_flutter.dart'; import 'package:knotapi_flutter/knotapi_configuration.dart'; ``` ## Initialization Your backend will create a session by calling [Create Session](/api-reference/sessions/create-session) and provide it to your frontend. To start a Knot session, you must first configure the session with a `KnotConfiguration` class. The configuration allows you to set the environment, product type, entry point, and other user experience configurations. It's expected that your integration with Knot will retrieve and pass a new session into the SDK on each initialization. ### Configure the session The `KnotConfiguration` and `CustomerConfiguration` classes are used to initialize the SDK with specific parameters. #### `KnotConfiguration` | Name | Type | Description | | ------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | sessionId | String | The session created by calling `/session/create` in your backend. | | clientId | String | Your organization's client ID. Note that this varies between `development` and `production` environments. | | environment | Environment | The desired environment (`development` or `production`). | | entryPoint | String? | **Optional.** The specific entry point from within the app where you are initializing the Knot SDK (e.g. `onboarding`). | | merchantIds | List\[int]? | **Optional.** A list of merchant ID(s) to display. It is recommended to provide 0 or 1 merchant ID depending on your desired user experience. | | useCategories | Bool? | **Optional.** Whether to display merchant categories and therefore group merchants into categories for discoverability. Default: `true`. | | useSearch | Bool? | **Optional.** Whether to display the search bar, enabling users to search for merchants. Default: `true`. | | domainUrls | List\[String]? | **Optional. Android only.** A set of domains for which Knot should explicitly not clear cookies. | | metadata | Map\ | **Optional.** Custom key-value pairs to include in [webhook](/webhooks#session-metadata) payloads. Maximum 10 keys with string values up to 500 characters each. | | locale | String? | **Optional.** A [BCP-47](https://developer.mozilla.org/en-US/docs/Glossary/BCP_47_language_tag) language tag to set the locale for the SDK. Currently supported: `en-US`, `es-US`, `en-CA`, and `fr-CA`. If not provided, defaults to `en-US`. | | product | Product? | **Optional. Ignored in version 2.0.0+.** The Knot product the session will inherit — the same as the type of session created (e.g. `card_switcher`, `transaction_link`). | #### `CustomerConfiguration` This class is entirely optional and infrequently used, typically only when you offer Knot for multiple, differently-named card programs in the same app. The Knot team will set pre-defined values of your choosing for each parameter that you can then subsequently pass into the SDK. Passing a value that is not pre-defined will result in an `onError` callback. To take advantage of this functionality, please contact the Knot team who will be happy to assist you. | Name | Type | Description | | :----------- | :----- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | cardName | String | **Optional.** The differentiated display name for the card product, used inside the Knot SDK (e.g. `Debit Card`, `Credit Card`). This value will override the default value `card`. | | customerName | String | **Optional.** The differentiated display name for the company, used both as a standalone and prepended to the `cardName` (e.g. `Smart Bank`, `Payment Corp`). This value will override your default customer name value. Only recommended if you issue cards under multiple brands. | | logoId | String | **Optional.** The differentiated logo for the company. This value will override your default logo. | See the following examples for how the parameters are used together in text inside the Knot SDK: `"Your [customerName] [cardName | card] was added."` ```dart icon="dart-lang" Dart theme={"system"} CustomerConfiguration customerConfiguration = CustomerConfiguration( cardName: "Card Name", // Your cardName customerName: "Customer Name", // Your customerName logoId: "LogoId" // Your logoID ); KnotConfiguration( sessionId: "session_12345", // Current session ID clientId: "client_67890", // Your client ID environment: Environment.production, // 'development' | 'production' merchantIds: [52], // Recommend 0 or 1 merchant IDs domainUrls: null, // Explicitly passing null useCategories: true, // Recommend true entryPoint: "onboarding", // Defined by you useSearch: true, // Recommend true customerConfiguration: customerConfiguration, // Optional metadata: { // Optional metadata for webhooks "reference_token": "your-token", "trace_id": "your-trace-id" }, locale: "es-US" // Optional BCP-47 language tag ) ``` ### Open the session To begin the flow, use the `open` method with a `KnotConfiguration` instance. ```dart icon="dart-lang" Dart theme={"system"} final _knot = KnotapiFlutter(); _knot.open(KnotConfiguration( sessionId: "INSERT_SESSION_ID", clientId: "INSERT_CLIENT_ID", environment: Environment.development, // or Environment.production )); ``` To test logging in to a merchant in the SDK, please reference a set of available test credentials for the CardSwitcher product [here](/card-switcher/testing) and the TransactionLink product [here](/transaction-link/testing). ## Single Merchant Flow If you decide to use [List Merchants](/api-reference/merchants/list-merchants) to retrieve a list of merchants, list them in your app, and then open the SDK with a single merchant, you can do so by passing a merchant ID when [configuring the session](/sdk/flutter#configure-the-session) in the `KnotConfiguration`. More in [Retrieving & Listing Merchants](/link/retrieving-and-listing-merchants). The merchant ID is the same across all environments. Although available, it is not recommended that you provide a long list of merchants in order to remove a few, but rather "hide" certain merchants that you desire from your [Customer Dashboard](https://dashboard.knotapi.com). ## Entry Points In your app's user experience, you may choose to integrate Knot in one or multiple places (e.g. from different tabs or screens). How users behave when interacting with Knot from each of these "entry points" may vary and it will be useful for you to be able to differentiate these groups of users by entry point in order to assess the value of each entry point. You can provide a value for the entry point in `KnotConfiguration.entryPoint` when [configuring the session](/sdk/flutter#configure-the-session). This value will be returned in the `AUTHENTICATED` webhook. ## Categories & Search Users are presented with a list of merchants in the SDK (unless you provide a single merchant as described above). Accompanying the list is a set of categories and a search experience. Each of these components is visible to users by default (as set in Knot's backend). You can choose to remove either of them by setting `useCategories: false` and `useSearch: false` in `KnotConfiguration`. **This is not recommended**. ## Events To receive updates from the SDK, import the following: ```dart icon="dart-lang" Dart theme={"system"} import 'dart:async'; import 'package:knotapi_flutter/events.dart'; ``` And then implement the example code found below. ### `onSuccess` This event is called when a user successfully logged in to the merchant and their card was switched. It takes a single argument `KnotSuccess`. ```dart icon="dart-lang" Dart theme={"system"} ... StreamSubscription? _streamSuccess; void initState() { super.initState(); _streamSuccess = KnotapiFlutter.onSuccess.listen(_onSuccess); } void _onSuccess (KnotSuccess event) { String merchant = event.merchant; print("onSuccess - merchant: $merchant"); } ... ``` ### `onError` This event is called when an error occurs during SDK initialization and it takes a single argument `KnotError`. | errorCode | errorDescription | Debugging Steps | | ------------------------ | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | INVALID\_SESSION | The session is invalid. | Ensure `KnotConfiguration.environment` matches the environment the `sessionId` was created for (`development` or `production`). | | EXPIRED\_SESSION | The session has expired. | Sessions are valid for 30 minutes. It is best practice to ensure that you create a new session **every time** a user invokes the SDK using [Create Session](/api-reference/sessions/create-session). | | INVALID\_CLIENT\_ID | The client ID is invalid. | Verify that the value you are providing for `KnotConfiguration.clientId` is for the environment matching the value you are providing for `KnotConfiguration.environment` (i.e. `development` or `production`). If you provide your production `clientId` but set `environment: development`, you will experience this error. | | INTERNAL\_ERROR | An internal error occurred. | Simply retry invoking the SDK with a new `sessionId`. | | MERCHANT\_ID\_NOT\_FOUND | The merchant ID is required. | The `type` of `sessionId` you are providing on invocation of the SDK requires that you also provide a value in `KnotConfiguration.merchantIds` to ensure the user is directed to a specific merchant’s login flow in the SDK. You can retrieve a list of merchant IDs (the same in all environments) in [List Merchants](/api-reference/merchants/list-merchants). | | INVALID\_CARD\_NAME | The card name is invalid. | The value you are providing for `customerConfiguration.cardName` must exactly match an allowlisted value for your organization. Please reach out to the Knot team for access to this allowlist. | | INVALID\_CUSTOMER\_NAME | The customer name is invalid. | The value you are providing for `customerConfiguration.customerName` must exactly match an allowlisted value for your organization. Please reach out to the Knot team for access to this allowlist. | | INVALID\_LOGO\_ID | The logo ID is invalid. | The value you are providing for `customerConfiguration.logoId` must exactly match an allowlisted value for your organization. Please reach out to the Knot team for access to this allowlist. | | INVALID\_LOCALE | The locale is invalid. | The value you are providing for `KnotConfiguration.locale` must be a valid [BCP-47](https://developer.mozilla.org/en-US/docs/Glossary/BCP_47_language_tag) language tag. Currently supported: `en-US`, `es-US`, `en-CA`, and `fr-CA`. | Sessions are valid for 30 minutes. If a session expires while the SDK is open, an expired session error will be emitted via `onError` and the SDK will automatically close. To provide a seamless experience, handle the `REFRESH_SESSION_REQUEST` event via the `onEvent` callback to proactively extend the session using [Extend Session](/api-reference/sessions/extend-session) before expiration occurs. ```dart icon="dart-lang" Dart theme={"system"} ... StreamSubscription? _streamError; void initState() { super.initState(); _streamError = KnotapiFlutter.onError.listen(_onError); } void _onError (KnotError event) { String errorDescription = event.errorDescription; String errorCode = event.errorCode; print("onError - errorDescription: $errorDescription, errorCode: $errorCode"); } ... ``` ### `onExit` This event is called when a user closes the SDK. It takes a single argument `KnotExit`. ```dart icon="dart-lang" Dart theme={"system"} ... StreamSubscription? _streamExit; void initState() { super.initState(); _streamExit = KnotapiFlutter.onExit.listen(_onExit); } void _onExit (KnotExit event) { // User exited the SDK } ... ``` ### `onEvent` This event is called when certain events occur in the SDK. With this callback, you will be able to understand how a user is progressing through their lifecycle of authenticating to a merchant. It takes a single argument `KnotEvent`. ```dart icon="dart-lang" Dart theme={"system"} ... StreamSubscription? _streamEvent; void initState() { super.initState(); _streamEvent = KnotapiFlutter.onEvent.listen(_onEvent); } void _onEvent (KnotEvent event) { String environment = event.environment; String event = event.event; String? merchant = event.merchant; String? merchantId = event.merchantId; String? taskId = event.taskId; Map metaData = event.metaData; print("onEvent - environment: $environment, event: $event, merchant: $merchant, merchantId: $merchantId metaData: $metaData"); } ... ``` The following list contains all possible events emitted in the `KnotEvent.event` property. | Name | Description | | ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | REFRESH\_SESSION\_REQUEST | Emitted when the session used to initialize the SDK needs to be refreshed. Use [Extend Session](/api-reference/sessions/extend-session) to extend the session before expiration occurs. | | MERCHANT\_CLICKED | Emitted when a user clicks on a merchant from the merchant list. | | LOGIN\_STARTED | Emitted when a user submits their credentials to login to the merchant. | | AUTHENTICATED | Emitted when a user successfully logs in to the merchant. | | OTP\_REQUIRED | Emitted when a user needs to enter an OTP code to login to the merchant. | | SECURITY\_QUESTIONS\_REQUIRED | Emitted when a user needs to enter answers to security questions to login to the merchant. | | APPROVAL\_REQUIRED | Emitted when a user needs to approve the login - often via a push notification or directly in the merchant's mobile app - to login to the merchant. | | ZIPCODE\_REQUIRED | Emitted when a user needs to enter their zip code to login to the merchant. | | LICENSE\_REQUIRED | Emitted when a user needs to enter their drivers license to login to the merchant. | ## Other Options ### Get current SDK version If you need to retrieve the current SDK version for your own use case, implement the following: ```dart icon="dart-lang" Dart theme={"system"} final _knotapiFlutterPlugin = KnotapiFlutter(); String sdkVersion = await _knotapiFlutterPlugin.getSdkVersion(); print('Knot SDK Version: ${sdkVersion ?? "Unknown"}'); ``` ### Close the SDK If you need to explicitly close the SDK, use the below method, otherwise end users will naturally close the SDK as they interact with the interface. ```dart icon="dart-lang" Dart theme={"system"} _knot.close(); ``` ### Maintain cookies Knot clears cookies for security purposes. If your app relies on cookies, you can allowlist specific domains using the `domainUrls` configuration in `KnotConfiguration`. **This is uncommon.** ```dart icon="dart-lang" Dart theme={"system"} // The allowed domains for cookies to add as a parameter in KnotConfiguration KnotConfiguration( sessionId: "695ce724-7f61-40f1-a410-cb0c0fcf9b7f", clientId: "3f4acb6b-a8c9-47bc-820c-b0eaf24ee771", environment: Environment.development, merchantIds: [17], useCategories: false, useSearch: false, domainUrls: ["https://example.com", "https://secure.example.com"], locale: "es-US" // Optional BCP-47 language tag ) ```