チェックアウト

連携は​一度。​世界中で​販売。

単発決済もサブスクリプションも、同じ実装で対応。Waffo が各地の決済手段と言語に対応するため、購入者はパソコンでもスマートフォンでもスムーズに支払えます。

  • 一度の連携

    一度の連携で、単発決済とサブスクリプションの両方に対応します。

  • グローバル対応

    購入者の地域に合った言語と決済手段を自動で表示し、海外の購入者が支払いでつまずく場面を減らします。

  • パソコンにもスマホにも対応

    チェックアウトはパソコンとスマートフォンのブラウザ向けに設計されているため、購入者は普段の端末でそのまま支払えます。

  • メンテナンス不要

    新しい決済手段、ページ更新、セキュリティパッチは Waffo チームが対応します。

01 / 2つの連携方法

ホスト型でも​埋め込み型でも、​決済基盤は​共通です。

ホスト型ページを使うか、プロダクト内にチェックアウトを埋め込むかを選べます。どちらも Waffo の決済・サブスクリプション機能を利用でき、フロントエンドをどこまで自社で管理するかを選べます。

ホスト型チェックアウト(Hosted)

Waffo が決済ページ全体をホストします。バックエンドからセッションを作成し、返ってきた安全な URL に購入者をリダイレクトするだけ。決済完了後、購入者は元のサイトに戻ります。

フロントエンド0行カード情報を預からない
  • フロントエンド開発ゼロページの描画、入力検証、エラー処理、3DS 認証はすべて Waffo 側で処理します。バックエンドから API を1本呼ぶだけで済みます。
  • 継続的な自動最適化レイアウト・文言・インタラクションの改善は自動で反映されます。追加の開発は必要ありません。
  • カード情報を自社で扱わないカード情報は Waffo のホスト型ページで直接取得するため、加盟店のシステムを経由しません。
  • メンテナンス不要新しい決済手段、ページ更新、セキュリティパッチは Waffo チームが対応します。

Waffo がホストするページ

02 / 決済手段

一つの​チェックアウトで、​市場ごとに​異なる​決済手段を​表示。

Waffo Checkout は、決済モード・地域・通貨・加盟店が設定したルールに応じて、表示する決済手段を自動で決定します。同じチェックアウトでも、市場ごとに違う一覧になります。

この市場で利用できる決済手段インドネシア: Waffo カタログ掲載の17件中12件を表示
インドネシア
  • DANA
  • GoPay
  • OVO
  • ShopeePay
  • QRIS
  • Mandiri
03 / 決済フロー

購入者には​迷わない​決済フローを。​加盟店には​一元化された​イベント通知を。

購入者はカートから支払い完了まで、寄り道せずに進めます。状態が変わるたびに加盟店のシステムへ Webhook が届くため、発送や消込の処理で状態を推測する必要はありません。

01

注文の作成

購入者がサイトで「決済」を押すと、バックエンドが Payment Session または Subscription を作成します。

  • 一意の注文 ID を発行
  • 金額と通貨をあらかじめ設定
02

チェックアウトの起動

連携方法に応じて、Waffo のホスト型ページへリダイレクトするか、その場でコンポーネントを開きます。

  • 1秒未満での表示を目指して最適化
03

決済手段の選択

選んだ決済手段の地域に合わせて画面の言語が切り替わり、購入者が内容を理解しやすくなります。

  • 決済手段から言語を推定
  • モバイルレイアウトを自動適用
04

認証と支払い

カード入力または QR スキャン。3DS は必要なときだけ実行します。失敗してもページは開いたままで、理由を示して再試行に導きます。

  • 3DS はページ内で完結
  • 失敗理由を平易な言葉で表示
05

結果と通知

購入者には完了画面を表示し、同時に Waffo から加盟店のサーバーへ Webhook を送信して注文状態を同期します。

  • PAYMENT_NOTIFICATION
webhook → your server
POST https://yourstore.com/webhooks/waffo
{
  "eventType": "PAYMENT_NOTIFICATION",
  "paymentRequestId": "req_8Kd2f19",
  "status": "SUCCESS"
}
04 / UI カスタマイズ

