@atomm-developer/generator-material-purchase

Atomm Generator 平台的耗材购买弹窗 SDK，框架无关，支持 Vue / React / 原生 JS 项目通过 <script src> 或 import 引入。

完整接入文档：docs/USAGE.md

安装与使用

CDN（UMD）

<script src="https://static-res.atomm.com/scripts/js/generator-sdk/generator-material-purchase/index.umd.js"></script>
<script>
  GeneratorMaterialPurchase.init({
    generatorId: 'light-sign',
    accessoryType: 'default',
  });
  document.querySelector('#buyBtn').addEventListener('click', () => {
    GeneratorMaterialPurchase.open();
  });
</script>

ESM / npm

import GeneratorMaterialPurchase from '@atomm-developer/generator-material-purchase';

GeneratorMaterialPurchase.init({
  generatorId: 'light-sign',
  accessoryType: 'default',
});
GeneratorMaterialPurchase.open();

API

init(options: {
  generatorId: string;     // 必填
  accessoryType: string;   // 必填
  locale?: 'en' | 'zh';    // 默认 en
  zIndex?: number;         // 默认 9999
  apiBaseUrl?: string;     // 默认 https://xcs-api.xtool.com
  messages?: Record<string, Record<string, string>>;
  onCheckoutSuccess?(url): void;
  onClose?(): void;
  onError?(err): void;
}): void;

open(): Promise<void>;
close(): void;
destroy(): void;

open() 后弹窗会被插入 document.body，固定右侧滑入，宽 320px、满屏高度、带半透明蒙层，点击蒙层或右上角 X 关闭。

鉴权

每次请求都会带上下面两个 header：

• uToken：从 document.cookie.utoken 或 localStorage.utoken 读取
• lang：从 localStorage.LANG_KEY 读取，默认 en

开发

# 在子目录内
pnpm install
pnpm dev        # 启动 demo（http://localhost:5174）
pnpm build      # 构建 dist

# 或在 generator-sdk 根目录
pnpm dev:material-purchase
pnpm build:material-purchase   # 同时把 index.umd.js 复制到 docs/public

Shopify 站点

SDK 内置 8 个 prod 站点（US/CA/EU/UK/FR/DE/JP/AU）的 shopDomain 与 Storefront Token。当前站点选择：优先读 localStorage.xtool_current_shop_name，否则调用 /community/v2/web/ip/location 探测 IP。