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

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チェックアウトはさまざまなカスタマイズオプションをサポートしています。加盟店は3つの方法で外観と動作を設定できます。

カスタマイズ機能の概要

機能APIパラメータPortal設定SDK初期化
プライマリカラー対応対応対応
背景色対応対応対応
テキストカラー対応対応対応
角丸半径対応対応対応
加盟店ロゴ対応対応-
言語対応-対応
優先順位: APIパラメータ > Portal設定 > SDK初期化 同一機能が複数の方法で設定されている場合、優先度の高い設定が有効になります。

テーマスタイル

cashierAppearance フィールドを使用してチェックアウトのテーマを設定します。4つの変数がサポートされています:
変数説明
colorPrimaryプライマリカラー(ボタン、リンクなど)"#0570de"
colorBackground背景色"#ffffff"
colorTextテキストカラー"#30313d"
borderRadius角丸半径"8px"

方法1: APIパラメータ(取引ごと)

cashierAppearance は値がJSON文字列であるStringフィールドです。内部の引用符はエスケープする必要があります。
{
  "paymentInfo": {
    "productName": "ONE_TIME_PAYMENT",
    "cashierAppearance": "{\"variables\":{\"colorPrimary\":\"#0570de\",\"colorBackground\":\"#ffffff\",\"colorText\":\"#30313d\",\"borderRadius\":\"8px\"}}"
  }
}

方法2: Portal設定(グローバルデフォルト)

加盟店Portalのチェックアウトカスタマイズページでデフォルトテーマを設定します。APIパラメータで上書きされない限り、すべての取引はこの設定を使用します。

方法3: SDK初期化(クライアント側デフォルト)

SDK初期化時にテーマ設定を渡します:
const waffo = new WaffoSDK({
  env: 'production',
  appearance: {
    variables: {
      colorPrimary: '#0570de',
      colorBackground: '#ffffff',
      colorText: '#30313d',
      borderRadius: '8px'
    }
  }
});

加盟店ロゴ

brandInfo.cashierLogoUrl を通じて加盟店ロゴを渡すことで、チェックアウトページにブランドアイデンティティを表示できます。 2つの形式がサポートされています:
形式備考
外部URLhttps:// で始まる加盟店がホスト。推奨サイズ: 40×40 px
Portal事前作成IDlogo_ で始まる加盟店Portalからアップロード後に取得

APIパラメータの例

外部URLを使用する場合:
{
  "brandInfo": {
    "cashierLogoUrl": "https://merchant.com/logo.png"
  }
}
Portalでアップロードしたロゴを使用する場合:
{
  "brandInfo": {
    "cashierLogoUrl": "logo_abc123"
  }
}

言語設定

paymentInfo.cashierLanguage でチェックアウトの言語を設定します(IETF BCP 47形式)。

サポート言語

言語コード言語対応通貨対応国
enEnglishすべてすべて
id-IDBahasa IndonesiaIDRインドネシア
vi-VNTiếng ViệtVNDベトナム
pt-BRPortuguêsBRLブラジル
es-MXEspañol (México)MXNメキシコ
es-PEEspañol (Perú)PENペルー
es-COEspañol (Colombia)COPコロンビア
es-CLEspañol (Chile)CLPチリ
ru-RUРусскийRUBロシア
en-KEEnglish (Kenya)KESケニア
zh-Hant-TW繁體中文 (Taiwan)TWD台湾
zh-Hant-HK繁體中文 (Hong Kong)HKD香港

自動選択ロジック

cashierLanguage が指定されていない場合、Waffoは以下の順で言語を自動選択します:
  1. ユーザーの国に一致する言語
  2. オーダー通貨に関連付けられた言語
  3. en へフォールバック
言語は通貨と国に一致している必要があります。不整合な組み合わせが指定された場合、APIはエラーコード A0026 を返します。

パラメータの例

{
  "paymentInfo": {
    "productName": "ONE_TIME_PAYMENT",
    "cashierLanguage": "id-ID"
  }
}

決済手段のフィルタリング

チェックアウトページに表示される決済手段を制御します。 推奨: payMethodTypepayMethodName を渡さず、チェックアウトに利用可能なすべての決済手段を自動表示させてください。 フィルタリングオプション:
シナリオパラメータ備考
すべての決済手段を表示指定しない最大のカバレッジを得るための推奨設定
カードのみpayMethodType: "CREDITCARD,DEBITCARD"WaffoがBINでカード種別を自動識別
バーチャル口座のみpayMethodType: "VA"ユーザーがチェックアウトページで具体的な銀行を選択
特定のウォレットpayMethodType + payMethodName例: "EWALLET" + "DANA"

payMethodCountryの使用ガイド

payMethodCountry は、チェックアウトを特定の国で利用可能な決済手段に制限します。
グローバルカード(CREDITCARD/DEBITCARD)には payMethodCountry を渡さないでください。クレジットカードとデビットカードは特定の国に紐づきません。このパラメータはローカル決済手段に制限する必要がある場合のみ使用してください。
{
  "paymentInfo": {
    "productName": "ONE_TIME_PAYMENT",
    "payMethodCountry": "IDN"
  }
}