This web SDK is designed to help developers to integrate Topper into their web applications.
# Using yarn
$ yarn add @uphold/topper-web-sdk
# Using npm
$ npm install @uphold/topper-web-sdkFirst, create an instance of TopperWebSdk:
import { TopperWebSdk } from '@uphold/topper-web-sdk';
const topper = new TopperWebSdk();Where a config object can be passed to the constructor:
| Property | Default Value | Values |
|---|---|---|
| environment | production |
production, sandbox |
| is_android_app | false |
true, false |
| is_ios_app | false |
true, false |
| locale | en |
en, en-US, pt, pt-BR |
| theme | dark |
dark, light |
| variant | new-tab |
new-tab, same-tab, iframe |
import { TOPPER_ENVIRONMENTS, TOPPER_VARIANTS, TopperWebSdk } from '@uphold/topper-web-sdk';
// Open in a new tab (default).
const topper = new TopperWebSdk();
topper.initialize({ bootstrapToken: <bootstrap token> });
// Open in an iframe.
const topper = new TopperWebSdk({ variant: TOPPER_VARIANTS.IFRAME });
const topperIframe = document.getElementById('topper-iframe');
topper.initialize({ bootstrapToken: <bootstrap token>, iframeElement: topperIframe });
// Open in the same tab.
const topper = new TopperWebSdk({ variant: TOPPER_VARIANTS.SAME_TAB });
topper.initialize({ bootstrapToken: <bootstrap token> });
// Open sandbox environment.
const topper = new TopperWebSdk({ environment: TOPPER_ENVIRONMENTS.SANDBOX });
topper.initialize({ bootstrapToken: <bootstrap token> });
// Open with specific locale.
const topper = new TopperWebSdk({ locale: TOPPER_LOCALES.PT });
// Open with light theme.
const topper = new TopperWebSdk({ theme: TOPPER_THEMES.LIGHT });
topper.initialize({ bootstrapToken: <bootstrap token> });
// Override initial config if needed.
const topper = new TopperWebSdk();
topper.initialize({ bootstrapToken: <bootstrap token>, config: { variant: TOPPER_VARIANTS.SAME_TAB } });Listen to single events like order placed or all events:
// Single event.
topper.on(TOPPER_EVENTS.ORDER_PLACED, ({ data }) => {});
// All events.
topper.on(TOPPER_EVENTS.ALL, ({ data, name }) => {});You can initiate Topper on multiple instances, and listen to events like:
const topperIframe1 = new TopperWebSdk({ variant: TOPPER_VARIANTS.IFRAME });
const topperIframe2 = new TopperWebSdk({ variant: TOPPER_VARIANTS.IFRAME });
const topperIframe1Element = document.getElementById('topper-iframe-1');
const topperIframe2Element = document.getElementById('topper-iframe-2');
topperIframe1.initialize({ bootstrapToken: <bootstrap token>, iframeElement: topperIframe1Element });
topperIframe2.initialize({ bootstrapToken: <bootstrap token>, iframeElement: topperIframe2Element });
topperIframe1.on(TOPPER_WEB_SDK_EVENTS.ORDER_PLACED, ({ data }) => {});
topperIframe2.on(TOPPER_WEB_SDK_EVENTS.ORDER_PLACED, ({ data }) => {});Used by @uphold/topper-web to trigger events:
Trigger events:
TopperWebSdk.triggerEvent(TOPPER_EVENTS.ORDER_PLACED, data);For reporting issues, bugs, or feature requests, please use the GitHub Issues page.
The release of a version is automated via the release GitHub workflow. Run it by clicking the "Run workflow" button.
This project is licensed under the MIT License. See the LICENSE file in the GitHub repository for more details.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent