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

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.

Checkout は最もシンプルな連携方法です。ユーザーを Waffo ホスト型の決済ページへリダイレクトするだけで、機微なカード情報を取り扱う必要はありません。

​
ワークフロー

1

サーバー側で注文を作成する

決済作成 API を呼び出して、レスポンス内の orderAction（JSON文字列）を取得します。
2

ユーザーをリダイレクトする

orderAction を解析し、actionType に応じて webUrl または deeplinkUrl を使用します。ユーザーは Waffo の Checkout ページで決済を完了します。
3

結果をハンドリングする

  • Webhook（推奨）：Waffo が notifyUrl に決済結果通知を送信します
  • リダイレクト：決済成功時は successRedirectUrl、事前検証失敗または決済失敗時は failedRedirectUrl、ユーザーが決済を中止して継続しない場合は cancelRedirectUrl にリダイレクトされます
  • 能動的な照会：決済照会 API を呼び出します
リダイレクトはユーザーが加盟店サイトに戻ったことを示すに過ぎず、決済成功を意味するものではありません。必ず Webhook または能動的な照会結果を信頼してください。

​
Checkout URL を取得する

orderAction は JSON 文字列です。先に解析し、actionType に応じて URL を選択します： 
const orderAction = JSON.parse(response.data.orderAction);
const checkoutUrl = orderAction.actionType === 'DEEPLINK'
  ? orderAction.deeplinkUrl
  : orderAction.webUrl;

​
決済手段の事前設定

  • WeChat Pay: 本番環境でWeChat Payを有効化する場合は、事前に本番ドメインをWaffoへ提出してください。Waffoが決済チャネル側に申請します。

​
iframe 埋め込み時の注意事項

Waffo Checkout を iframe 内に埋め込む場合、以下に注意してください：

​
必須設定

  • allow="payment" 属性：iframe タグには allow="payment" を含める必要があります。含めない場合、Android 端末で Google Pay などの決済手段が動作しません。
  • Referrer Policy：strict-origin-when-cross-origin に設定する必要があります。設定しないと WeChat Pay が失敗します。
<head>
  <meta name="referrer" content="strict-origin-when-cross-origin">
</head>

<iframe src="https://cashier.waffo.com/..." allow="payment"></iframe>

​
レスポンシブ幅

固定幅（例：width: 700px）は使用しないでください。異なる端末でコンテンツが見切れます。代わりにレスポンシブレイアウトを使用してください： 
.checkout-container {
  overflow: scroll;
  height: calc(100vh - 40px);
}

​
既知の制限事項

  • Apple Pay：ネイティブの Apple Pay は同一オリジンポリシーの制約により iframe 内では使用できません。H5 ページだけでなく PC の iframe 埋め込みも影響を受けます。**Waffo はこのシナリオ向けに JS SDK ソリューションを提供できます。利用前にドメインを Waffo へ事前申請してください。**App WebView はこの iframe 制限の影響を受けません。
  • JKOPAY：iframe 読み込みに対応していません。
  • モバイル：iframe に固定サイズが設定されていると、モバイル上で PC の横向きページとして表示されないか確認してください。
  • 決済手段または決済手段タイプごとの制限については、決済手段別の連携注意事項を参照してください。

​
window.open 埋め込み時の注意事項

window.open で Checkout を開く場合：
  • 同期呼び出しは問題なし：クリックイベントハンドラー内で window.open() を直接呼び出す場合は問題なく動作します。
  • 非同期呼び出しはブロックされる：await の後に window.open() を呼び出すと、ブラウザはポップアップをブロックします。回避策：先に window.open() で空のウィンドウを開いてから、非同期に取得した URL を代入する。または確認ダイアログを表示し、ユーザーがクリックして手動で開けるようにする。
  • Apple モバイル：ユーザージェスチャーの検出が厳格で、非同期オープンはほぼ常にブロックされます。

​
App WebView 連携時の注意事項

加盟店アプリが WebView 内で Checkout を読み込む場合：
  • 外部起動機能：App と WebView が外部 App または外部ブラウザページを開けることを確認してください。一部のウォレットは deeplink または外部ページで認可を完了します。これを制限すると決済フローを継続できません。
  • ダウンロードとコピー機能：WebView は既定ではファイルダウンロード、コピー、長押し保存に対応していない場合があります。QR、OTC、銀行振込系の決済手段ではこれらの機能が必要になることがあります。
  • リダイレクト URL の完全性：ネイティブ App と WebView の間で URL を受け渡す場合、URL を書き換えたり query パラメータを削除したりしないでください。一部の決済手段はリダイレクト URL に必須パラメータを追加します。
  • userTerminal：WEB ではなく APP を渡して、アプリ環境向けに最適化されたリダイレクトリンクを受け取ってください。
  • 決済手段固有の制限：PayPay Smart Payment、Google Pay、Apple Pay、JKOPAY など環境ごとの制限については、決済手段別の連携注意事項を参照してください。