​
Overview

Version 1.0+ of the Web SDK introduces breaking changes that require changes in your application code if you had previously integrated an early version. See the Migration Guide for further details.
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 web 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 JS SDK is hosted on unpkg.com, a popular CDN for everything on npm. You can also host the SDK on your servers if preferred. The next tag is applied in version 1.0.0+, which is not automatically fetched by npm when running npm install knotapi-js.

​
Via npm

For Node.js environments, use npm to install the KnotapiJS SDK like below: 
npm install knotapi-js@next --save

​
Via CDN

For browser-based projects, you can use the KnotapiJS SDK via a CDN: 
<script src="https://unpkg.com/knotapi-js@next"></script>

​
Initialization

Your backend will create a session by calling Create Session and provide it to your frontend. To start a Knot session, you must first configure the SDK. 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 SDK

The SDK is configured using the following parameters when using the open method:
NameTypeDescription
sessionIdStringThe session created by calling /session/create in your backend.
clientIdStringYour organization’s client ID. Note that this varies between development and production environments.
environmentEnvironmentThe desired environment (development or production).
productProductThe Knot product the session will inherit - the same as the type of session created. E.g. card_switcher or transaction_link.
merchantIds[int]?Optional when product = card_switcher. Required when product = transaction_link. A list of merchant ID(s) to display. It is recommended to provide 0 or 1 merchant IDs depending on your desired user experience.
entryPointString?Optional. The specific entry point from within your app where you are initializing the Knot SDK (e.g. onboarding).
useCategoriesBooleanOptional. Whether to display merchant categories and therefore group merchants into categories for discoverability. Default: true.
useSearchBooleanOptional. Whether to display the search bar, enabling users to search for merchants. Default: true.
The below parameters are 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 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.
NameTypeDescription
cardNameStringOptional. 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.
customerNameStringOptional. 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.
logoIdStringOptional. The differentiated logo for the company. This value will override your default logo.
See the following real example for how the cardName and customerName parameters are used together in text inside the Knot SDK: "Your [customerName] [cardName | Card] was added."

​
Open the SDK

Invoke the open method with the parameters like below:

​
Node.js

import KnotapiJS from "knotapi-js";
const knotapi = new KnotapiJS();

// Invoke the open method with parameters
knotapi.open({
sessionId: "Your Session ID",
clientId: "Your Client ID",
environment: "development", // or "production"
product: "card_switcher", // or "transaction_link"
merchantIds: [17], // Recommend 0 or 1 merchant IDs
entryPoint: "onboarding", // Defined by you
useCategories: true, // Recommend true
useSearch: true, // Recommend true
customerName: "Company name", // Optional customer configuration
cardName: "Card Name", // Optional customer configuraiton
logoId: 1234 // Optional customer configuration
});

​
Browser

const KnotapiJS = window.KnotapiJS.default;
const knotapi = new KnotapiJS();

// Invoke the open method with parameters
knotapi.open({
sessionId: "Your Session ID",
clientId: "Your Client ID",
environment: "development",  // or "production"
product: "card_switcher",  // or "transaction_link"
merchantIds: [17],, // Recommend 0 or 1 merchant IDs
entryPoint: "onboarding", // Defined by you
useCategories: true, // Recommend true
useSearch: true, // Recommend true
customerName: "Company name", // Optional customer configuration
cardName: "Card Name", // Optional customer configuraiton
logoId: 1234 // Optional customer configuration
});
To test logging in to a merchant in the SDK, please reference a set of available test credentials for the CardSwitcher product here and Transaction Link product here.

​
Single Merchant Flow

If you decide to use 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 in the KnotConfiguration. More in Retrieving & 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.

​
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 when initializing the SDK. This value will be returned in the AUTHENTICATED webhook. 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 when initializing the SDK. This is not recommended.

​
Events

The open method provides several callbacks you can use to receive events from the SDK. 
knotapi.open({
  sessionId: "Your Session ID",
  clientId: "Your Client ID",
  environment: "development",  // or "production"
  product: "card_switcher", // or "transaction_link"
  merchantIds: [17],
  entryPoint: "onboarding",
  onSuccess: (product, details) => { console.log("onSuccess", product, details); },
  onError: (product, errorCode, message) => { console.log("onError", product, errorCode, message); },
  onEvent: (product, event, merchant, payload, taskId) => { console.log("onEvent", product, event, merchant, payload, taskId); },
  onExit: (product) => { console.log("onExit", product)} 
});

​
onSuccess

This event is called when a user successfully logged in to the merchant and their card was switched. It takes the following arguments: product and details, the latter of which contains the merchantName field, representing the merchant for which the card was updated.

​
onError

This event is called when an error occurs during SDK initialization. It takes the following arguments: product, errorCode, and errorDescription.
errorCodeerrorDescription
INVALID_SESSIONThe session ID is invalid.
EXPIRED_SESSIONThe session has expired.
INVALID_CLIENT_IDThe client ID is invalid.
INVALID_MERCHANT_IDThe merchant ID is required when product type = transaction_link.
INVALID_CARD_NAMEThe card name is invalid.
INVALID_CUSTOMER_NAMEThe customer name is invalid.
INVALID_LOGO_IDThe logo ID is invalid.
  onError: (product, errorCode, errorDescription) => {
    console.log("onError", product, errorCode, errorDescription);
}

​
onExit

This event is called when a user closes 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 the following arguments: product, event, merchant, merchantId, payload, and taskId. 
  onEvent: (product, event, merchant, merchantId, payload, taskId) => {
    console.log("onEvent", product, event, merchant, merchantId, payload, taskId);
}
The following list contains all possible events emitted in the event property:
EventDescription
REFRESH_SESSION_REQUESTEmitted when the session used to initialize the SDK needs to be refreshed.
MERCHANT_CLICKEDEmitted when a user clicks on a merchant from the merchant list.
LOGIN_STARTEDEmitted when a user submits their credentials to login to the merchant.
AUTHENTICATEDEmitted when a user successfully logs in to the merchant.
OTP_REQUIREDEmitted when a user needs to enter an OTP code to login to the merchant.
QUESTIONS_REQUIREDEmitted when a user needs to enter answers to security questions to login to the merchant.
APPROVAL_REQUIREDEmitted 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_REQUIREDEmitted when a user needs to enter their zip code to login to the merchant.
LICENSE_REQUIREDEmitted when a user needs to enter their drivers license to login to the merchant.