skopon-shop

完全解耦的 Skopon Bill 消费端 React 组件库：商品列表 / 详情 / 确认订单 / 支付展示。不依赖管理端 front/，不签发 JWT。

安装

npm install skopon-shop

import 'skopon-shop/style.css'
import {
  SkoponBillProvider,
  ProductList,
  ProductDetail,
  OrderConfirm,
} from 'skopon-shop'

鉴权

由宿主注入客户端 JWT（POST /api/client-jwt/issue 在服务端签发）。SDK 浏览器端不持有 API_KEY。

白名单接口：

• GET /api/store/products、GET /api/store/products/{id}
• GET /api/payment-methods（含 currencies、interactionType）
• POST /api/orders

嵌入示例

function Storefront({ token }: { token: string }) {
  const [view, setView] = useState<'list' | 'detail' | 'confirm'>('list')
  const [productId, setProductId] = useState('')

  return (
    <SkoponBillProvider
      apiBaseUrl="https://bill.example.com"
      token={token}
      currency="CNY"
      onCurrencyChange={(c) => console.log('currency', c)}
      onOrderCreated={(o) => console.log('order', o.uniqueId)}
      onError={(e) => console.error(e)}
    >
      {view === 'list' && (
        <ProductList
          onSelectProduct={(p) => {
            setProductId(p.uniqueId)
            setView('detail')
          }}
        />
      )}
      {view === 'detail' && (
        <ProductDetail
          productUniqueId={productId}
          onCheckout={() => setView('confirm')}
        />
      )}
      {view === 'confirm' && <OrderConfirm productUniqueId={productId} />}
    </SkoponBillProvider>
  )
}

路由由宿主负责；组件不绑定 react-router。

确认订单货币规则

1. GET /api/payment-methods → 网关币种 G + 支付方式。
2. 无 grant 或 G 为空 →「请联系管理员」。
3. 用户币种 C 且 C ∈ G ∩ P → 用 C；否则按 G 顺序取第一个属于商品价格集合 P 的币种；交集为空 →「请联系管理员」。
4. 选 wayCode → 用该项的 interactionType → 下单 → PaymentView：redirect 跳转 / qrcode 二维码。

开发

npm run lint   # tsc
npm run build  # 声明文件 + Vite library (ESM/CJS) + CSS