@thenextgateway / cashier.sdk

浏览器SDK，用于嵌入和与TNG出纳通信。

开始使用

安装

npm install @thenextgateway/cashier.sdk @thenextgateway/core

使用

的新实例来使用收银员 TNGCashier 并传递应该呈现出纳员iframe的容器元素的ID、出纳员参数和一个配置对象。

保持对已创建实例的引用。收银员仍然需要手动初始化，并且实例充当跨帧通信的入口点。

import { TNGCashier } from "@thenextgateway/cashier.sdk";
import { TNG_TRANSACTION_TYPES, type CashierConfig } from "@thenextgateway/core";

const config: Partial<CashierConfig> = {
  iframeOrigin: "https://cashier.example.com",
  transactionType: TNG_TRANSACTION_TYPES.deposit,
  transactionId: "example-transaction-id",
  paymentMethodId: 1,
  amount: "10",
  currency: "EUR",
};

const cashier = new TNGCashier(
  "iframe-container-id",
  {
    instance: "example-instance",
    applicationId: "example-application-id",
  },
  config,
);

await cashier.initialize();

iframeOrigin 在构造时是必需的 TNGCashier． 对于参数, instance 总是必需的。提供至少一个 application 或者 applicationId.

跨帧消息类型

SDK通过浏览器与出纳通信 postMessage 事件。消息类型值的前缀为 tng_ 因此可以将它们与页面上的其他框架消息区分开来。

如果您的应用程序直接侦听出纳消息或向外部发送消息 TNGCashier，使用 CASHIER_MESSAGE_TYPES 和 CROSSFRAME_MESSAGE_TYPES 出口 @thenextgateway/core 而不是硬编码字符串。

设置

收银员参数

配置字段

SDK构造函数接受 Partial<CashierConfig>. iframeOrigin 由SDK立即检查。其他必需的字段在初始化期间由收银员验证，可以在构造函数配置中提供，也可以稍后使用 updateConfig.

初始化和通信方法

主题

收银员允许通过提供自定义CSS样式和CSS变量来进行主题化。

覆盖CSS的能力是无限的(通过 css 方法)，但建议您尝试使用 cssVars 方法获取最需要的覆盖。 这种方法允许设置CSS变量，改变全局调色板和字体，以及覆盖调色板之外的特定元素的颜色。

以下是一个示例，供参考 TNGCssVars 对象，该对象设置当前所有可能的变量。所有字段都是可选的，所有值都是CSS值。 对于按钮覆盖， color 是语义按钮的颜色和 contrast 当该颜色用作填充背景时，用于文本/图标。

{
  "color": {
    "primary": {
      "default": "#f00",
      "light": "#222",
      "dark": "#444",
      "contrast": "#fff"
    },
    "danger": {
      "default": "#ff8c00",
      "light": "#ffa500",
      "dark": "#ff4500",
      "contrast": "#fff"
    },
    "success": {
      "default": "#0000ff",
      "light": "#add8e6",
      "dark": "#00008b",
      "contrast": "#fff"
    },
    "warning": {
      "default": "#ee82ee",
      "light": "#dda0dd",
      "dark": "#9400d3",
      "contrast": "#000"
    },
    "text": {
      "default": "#000",
      "light": "#222",
      "dark": "#444",
      "diffused": "#dadada"
    },
    "background": {
      "default": "#e0ffff",
      "light": "#fff",
      "dark": "#87cefa",
      "diffused": "#dadada"
    },
    "border": {
      "default": "#000",
      "light": "#222",
      "dark": "#444",
      "diffused": "#dadada"
    }
  },
  "font": {
    "base": "arial sans-serif",
    "secondary": "roboto sans-serif",
    "size": {
      "base": "16px",
      "2xs": "10px",
      "xs": "12px",
      "s": "14px",
      "m": "16px",
      "l": "18px",
      "xl": "20px",
      "2xl": "24px",
      "3xl": "32px",
      "4xl": "48px",
      "5xl": "64px"
    },
    "weight": {
      "light": "300",
      "normal": "400",
      "semiBold": "600",
      "bold": "700"
    }
  },
  "override": {
    "field": {
      "label": {
        "color": "darkblue",
        "size": "10px",
        "weight": "900"
      },
      "content": {
        "color": "red",
        "size": "20px",
        "weight": "700"
      },
      "placeholder": {
        "color": "orange"
      },
      "background": {
        "base": "yellow",
        "hover": "lightyellow",
        "active": "orange"
      },
      "validation": {
        "color": "magenta",
        "size": "15px",
        "weight": "100"
      },
      "icon": {
        "color": "darkgreen"
      }
    },
    "button": {
      "primary": {
        "color": "blue",
        "contrast": "yellow",
        "opacity": "1",
        "disabled": {
          "color": "lightgray",
          "contrast": "gray",
          "opacity": "0.5"
        },
        "focus": {
          "color": "darkblue",
          "contrast": "darkred",
          "opacity": "0.9"
        },
        "hover": {
          "color": "lightblue",
          "contrast": "orange",
          "opacity": "0.7"
        }
      }
    },
    "table": {
      "text": {
        "color": "red",
        "size": "30px",
        "weight": "900"
      },
      "border": {
        "color": "darkorange"
      },
      "background": {
        "even": "lightyellow",
        "odd": "lightgreen"
      }
    },
    "scrollbar": {
      "size": "10px",
      "thumb": {
        "color": {
          "base": "blue",
          "hover": "lightblue",
          "active": "darkblue"
        }
      },
      "track": {
        "color": {
          "base": "yellow",
          "hover": "orange",
          "active": "red"
        }
      }
    },
    "step": {
      "method": {
        "tile": {
          "width": "400px"
        }
      }
    }
  }
}