Cashier Bootstrapper

Lightweight iframe bootstrapper for the Morefin cashier. It builds the cashier URL from request params and mounts the cashier inside an iframe to keep host styles isolated.

Installation

npm install @morefin/cashier-bootstrapper

Usage

Throughout the examples below, set a host variable once and reuse it:

const CASHIER_HOST = 'http://uat-api.morefin.com'; // change per environment

Basic Embed

import { CashierBootstrapper } from '@morefin/cashier-bootstrapper';

new CashierBootstrapper('#cashier-root', {
  properties: { host: CASHIER_HOST }
});

Custom Request Params and Iframe Options

import { CashierBootstrapper } from '@morefin/cashier-bootstrapper';

new CashierBootstrapper('#cashier-root', {
  requestParams: {
    merchantId: 'merchant-123',
    terminalId: 'terminal-456',
    userId: 'user-789',
    sessionId: 'session-abc',
    predefinedAmounts: [100, 200, 300],
    layout: 'default',
    transactionType: ('deosit'|'withdrawal')
  },
  properties: {
    host: CASHIER_HOST,
    cashierPath: '/cashier',
    iframe: {
      height: '720px',
      minHeight: '640px',
      title: 'Morefin Cashier'
    }
  }
}, api => {
  console.log('Cashier iframe ready', api.iframe);
});

Provide Container via Config

import { CashierBootstrapper } from '@morefin/cashier-bootstrapper';

new CashierBootstrapper(null, {
  properties: {
    host: CASHIER_HOST,
    container: '#cashier-root'
  }
});

Runtime Controls (CSS + Data)

import { CashierBootstrapper } from '@morefin/cashier-bootstrapper';

new CashierBootstrapper('#cashier-root', {
  properties: { host: CASHIER_HOST }
}, api => {
  api.setCss(`
    .payment-layout-root .payment-container {
      border: 2px dashed hotpink;
    }
  `);

  api.updateData({ userId: 'updated-user' });
});

Examples Folder

• examples/npm contains a minimal app that installs the package from npm and bundles it with esbuild.
• src/example-usage.ts contains additional snippets for reference.

API

new CashierBootstrapper(container, config?, onReady?)

Iframe-based embed that loads the cashier URL and exposes runtime controls once ready.

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.
• 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
  • api.pause() / api.resume() – forward pause/resume signals

Types

interface CashierRequestParams {
  merchantId?: string;
  terminalId?: string;
  userId?: string;
  sessionId?: string;
  predefinedAmounts?: number[];
  layout?: string;
  fingerprint?: string;
  transactionType?: string;
}

interface CashierIframeOptions {
  width?: string;
  height?: string;
  minHeight?: string;
  title?: string;
  allow?: string;
  sandbox?: string;
  attributes?: Record<string, string>;
}

interface CashierIframeProperties {
  host: string;
  container?: string | HTMLElement;
  cashierPath?: string;
  iframe?: CashierIframeOptions;
}

interface CashierIframeConfig {
  requestParams?: CashierRequestParams;
  properties?: CashierIframeProperties;
}

Defaults

• cashierPath: /cashier
• 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 *;