Add option to render iframe inline via containerId

README.md

@@ -2,20 +2,19 @@
 
 A library for decentralised applications to onboard their global user base with fiat currency.
 
-## Installation
+## Example usage
 
-```sh
-npm install @transak/transak-sdk
+```html
+<div id="transakMount"></div>
 ```
 
-## Example usage
-
 ```ts
 import { TransakConfig, Transak } from '@transak/transak-sdk';
 
 const transakConfig: TransakConfig = {
   apiKey: '<your-api-key>', // (Required)
   environment: Transak.ENVIRONMENTS.STAGING/Transak.ENVIRONMENTS.PRODUCTION, // (Required)
+  containerId: 'transakMount', // Id of the element where you want to initialize the iframe
   // .....
   // For the full list of customisation options check the link below
 };
@@ -49,14 +48,26 @@ Transak.on(Transak.EVENTS.TRANSAK_ORDER_CREATED, (orderData) => {
 */
 Transak.on(Transak.EVENTS.TRANSAK_ORDER_SUCCESSFUL, (orderData) => {
   console.log(orderData);
-  transak.close();
+  transak.cleanup();
 });
 ```
 
 Refer here for the full list of [customisation options](https://docs.transak.com/docs/query-parameters)
 
 For in-depth instructions on integrating Transak, view [our complete documentation.](https://docs.transak.com/docs/integration-options)
 
-## Migration Guide for v2
+### Using Modal UI
+
+If you want to use our modal UI, do not pass the `containerId` and use `transak.close()` instead of `transak.cleanup()`
 
-[This guide](https://github.com/Transak/transak-sdk/wiki/Migration-Guide-for-v2) will help you to upgrade to v2 successfully!
+### React Gotchas
+
+Do not forget to clean up by using the `transak.cleanup()` or `transak.close()`
+
+```ts
+useEffect(() => {
+  return () => {
+    transak.cleanup();
+  };
+}, []);
+```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transak/transak-sdk",
-  "version": "2.2.0",
+  "version": "3.0.0",
   "description": "Transak SDK that allows you to easily integrate fiat on/off ramp",
   "type": "module",
   "types": "lib/index.d.ts",
@@ -28,7 +28,8 @@
     "eslint": "eslint . --ext .ts",
     "eslint:fix": "pnpm eslint --fix",
     "build": "tsc && tsup",
-    "prepack": "pnpm build"
+    "prepack": "pnpm build",
+    "packDev": "pnpm pack"
   },
   "author": "Transak",
   "license": "ISC",

src/Assets/css/index.ts

@@ -14,7 +14,7 @@ export function getCSS(themeColor: string, width: string, height: string) {
       background: rgba(0, 0, 0, 0.6);
     }
 
-    .transak-modal {
+    #transakModal {
       z-index: 9998;
       position: fixed;
       width: ${width};
@@ -54,7 +54,7 @@ export function getCSS(themeColor: string, width: string, height: string) {
     }
 
     @media screen and (max-width: 600px) {
-      .transak-modal {
+      #transakModal {
         width: 100%;
         height: calc(100% - ${closeIconHeightTwoParts}px);
       }

src/Types/sdk-config.types.d.ts

@@ -5,4 +5,5 @@ export type TransakConfig = {
   environment: Environments.STAGING | Environments.PRODUCTION;
   widgetWidth?: string;
   widgetHeight?: string;
+  containerId?: string;
 } & QueryParams;

src/Utils/render-iframe.ts → src/Utils/create-iframe.ts

@@ -1,15 +1,15 @@
 import { generateURL } from 'Utils/generate-url';
 import { TransakConfig } from 'Types/sdk-config.types';
 
-export function renderIframe(container: HTMLElement, config: TransakConfig) {
-  const url = generateURL(config);
+export function createIframe(config: TransakConfig) {
+  const src = generateURL(config);
   const iframe = document.createElement('iframe');
 
   Object.assign(iframe, {
     id: 'transakIframe',
     allow: 'camera;microphone;payment',
-    src: url,
+    src,
   });
 
-  return container.appendChild(iframe);
+  return iframe;
 }

src/Utils/set-style.ts → src/Utils/render-in-modal.styles.ts

@@ -1,7 +1,7 @@
 import { getCSS } from 'Assets/css';
 import { TransakConfig } from 'Types/sdk-config.types';
 
-export function setStyle(config: TransakConfig) {
+export function renderInModalStyles(config: TransakConfig) {
   const { themeColor = '1461db', widgetWidth = '480px', widgetHeight = '650px' } = config;
   const style = document.createElement('style');
 

src/Utils/render-in-modal.ts

@@ -0,0 +1,31 @@
+import { closeIcon } from 'Assets/svg/close-icon';
+import { createIframe } from 'Utils/create-iframe';
+import { renderInModalStyles } from 'Utils/render-in-modal.styles';
+import { TransakConfig } from 'Types/sdk-config.types';
+
+export function renderInModal(config: TransakConfig, closeRequest: () => void) {
+  const styleElement = renderInModalStyles(config);
+  const rootElement = document.createElement('div');
+  const modal = document.createElement('div');
+  const iframeElement = createIframe(config);
+
+  Object.assign(modal, {
+    id: 'transakModal',
+    innerHTML: closeIcon,
+  });
+
+  modal.appendChild(iframeElement);
+
+  Object.assign(rootElement, {
+    id: 'transakRoot',
+    onclick: () => closeRequest(),
+  });
+
+  rootElement.appendChild(modal);
+
+  document.getElementsByTagName('body')[0].appendChild(rootElement);
+
+  document.getElementById('transakCloseIcon')?.addEventListener('click', () => closeRequest());
+
+  return { styleElement, rootElement, iframeElement };
+}

src/transak.ts

@@ -1,11 +1,10 @@
 import events from 'events';
 import { Environments } from 'Constants/environments';
 import { Events } from 'Constants/events';
-import { setStyle } from 'Utils/set-style';
-import { renderModal } from 'Utils/render-modal';
+import { createIframe } from 'Utils/create-iframe';
 import { makeHandleMessage } from 'Utils/handle-message';
+import { renderInModal } from 'Utils/render-in-modal';
 import { TransakConfig } from 'Types/sdk-config.types';
-import { renderIframe } from 'Utils/render-iframe';
 
 const eventEmitter = new events.EventEmitter();
 
@@ -18,8 +17,6 @@ class Transak {
 
   #iframeElement?: HTMLIFrameElement;
 
-  #modalElement?: HTMLElement;
-
   #handleMessage: (event: MessageEvent<{ event_id: Events; data: unknown }>) => void;
 
   #isInitialized = false;
@@ -47,47 +44,23 @@ class Transak {
 
   init = () => {
     if (!this.#isInitialized) {
-      this.openModal();
+      this.#renderIframe();
       this.#isInitialized = true;
     }
   };
 
-  initIframe(container: HTMLElement) {
-    if (!(container instanceof Element)) throw new Error('[Transak SDK] => container is not Element');
-
-    if (!this.#isInitialized) {
-      this.#iframeElement = renderIframe(container, this.#config);
-      this.#isInitialized = true;
-    }
-
-    return this.#iframeElement;
-  }
-
-  openModal = () => {
-    window.addEventListener('message', this.#handleMessage);
-
-    this.#styleElement = setStyle(this.#config);
-
-    const { modal, rootElement } = renderModal(this.#config, this.#closeRequest);
-
-    this.#rootElement = rootElement;
-    this.#modalElement = modal;
-
-    this.#iframeElement = renderIframe(modal, this.#config);
-
-    return {
-      modal: this.#modalElement,
-      modalRoot: this.#rootElement,
-    };
+  cleanup = () => {
+    this.#removeEventListener();
+    this.#iframeElement = undefined;
+    this.#isInitialized = false;
   };
 
   close = () => {
     this.#styleElement?.remove();
     this.#rootElement?.remove();
-    this.#modalElement?.remove();
     this.#removeEventListener();
-    this.#isInitialized = false;
     this.#iframeElement = undefined;
+    this.#isInitialized = false;
   };
 
   getUser = () => {
@@ -98,6 +71,26 @@ class Transak {
     this.#iframeElement?.contentWindow?.postMessage({ event_id: Events.TRANSAK_LOGOUT_USER_REQUEST }, '*');
   };
 
+  #renderIframe = () => {
+    window.addEventListener('message', this.#handleMessage);
+
+    if (this.#config.containerId) {
+      const containerIdElement = document.getElementById(this.#config.containerId) as HTMLElement;
+      this.#iframeElement = createIframe(this.#config);
+
+      if (containerIdElement) {
+        containerIdElement.appendChild(this.#iframeElement);
+      } else {
+        throw new Error('[Transak SDK] => Please enter a valid containerId');
+      }
+    } else {
+      const { styleElement, rootElement, iframeElement } = renderInModal(this.#config, this.#closeRequest);
+      this.#styleElement = styleElement;
+      this.#rootElement = rootElement;
+      this.#iframeElement = iframeElement;
+    }
+  };
+
   #closeRequest = () => {
     this.#iframeElement?.contentWindow?.postMessage({ event_id: Events.TRANSAK_WIDGET_CLOSE_REQUEST }, '*');
   };