跳转到主要内容

Documentation Index

Fetch the complete documentation index at: https://waffo.com/docs/llms.txt

Use this file to discover all available pages before exploring further.

Waffo 提供前端 SDK @waffo/payment-sdk，支持在商户页面内直接集成支付和绑卡功能。

​
安装

npm install @waffo/payment-sdk

​
初始化

import WaffoSDK from '@waffo/payment-sdk';

const sdk = new WaffoSDK('your-client-api-key', {
  env: 'prod',    // 'prod' | 'testing' | 'sandbox'
  locale: 'en'    // 可选，默认 'en'
});

​
功能一览

功能方法说明
绑卡（Card Tokenization）sdk.tokenizationSubmit()安全提交卡片信息，生成 Token
嵌入式收银台WaffoSDK.renderIframe()将 Waffo 收银台以 iframe 嵌入商户页面

​
绑卡（tokenizationSubmit）

将用户卡片信息加密后提交到 Waffo，商户服务器不接触明文卡号。

​
前置步骤

商户后端先调用 Generate API 获取 tokenSessionId。

​
提交卡片

const result = await sdk.tokenizationSubmit('tokenSessionId', {
  tokenData: {
    pan: '4111111111111111',  // 卡号
    name: 'John Doe',         // 持卡人姓名
    expiry: '12/2025',        // 有效期 MM/YYYY
    cvv: '123'                // CVV（可选）
  },
  billingAddress: {            // 可选
    countryCode: 'USA',
    region: 'CA',
    city: 'San Francisco',
    postalCode: '94102',
    address: '123 Main St'
  }
});

​
处理结果

if (result.success) {
  if (result.data.validateUrl) {
    // 需要 3DS 验证，重定向用户
    window.location.href = result.data.validateUrl;
  } else {
    // 绑卡成功，等待 Webhook 获取 tokenId
  }
}
完整流程参见 绑卡与 Token 管理。

​
嵌入式收银台（renderIframe）

将 Waffo 收银台以 iframe 嵌入商户页面，适合不想自建收银台 UI 的商户。 
WaffoSDK.renderIframe({
  // 自定义主题颜色、Logo、Apple Pay 等
});
支持：
  • 自定义主题颜色
  • 自定义 Logo
  • Apple Pay / Google Pay 按钮
  • 多语言

​
其他前端组件

​
Google Pay

在商户网站或 App 中集成 Google Pay 按钮，用户点击后可使用 Google 账户中的信用卡/借记卡完成支付。 支持方式：
  • Web SDK 集成：通过 Waffo Web SDK 在网页中嵌入 Google Pay
  • Android SDK 集成：通过 Google Pay Android SDK 集成
  • 收银台内置：联系 Waffo 在收银台页面启用 Google Pay 按钮
详见 Google Pay 前端集成。

​
Apple Pay

通过 paymentTokenData 参数传入 Apple Pay 加密 token 完成支付。

​
收银台外观定制

通过 paymentInfo.cashierAppearance 参数传入 JSON CSS 变量，定制收银台的主题色、字体等。 通过 paymentInfo.cashierLanguage 参数设置收银台语言（IETF BCP 47 格式，如 en-HK、zh-Hant-HK）。