diff --git a/docs/browser-events.md b/docs/browser-events.md index 18f724a..bb500b7 100644 --- a/docs/browser-events.md +++ b/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. -::: diff --git a/docs/digital-wallets.md b/docs/digital-wallets.md index 8eb9bcc..46ee63d 100644 --- a/docs/digital-wallets.md +++ b/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` \ No newline at end of file +- Android: `https://app.topperpay.com/?bt=&is_android_app=1` +- iOS: `https://app.topperpay.com/?bt=&is_ios_app=1` + +**Using the [Web SDK](./web-sdk.md):** + +- Android: `topper.initialize({ bootstrapToken: , { is_android_app: true } });` +- iOS: `topper.initialize({ bootstrapToken: , { is_ios_app: true } });` \ No newline at end of file diff --git a/docs/theming.md b/docs/theming.md index 9f0e4e1..0fd4b1f 100644 --- a/docs/theming.md +++ b/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`. \ No newline at end of file +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=&theme=light`. + +**Using the [Web SDK](./web-sdk.md):** + +``` +const topper = new TopperWebSdk({ theme: TOPPER_THEMES.LIGHT }); + +topper.initialize({ bootstrapToken: }); +``` \ No newline at end of file diff --git a/docs/web-sdk.md b/docs/web-sdk.md new file mode 100644 index 0000000..937b37c --- /dev/null +++ b/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). \ No newline at end of file diff --git a/docs/widgets.md b/docs/widgets.md index 405b92d..96de38a 100644 --- a/docs/widgets.md +++ b/docs/widgets.md @@ -168,6 +168,29 @@ https://app.topperpay.com/?bt= +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): + + + + +``` +const topper = new TopperWebSdk({ environment: TOPPER_ENVIRONMENTS.SANDBOX }); + +topper.initialize({ bootstrapToken: }); +``` + + + + +``` +const topper = new TopperWebSdk(); + +topper.initialize({ bootstrapToken: }); +``` + + + + 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}