メインコンテンツへスキップ

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'    // optional, defaults to 'en'
});

機能概要

機能メソッド説明
カードトークン化sdk.tokenizationSubmit()カード情報を安全に送信し、トークンを生成
埋め込み CheckoutWaffoSDK.renderIframe()Waffo の Checkout を iframe として加盟店ページに埋め込む

カードトークン化(tokenizationSubmit)

ユーザーのカード情報を暗号化して Waffo に送信します。加盟店サーバーはカード番号の平文に触れません。

前提条件

加盟店バックエンドで事前に Generate API を呼び出して tokenSessionId を取得する必要があります。

カードの送信

const result = await sdk.tokenizationSubmit('tokenSessionId', {
  tokenData: {
    pan: '4111111111111111',  // Card number
    name: 'John Doe',         // Cardholder name
    expiry: '12/2025',        // Expiry date MM/YYYY
    cvv: '123'                // CVV (optional)
  },
  billingAddress: {            // Optional
    countryCode: 'USA',
    region: 'CA',
    city: 'San Francisco',
    postalCode: '94102',
    address: '123 Main St'
  }
});

結果のハンドリング

if (result.success) {
  if (result.data.validateUrl) {
    // 3DS verification required, redirect the user
    window.location.href = result.data.validateUrl;
  } else {
    // Card binding successful, wait for Webhook to receive tokenId
  }
}
完全なフローは カードバインドとトークン管理 を参照してください。

埋め込み Checkout(renderIframe)

Waffo の Checkout を iframe として加盟店ページに埋め込みます。独自の Checkout UI を構築したくない加盟店に適しています。
WaffoSDK.renderIframe({
  // Customize theme color, logo, Apple Pay, etc.
});
対応項目:
  • カスタムテーマカラー
  • カスタムロゴ
  • Apple Pay / Google Pay ボタン
  • 多言語対応

その他のフロントエンドコンポーネント

Google Pay

加盟店ウェブサイトやアプリ内に Google Pay ボタンを統合します。ユーザーがクリックすると、Google アカウントのクレジット/デビットカードで決済を完了できます。 対応オプション
  • Web SDK 連携:Waffo Web SDK 経由で Google Pay をウェブページに埋め込む
  • Android SDK 連携:Google Pay Android SDK 経由で連携
  • Checkout 組み込み:Waffo に連絡して Checkout ページで Google Pay ボタンを有効化
詳細は Google Pay フロントエンド連携 を参照してください。

Apple Pay

paymentTokenData パラメータを通じて Apple Pay の暗号化トークンを渡し、決済を完了します。

Checkout 外観のカスタマイズ

paymentInfo.cashierAppearance パラメータを通じて JSON の CSS 変数を渡し、Checkout のテーマカラーやフォントなどをカスタマイズします。 paymentInfo.cashierLanguage パラメータを使用して Checkout の言語を設定します(IETF BCP 47 形式、例:en-HKzh-Hant-HK)。