Add web sdk documentation

docs/browser-events.md

@@ -4,27 +4,20 @@ sidebar_position: 6
 
 # Browser events
 
-If the Topper browser session is opened using JavaScript — for example by using `window.open()` — then you can receive updates on the user's session by using the [`postMessage` API](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage).
+You can receive updates on the user's session after initializing Topper like:
 
 ```js
 // Generate a bootstrap token.
 const bootstrapToken = await generateBootstrapToken();
 
-// Open a Topper window using the bootstrap token.
-const topperWindow = window.open(`https://app.topperpay.com/?bt=${bootstrapToken}`);
+// Open Topper using the bootstrap token.
+const topper = new TopperWebSdk();
 
-// Add event listeners
-topperWindow.addEventListener('message', (event) => {
-  // Ignore messages that didn't originate from Topper.
-  if (event.origin !== 'https://app.topperpay.com') {
-    return;
-  }
+topper.initialize({ bootstrapToken });
 
-  // Log the message data.
-  console.log(event.data);
-});
-```
+// Listen to a single event.
+topper.on(TOPPER_EVENTS.ORDER_PLACED, ({ data }) => {});
+
+// Listen to all events.
+topper.on(TOPPER_EVENTS.ALL, ({ data, name }) => {});
 
-:::note
-Browser events have not yet been implemented, but will be available soon. We will release a JavaScript SDK to make it easier to open a Topper browser session and listen to events.
-:::

docs/digital-wallets.md

@@ -52,5 +52,10 @@ These payment options offer a seamless and convenient way for your customers to
 - When Topper is embed with a `WebView`, ensure setting `is_android_app=1` or `is_ios_app=1` as a query parameter in the URL.
 
 **Example URLs:**
-- Android: `https://app.topperpay.com/?bt=XXXX&is_android_app=1`
-- iOS: `https://app.topperpay.com/?bt=XXXX&is_ios_app=1`
+- Android: `https://app.topperpay.com/?bt=<bootstrap token>&is_android_app=1`
+- iOS: `https://app.topperpay.com/?bt=<bootstrap token>&is_ios_app=1`
+
+**Using the [Web SDK](./web-sdk.md):**
+
+- Android: `topper.initialize({ bootstrapToken: <bootstrap token>, { is_android_app: true } });`
+- iOS: `topper.initialize({ bootstrapToken: <bootstrap token>, { is_ios_app: true } });`

docs/theming.md

@@ -6,4 +6,12 @@ sidebar_position: 9
 
 Topper supports both `light` and `dark` themes.
 
-The default is the dark theme, but you can easily switch by adding `&theme=light` to the URL, such as `https://app.topperpay.com/?bt=XXXX&theme=light`.
+The default is the dark theme, but you can easily switch by adding `&theme=light` to the URL, such as `https://app.topperpay.com/?bt=<bootstrap token>&theme=light`.
+
+**Using the [Web SDK](./web-sdk.md):**
+
+```
+const topper = new TopperWebSdk({ theme: TOPPER_THEMES.LIGHT });
+
+topper.initialize({ bootstrapToken: <bootstrap token> });
+```

docs/web-sdk.md

@@ -0,0 +1,9 @@
+---
+sidebar_position: 10
+---
+
+# Web SDK
+
+The Web SDK is designed to help you integrate Topper in a seamless way. It supports multiple ways of initializing Topper, adding configuration, browser events and multi-instance support.
+
+Please, refer to the [offical documentation](https://github.com/uphold/topper-web-sdk).

docs/widgets.md

@@ -168,6 +168,29 @@ https://app.topperpay.com/?bt=<bootstrap token>
   </TabItem>
 </Tabs>
 
+Using the [Web SDK](./web-sdk.md), the configuration process is seamless, allowing you to choose between multiple ways of initializing Topper and have support for [browser events](./browser-events.md):
+
+<Tabs>
+  <TabItem label="Sandbox" value="sandbox" default>
+
+```
+const topper = new TopperWebSdk({ environment: TOPPER_ENVIRONMENTS.SANDBOX });
+
+topper.initialize({ bootstrapToken: <bootstrap token> });
+```
+
+  </TabItem>
+  <TabItem label="Production" value="production" default>
+
+```
+const topper = new TopperWebSdk();
+
+topper.initialize({ bootstrapToken: <bootstrap token> });
+```
+
+  </TabItem>
+</Tabs>
+
 In order to prevent social and replay attacks, a **bootstrap token** will only be valid for 60 seconds after its issue time (from the `iat` claim). A **bootstrap token** may only be used to create a session one time, any subsequent attempts to create a session with the same token will be rejected.
 
 ## A note about security {#a-note-about-security}