@morefin/cashier-bootstrapper 0.1.6 → 0.1.8

package/README.md

@@ -10,10 +10,10 @@ npm install @morefin/cashier-bootstrapper
 
 ## Usage
 
-Throughout the examples below, set a host variable once and reuse it:
+Throughout the examples below, set an environment once and reuse it:
 
 ```typescript
-const CASHIER_HOST = 'http://uat-api.morefin.com'; // change per environment
+const CASHIER_ENVIRONMENT = 'uat' as const; // 'production' | 'uat'
 ```
 
 ### Basic Embed
@@ -22,7 +22,7 @@ const CASHIER_HOST = 'http://uat-api.morefin.com'; // change per environment
 import { CashierBootstrapper } from '@morefin/cashier-bootstrapper';
 
 new CashierBootstrapper('#cashier-root', {
-  properties: { host: CASHIER_HOST }
+  properties: { environment: CASHIER_ENVIRONMENT }
 });
 ```
 
@@ -38,11 +38,11 @@ new CashierBootstrapper('#cashier-root', {
     userId: 'user-789',
     sessionId: 'session-abc',
     predefinedAmounts: [100, 200, 300],
-    layout: 'default'
+    layout: 'default',
+    transactionType: ('deposit'|'withdrawal')
   },
   properties: {
-    host: CASHIER_HOST,
-    cashierPath: '/cashier',
+    environment: CASHIER_ENVIRONMENT,
     iframe: {
       height: '720px',
       minHeight: '640px',
@@ -61,7 +61,7 @@ import { CashierBootstrapper } from '@morefin/cashier-bootstrapper';
 
 new CashierBootstrapper(null, {
   properties: {
-    host: CASHIER_HOST,
+    environment: CASHIER_ENVIRONMENT,
     container: '#cashier-root'
   }
 });
@@ -73,7 +73,7 @@ new CashierBootstrapper(null, {
 import { CashierBootstrapper } from '@morefin/cashier-bootstrapper';
 
 new CashierBootstrapper('#cashier-root', {
-  properties: { host: CASHIER_HOST }
+  properties: { environment: CASHIER_ENVIRONMENT }
 }, api => {
   api.setCss(`
     .payment-layout-root .payment-container {
@@ -98,7 +98,7 @@ Iframe-based embed that loads the cashier URL and exposes runtime controls once
 
 **Parameters:**
 - `container: string | HTMLElement | null | undefined` - Where the iframe is appended. If omitted, `config.properties.container` is used (falling back to `document.body`).
-- `config?: CashierIframeConfig` - Request params and iframe properties. `properties.host` is required.
+- `config?: CashierIframeConfig` - Request params and iframe properties. `properties.environment` is required.
 - `onReady?: (api: CashierIframeApi) => void` - Called when the iframe loads; exposes helpers:
   - `api.setCss(css: string)` – inject CSS inside the cashier iframe
   - `api.updateData(data: object)` – post updated `APP_DATA` to the cashier
@@ -114,9 +114,11 @@ interface CashierRequestParams {
   sessionId?: string;
   predefinedAmounts?: number[];
   layout?: string;
-  fingerprint?: string;
+  transactionType?: string;
 }
 
+type CashierEnvironment = 'production' | 'uat';
+
 interface CashierIframeOptions {
   width?: string;
   height?: string;
@@ -128,9 +130,8 @@ interface CashierIframeOptions {
 }
 
 interface CashierIframeProperties {
-  host: string;
+  environment: CashierEnvironment;
   container?: string | HTMLElement;
-  cashierPath?: string;
   iframe?: CashierIframeOptions;
 }
 
@@ -142,6 +143,9 @@ interface CashierIframeConfig {
 
 ## Defaults
 
-- `cashierPath`: `/cashier`
+- Cashier path is fixed to `/cashier`
+- `environment: 'production'` resolves to `https://api.morefin.com`
+- `environment: 'uat'` resolves to `https://uat-api.morefin.com`
+- Iframe URL origin is validated to allow only `api.morefin.com` and `uat-api.morefin.com`
 - `iframe.width`/`iframe.height`: `100%`
 - `iframe.allow`: `geolocation *;camera *;payment *;clipboard-read *;clipboard-write *;autoplay *;microphone *;fullscreen *;accelerometer *;magnetometer *;gyroscope *;picture-in-picture *;otp-credentials *;`

package/dist/example-usage.js

@@ -3,11 +3,11 @@
  * This file is not included in the npm package, it's just for reference.
  */
 import { CashierBootstrapper } from './index';
-const CASHIER_HOST = 'http://localhost:7082'; // change per environment
+const CASHIER_ENVIRONMENT = 'uat';
 // Example 1: Minimal configuration with selector
 export function example1() {
     new CashierBootstrapper('#cashier-root', {
-        properties: { host: CASHIER_HOST }
+        properties: { environment: CASHIER_ENVIRONMENT }
     });
 }
 // Example 2: Custom request params + iframe options
@@ -22,8 +22,7 @@ export function example2(container) {
             layout: 'default'
         },
         properties: {
-            host: CASHIER_HOST,
-            cashierPath: '/cashier',
+            environment: CASHIER_ENVIRONMENT,
             iframe: {
                 height: '720px',
                 minHeight: '640px',
@@ -37,7 +36,7 @@ export function example2(container) {
 // Example 3: Provide container via config instead of constructor
 export function example3() {
     new CashierBootstrapper(null, {
-        properties: { host: CASHIER_HOST, container: '#cashier-root' }
+        properties: { environment: CASHIER_ENVIRONMENT, container: '#cashier-root' }
     });
 }
 // Example 4: Update CSS at runtime after iframe is ready
@@ -51,7 +50,7 @@ export function example4(container) {
             layout: 'default'
         },
         properties: {
-            host: CASHIER_HOST
+            environment: CASHIER_ENVIRONMENT
         }
     }, api => {
         api.setCss(`
@@ -64,7 +63,7 @@ export function example4(container) {
 // Example 5: Updating data via the postMessage API
 export function example5(container) {
     new CashierBootstrapper(container, {
-        properties: { host: CASHIER_HOST }
+        properties: { environment: CASHIER_ENVIRONMENT }
     }, api => {
         api.updateData({
             userId: 'updated-user'

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { CashierIframeApi, CashierIframeConfig } from './types';
-export type { CashierRequestParams, CashierIframeApi, CashierIframeConfig, CashierIframeProperties } from './types';
+export type { CashierEnvironment, CashierRequestParams, CashierIframeApi, CashierIframeConfig, CashierIframeProperties } from './types';
 type FingerprintJSGlobal = {
     load: () => Promise<{
         get: () => Promise<{
@@ -17,6 +17,7 @@ export declare class CashierBootstrapper {
     private origin;
     private ready;
     private readonly fullConfig;
+    private readonly host;
     private readonly onReady?;
     constructor(container: string | HTMLElement | null | undefined, config?: CashierIframeConfig, onReady?: (api: CashierIframeApi) => void);
     private bootstrapIframe;

package/dist/index.js

@@ -1,5 +1,11 @@
 const DEFAULT_IFRAME_ALLOW = 'geolocation *;camera *;payment *;clipboard-read *;clipboard-write *;autoplay *;microphone *;fullscreen *;accelerometer *;magnetometer *;gyroscope *;picture-in-picture *;otp-credentials *;';
+const CASHIER_PATH = '/cashier';
 const FINGERPRINT_CDN = 'https://cdn.jsdelivr.net/npm/@fingerprintjs/fingerprintjs@4/dist/fp.min.js';
+const CASHIER_HOSTS = {
+    production: 'https://api.morefin.com',
+    uat: 'https://uat-api.morefin.com'
+};
+const ALLOWED_CASHIER_DOMAINS = new Set(['api.morefin.com', 'uat-api.morefin.com']);
 let fpLoaderPromise;
 function loadFingerprintLibrary() {
     if (typeof window === 'undefined') {
@@ -40,7 +46,7 @@ async function generateFingerprint() {
         return undefined;
     }
 }
-function buildQueryString(requestParams) {
+function buildQueryString(requestParams, fingerprint) {
     const query = new URLSearchParams();
     if (requestParams.merchantId != null) {
         query.append('merchantId', String(requestParams.merchantId));
@@ -62,18 +68,15 @@ function buildQueryString(requestParams) {
     if (requestParams.layout != null && requestParams.layout !== '' && requestParams.layout !== 'undefined') {
         query.append('layout', requestParams.layout);
     }
-    if (requestParams.fingerprint) {
-        query.append('fingerprint', requestParams.fingerprint);
+    if (fingerprint) {
+        query.append('fingerprint', fingerprint);
+    }
+    if (requestParams.transactionType) {
+        query.append('transactionType', requestParams.transactionType);
     }
     const qs = query.toString();
     return qs ? `?${qs}` : '';
 }
-function normalizePath(path) {
-    if (!path) {
-        return '/cashier';
-    }
-    return path.startsWith('/') ? path : `/${path}`;
-}
 function resolveContainer(container) {
     if (container instanceof HTMLElement) {
         return container;
@@ -87,34 +90,44 @@ function resolveContainer(container) {
     }
     return document.body;
 }
-function buildIframeUrl(host, cashierPath, requestParams) {
+function resolveHost(environment) {
+    const host = CASHIER_HOSTS[environment];
+    if (!host) {
+        throw new Error(`Unsupported cashier environment "${environment}"`);
+    }
+    return host;
+}
+function parseAndVerifyCashierUrl(url) {
+    const parsedUrl = new URL(url);
+    if (!ALLOWED_CASHIER_DOMAINS.has(parsedUrl.hostname)) {
+        throw new Error(`Cashier domain "${parsedUrl.hostname}" is not allowed`);
+    }
+    return parsedUrl;
+}
+function buildIframeUrl(host, requestParams, fingerprint) {
     const trimmedHost = host.endsWith('/') ? host.slice(0, -1) : host;
-    const path = normalizePath(cashierPath);
-    return `${trimmedHost}${path}${buildQueryString(requestParams)}`;
+    const url = `${trimmedHost}${CASHIER_PATH}${buildQueryString(requestParams, fingerprint)}`;
+    parseAndVerifyCashierUrl(url);
+    return url;
 }
 function getOriginFromUrl(url) {
-    try {
-        return new URL(url).origin;
-    }
-    catch {
-        return '*';
-    }
+    return parseAndVerifyCashierUrl(url).origin;
 }
 export class CashierBootstrapper {
     constructor(container, config = {}, onReady) {
         this.origin = '*';
         this.ready = false;
         this.onReady = onReady;
-        const host = config.properties?.host;
-        if (!host) {
-            throw new Error('Cashier host is required to bootstrap the iframe');
+        const environment = config.properties?.environment;
+        if (!environment) {
+            throw new Error('Cashier environment is required to bootstrap the iframe');
         }
+        this.host = resolveHost(environment);
         this.fullConfig = {
             requestParams: { ...config.requestParams },
             properties: {
                 ...config.properties,
-                host,
-                cashierPath: normalizePath(config.properties?.cashierPath),
+                environment,
                 iframe: {
                     width: '100%',
                     height: '100%',
@@ -129,10 +142,7 @@ export class CashierBootstrapper {
     }
     async bootstrapIframe() {
         const fp = await generateFingerprint();
-        if (fp) {
-            this.fullConfig.requestParams.fingerprint = fp;
-        }
-        const src = buildIframeUrl(this.fullConfig.properties.host, this.fullConfig.properties.cashierPath ?? '/cashier', this.fullConfig.requestParams);
+        const src = buildIframeUrl(this.host, this.fullConfig.requestParams, fp);
         this.origin = getOriginFromUrl(src);
         if (this.iframe) {
             this.iframe.src = src;

package/dist/types.d.ts

@@ -8,13 +8,14 @@ export interface CashierRequestParams {
     sessionId?: string;
     predefinedAmounts?: number[];
     layout?: string;
-    fingerprint?: string;
+    transactionType?: string;
 }
+export type CashierEnvironment = 'production' | 'uat';
 /**
  * Bootstrap properties configuration
  */
 export interface BootstrapProperties {
-    host: string;
+    environment: CashierEnvironment;
     /**
      * Selector or element where HTML should be rendered
      * Default: 'body' (replaces entire body)
@@ -69,10 +70,6 @@ export interface CashierIframeProperties extends BootstrapProperties {
      * Optional DOM container (selector or element) where the iframe is appended.
      */
     container?: string | HTMLElement;
-    /**
-     * Path to the cashier page. Default: '/cashier'.
-     */
-    cashierPath?: string;
     /**
      * Iframe tuning options (dimensions, attributes).
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morefin/cashier-bootstrapper",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "Bootstrap service for initializing cashier payment page data from API",
   "main": "dist/index.js",
   "module": "dist/index.js",