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つの形式がサポートされています:
| 形式 | 値 | 備考 |
|---|
| 外部URL | https:// で始まる | 加盟店がホスト。推奨サイズ: 40×40 px |
| Portal事前作成ID | logo_ で始まる | 加盟店Portalからアップロード後に取得 |
APIパラメータの例
外部URLを使用する場合:
{
"brandInfo": {
"cashierLogoUrl": "https://merchant.com/logo.png"
}
}
Portalでアップロードしたロゴを使用する場合:
{
"brandInfo": {
"cashierLogoUrl": "logo_abc123"
}
}
言語設定
paymentInfo.cashierLanguage でチェックアウトの言語を設定します(IETF BCP 47形式)。
サポート言語
| 言語コード | 言語 | 対応通貨 | 対応国 |
|---|
en | English | すべて | すべて |
id-ID | Bahasa Indonesia | IDR | インドネシア |
vi-VN | Tiếng Việt | VND | ベトナム |
pt-BR | Português | BRL | ブラジル |
es-MX | Español (México) | MXN | メキシコ |
es-PE | Español (Perú) | PEN | ペルー |
es-CO | Español (Colombia) | COP | コロンビア |
es-CL | Español (Chile) | CLP | チリ |
ru-RU | Русский | RUB | ロシア |
en-KE | English (Kenya) | KES | ケニア |
zh-Hant-TW | 繁體中文 (Taiwan) | TWD | 台湾 |
zh-Hant-HK | 繁體中文 (Hong Kong) | HKD | 香港 |
自動選択ロジック
cashierLanguage が指定されていない場合、Waffoは以下の順で言語を自動選択します:
- ユーザーの国に一致する言語
- オーダー通貨に関連付けられた言語
en へフォールバック
言語は通貨と国に一致している必要があります。不整合な組み合わせが指定された場合、APIはエラーコード A0026 を返します。
パラメータの例
{
"paymentInfo": {
"productName": "ONE_TIME_PAYMENT",
"cashierLanguage": "id-ID"
}
}
決済手段のフィルタリング
チェックアウトページに表示される決済手段を制御します。
推奨: payMethodType や payMethodName を渡さず、チェックアウトに利用可能なすべての決済手段を自動表示させてください。
フィルタリングオプション:
| シナリオ | パラメータ | 備考 |
|---|
| すべての決済手段を表示 | 指定しない | 最大のカバレッジを得るための推奨設定 |
| カードのみ | payMethodType: "CREDITCARD,DEBITCARD" | WaffoがBINでカード種別を自動識別 |
| バーチャル口座のみ | payMethodType: "VA" | ユーザーがチェックアウトページで具体的な銀行を選択 |
| 特定のウォレット | payMethodType + payMethodName | 例: "EWALLET" + "DANA" |
payMethodCountryの使用ガイド
payMethodCountry は、チェックアウトを特定の国で利用可能な決済手段に制限します。
グローバルカード(CREDITCARD/DEBITCARD)には payMethodCountry を渡さないでください。クレジットカードとデビットカードは特定の国に紐づきません。このパラメータはローカル決済手段に制限する必要がある場合のみ使用してください。
{
"paymentInfo": {
"productName": "ONE_TIME_PAYMENT",
"payMethodCountry": "IDN"
}
}