> ## 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.

# Web Version 1.0+

## Overview

To simplify your application logic and integration with the Knot JS SDK, Version 1.0 includes a number of breaking changes that may affect the way your integration works or behaves.

The new version includes a number of significant improvements:

1. Enhanced speed and stability in loading merchant flows.
2. More streamlined initialization of the SDK.
3. Simplified event handling, more informative event messaging, and uniform naming conventions for easier debugging.
4. Improved maintainability and foundations for new feature compatibility.

## Breaking Changes

Configuring and opening the Knot SDK has changed significantly in JS Version 1.0 and requires some refactoring in order to initialize the SDK with a session. Errors are now encapsulated in a `KnotError` object which provides an enumerated value to debug with.

### Session Initialization

**Changes**

* `Knot.openCardOnFileSwitcher` is replaced with a more flexible `open`.

**Before**

```javascript JavaScript theme={"system"}
  import KnotapiJS from "knotapi-js";
const knotapi = new KnotapiJS();

// Invoke the openCardOnFileSwitcher method with required parameters
knotapi.openCardOnFileSwitcher({
 	 	sessionId: "Your Session ID",
  	clientId: "Your Client ID",
  	environment: "development"  // or "production"
});
```

**After**

```javascript theme={"system"}
import KnotapiJS from "knotapi-js";
const knotapi = new KnotapiJS();

// Invoke the open method with required parameters
knotapi.open({
sessionId: "Your Session ID",
clientId: "Your Client ID",
environment: "development",  // or "production"
product: "card_switcher"   
});
```

### Event Handling

**Changes**

* All events introduce a `product` argument to help distinguish events in your code.

**Before**

```javascript JavaScript theme={"system"}
onSuccess: (merchant) => {
  console.log("onSuccess", merchant);
}

onError: (errorCode, errorMessage) => {
  console.log("onError", errorCode, errorMessage);
}

onExit: () => {
    console.log("onExit");
}

onEvent: (event, merchant, taskId) => {
    console.log("onEvent", event, merchant, taskId);
}
```

**After**

```javascript JavaScript theme={"system"}

onSuccess: (product, merchant) => {
  console.log("onSuccess", merchant);
}

onError: (product, errorCode, errorMessage) => {
  console.log("onError", errorCode, errorMessage);
}

onExit: (product) => {
    console.log("onExit");
}

onEvent: (product, event, merchant, taskId) => {
    console.log("onEvent", event, merchant, taskId);
}
```