Add allow to pass config on initialize

README.md

@@ -24,35 +24,51 @@ import { TopperWebSdk } from '@uphold/topper-web-sdk';
 const topper = new TopperWebSdk();
 ```
 
-### Initiate Topper
+Where a `config` object can be passed to the constructor:
 
-You can initiate Topper on a new tab (default), iframe or same tab. The default environment is `production`, and `sandbox` is available.
+| Property       | Default Value | Values                             |
+| -------------- | ------------- | ---------------------------------- |
+| environment    | 'production'  | 'production', 'sandbox'            |
+| is_android_app | false         | true, false                        |
+| is_ios_app     | false         | true, false                        |
+| theme          | 'dark'        | 'dark', 'light'                    |
+| variant        | 'new-tab'     | 'new-tab', 'same-tab', 'iframe'    |
 
-Example:
+### Initiate Topper
 
 ```javascript
 import { TOPPER_ENVIRONMENTS, TOPPER_VARIANTS, TopperWebSdk } from '@uphold/topper-web-sdk';
 
+// Open in a new tab (default).
 const topper = new TopperWebSdk();
 
-// Open in a new tab (default).
 topper.initialize({ bootstrapToken: 'XXXX' });
 
 // Open in an iframe.
-const topper = new TopperWebSdk({ variant: TOPPER_VARIANTS.iframe });
+const topper = new TopperWebSdk({ variant: TOPPER_VARIANTS.IFRAME });
 const topperIframe = document.getElementById('topper-iframe');
 
 topper.initialize({ bootstrapToken: 'XXXX', iframeElement: topperIframe });
 
 // Open in the same tab.
-const topper = new TopperWebSdk({ variant: TOPPER_VARIANTS.sameTab });
+const topper = new TopperWebSdk({ variant: TOPPER_VARIANTS.SAME_TAB });
 
 topper.initialize({ bootstrapToken: 'XXXX' });
 
 // Open sandbox environment.
-const topper = new TopperWebSdk({ environment: TOPPER_ENVIRONMENTS.sandbox });
+const topper = new TopperWebSdk({ environment: TOPPER_ENVIRONMENTS.SANDBOX });
+
+topper.initialize({ bootstrapToken: 'XXXX' });
+
+// Open with light theme.
+const topper = new TopperWebSdk({ theme: TOPPER_THEMES.LIGHT });
 
 topper.initialize({ bootstrapToken: 'XXXX' });
+
+// Override initial config if needed.
+const topper = new TopperWebSdk();
+
+topper.initialize({ bootstrapToken: 'XXXX', config: { variant: TOPPER_VARIANTS.SAME_TAB } });
 ```
 
 ### Event Handling
@@ -61,28 +77,28 @@ Listen to single events like order placed or all events:
 
 ```javascript
 // Single event.
-topper.on(TOPPER_EVENTS.orderPlaced, ({ data }) => {});
+topper.on(TOPPER_EVENTS.ORDER_PLACED, ({ data }) => {});
 
 // All events.
-topper.on(TOPPER_EVENTS.all, ({ data, name }) => {});
+topper.on(TOPPER_EVENTS.ALL, ({ data, name }) => {});
 ```
 
 ### Multiple instances
 
 You can initiate Topper on multiple instances, and listen to events like:
 
 ```javascript
-const topperIframe1 = new TopperWebSdk({ variant: TOPPER_VARIANTS.iframe });
-const topperIframe2 = new TopperWebSdk({ variant: TOPPER_VARIANTS.iframe });
+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: 'XXXX', iframeElement: topperIframe1Element });
 topperIframe2.initialize({ bootstrapToken: 'XXXX', iframeElement: topperIframe2Element });
 
-topperIframe1.on(TOPPER_WEB_SDK_EVENTS.orderPlaced, ({ data }) => {});
-topperIframe2.on(TOPPER_WEB_SDK_EVENTS.orderPlaced, ({ data }) => {});
+topperIframe1.on(TOPPER_WEB_SDK_EVENTS.ORDER_PLACED, ({ data }) => {});
+topperIframe2.on(TOPPER_WEB_SDK_EVENTS.ORDER_PLACED, ({ data }) => {});
 ```
 
 ### Triggering Events
@@ -92,7 +108,7 @@ Used by `@uphold/topper-web` to trigger events:
 Trigger events:
 
 ```javascript
-TopperWebSdk.triggerEvent(EVENTS.orderPlaced, data);
+TopperWebSdk.triggerEvent(TOPPER_EVENTS.ORDER_PLACED, data);
 ```
 
 ## Additional Information

src/enums/index.ts

@@ -1,4 +1,5 @@
 export * from './environments';
 export * from './events';
+export * from './themes';
 export * from './urls';
 export * from './variants';

src/enums/themes.ts

@@ -0,0 +1,4 @@
+export enum Themes {
+  DARK = 'dark',
+  LIGHT = 'light'
+}

src/index.ts

@@ -1,6 +1,7 @@
 export {
   Environments as TOPPER_ENVIRONMENTS,
   Events as TOPPER_EVENTS,
+  Themes as TOPPER_THEMES,
   Urls as TOPPER_URLS,
   Variants as TOPPER_VARIANTS
 } from './enums';

src/interfaces/config.ts

@@ -1,10 +1,11 @@
 import { Environments } from '../enums/environments';
+import { Themes } from '../enums/themes';
 import { Variants } from '../enums/variants';
 
 export interface Config {
   environment?: Environments;
   is_android_app?: boolean;
   is_ios_app?: boolean;
-  theme?: string;
+  theme?: Themes;
   variant?: Variants;
 }

src/topper-web-sdk.ts

@@ -46,6 +46,10 @@ class TopperWebSdk {
     this.eventHandlers[name]?.forEach(handler => handler({ data: payload }));
   }
 
+  private setConfig(config: Config): void {
+    this.config = { ...this.config, ...config };
+  }
+
   private initializeMessageListener(): void {
     this.handleMessage = (event: MessageEvent) => {
       const allowedOrigins = [Urls.PRODUCTION, Urls.SANDBOX];
@@ -67,12 +71,21 @@ class TopperWebSdk {
     this.eventHandlers = {};
   }
 
-  initialize({ bootstrapToken, iframeElement }: { bootstrapToken: string; iframeElement?: HTMLIFrameElement }): void {
+  initialize({
+    bootstrapToken,
+    config = {},
+    iframeElement
+  }: {
+    bootstrapToken: string;
+    iframeElement?: HTMLIFrameElement;
+    config?: Config;
+  }): void {
     if (this.isInitialized) {
       throw new Error('This TopperWebSdk instance was already initialized.');
     }
 
     this.isInitialized = true;
+    this.setConfig(config);
 
     const baseUrl = this.config.environment === Environments.SANDBOX ? Urls.SANDBOX : Urls.PRODUCTION;
     const isTopperSelfEmbed = window.location.href === Urls.WEBSITE;