チェックアウトを、​自社プロダクトに​なじむデザインに。

ブランドカラー、文字色、角丸、レイアウトはすべて設定で変更できます。デザインごとに実装を作り分ける必要はありません。

チェックアウトのカスタマイズ保存して公開
決済手段の表示順JPN
決済手段名並び順
  • Apple Pay
  • Google Pay
  • BNPL3
  • au PAYau PAY
  • Over the Counter5
  • Payeasy Online Banking
  • PREPAIDCARD2
  • Credit/Debit Card
リアルタイムプレビュースタイルの変更はすぐにプレビューに反映されます単発決済
WStarter credit packArclight AI
$1.00
Price (excl. tax)$0.92
Tax$0.08
Total due today$1.00
Choose payment method
Pay
Secured by Waffo
05 / 多言語対応

チェックアウトは​購入者の​言語で​表示されます。

Waffo Checkout は、①加盟店が指定する locale パラメータ、②購入者のブラウザの言語設定、③IP アドレスの地域、の優先順位で表示言語を決定します。購入者が切り替える必要はありません。

01简体中文
02ไทย
03Bahasa Indonesia
04日本語
05English
06その他の対応言語+8
  • Español (México)
  • 한국어
  • Bahasa Melayu
  • Polski
  • Português (Brasil)
  • Türkçe
  • Tiếng Việt
  • 繁體中文
06 / 開発と連携

連携方​法は​3つ。​機能の​差は​ありません。

Checkout は Waffo の他の決済機能と連携します。連携方法によって変わるのはフロントエンドの管理範囲だけ。利用できる決済機能は共通です。

開発者ドキュメントを見る

単発決済もサブスクリプションも最小限のコードで。セッションを作成し、リダイレクトするだけです。

  • フロントエンド開発は不要
  • 単発決済とサブスクリプションの両方に対応
Hostedserver · @waffo/waffo-node
const waffo = Waffo.fromEnv();

const res = await waffo.order().create({
  paymentRequestId: genRequestId(), // idempotency
  orderAmount: '12.90',
  orderCurrency: 'SGD',
  notifyUrl: 'https://yourstore.com/webhooks/waffo',
  successRedirectUrl: 'https://yourstore.com/paid',
});

// Waffo hosts the page — hand the shopper the link.
redirect(webUrlOf(res.getData().orderAction));

購入体験やデザインを自社で管理したい場合は、SDK またはコンポーネントでチェックアウトを埋め込みます。

  • インライン/ドロワー/モーダル
  • 見た目は自社のコードで制御
Embeddedbrowser · @waffo/checkout-js
const waffo = await loadWaffo(PUBLISHABLE_KEY);

// orderId comes from your own /api/orders route,
// which runs the server snippet above.
const checkout = await waffo.checkout.mount('#pay', {
  orderId,
  appearance: { theme: 'light', layout: 'split' },
  onComplete: ({ status }) => {
    if (status === 'SUCCESS') router.push('/paid');
  },
});

決済やサブスクリプションの作成、状態の照会、通知の受信、チェックアウト挙動の動的制御に使います。

  • セッションとサブスクリプション
  • 注文状態は Webhook で
Webhookserver · order state of record
export async function POST(req: Request) {
  const event = await waffo.webhooks.verify(
    await req.text(),
    req.headers.get('waffo-signature'),
  );

  if (event.eventType === 'PAYMENT_NOTIFICATION') {
    await fulfil(event.paymentRequestId, event.status);
  }

  return new Response(null, { status: 200 });
}

チェックアウトに​関する​よく​ある​ご質問

現在、世界480以上の決済手段に対応しています。個々の購入者に表示される手段は、その地域と加盟店側の設定によって変わります。

はい。PCI DSS など関連する基準に準拠し、機微な決済情報は安全な経路で処理します。

ページは開いたままで失敗理由を表示し、購入者は再試行やカードの変更ができます。よくある原因は、残高不足、カード情報の入力誤り、カード発行会社による承認拒否です。

法人でも、​個人開発者でも。

入口は二つ。プロダクトづくりに専念できるよう、どちらも Waffo が決済を支えます。