CHECKOUT

一度の連携で、各市場に合ったチェックアウトを。

一度の連携で、都度決済とサブスクリプションに対応。Waffo が各地の決済手段と言語をサポートし、パソコンでもスマートフォンでもスムーズに支払えます。

  • 1回の統合

    単一の統合で、都度購入とサブスクリプション課金の両方に対応します。

  • グローバル対応

    ローカルの言語と決済手段を自動で組み合わせ、越境チェックアウトの手間を減らします。

  • あらゆる画面

    チェックアウトはデスクトップとモバイルのブラウザ向けに設計されているため、顧客は使っている画面で支払えます。

  • メンテナンス不要

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

01 / 2 つの体験

連携方法は2つ。決済機能は共通です。

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

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

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

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

Waffo がホストするページ

02 / 決済手段

決済手段の一覧は、購入者に合わせて変わります

Waffo Checkout は決済モード・地域・通貨・独自のビジネスルールから利用可能な決済手段を動的に決定します。同じチェックアウトでも、市場ごとに違う一覧になります。

この市場で利用可能な手段Indonesia: 12 / 17 件が Waffo カタログに掲載
Indonesia12 / 17 件が Waffo カタログに掲載
  • DANA
  • GoPay
  • OVO
  • ShopeePay
  • QRIS
  • Mandiri
03 / 決済フロー

注文から webhookまで、わかりやすい流れで。

注文の作成から決済の完了まで、購入者が迷わず進める標準フローを Waffo が用意します。

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 カスタマイズ

Waffo のチェックアウトを、自社ブランドのデザインに

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

Checkout customizationSave & Publish
Payment method orderJPN
Payment method nameSort
  • Apple Pay
  • Google Pay
  • BNPL3
  • au PAYAUPAY
  • Over the Counter5
  • Payeasy Online Banking
  • PREPAIDCARD2
  • Credit/Debit Card
Live PreviewStyle changes will be reflected instantlyOne-time Payment
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简体中文zh-Hans-HK
02ไทยth-TH
03Bahasa Indonesiaid-ID
04日本語ja-JP
05Englishen
06その他の対応言語+8
  • Español (México)
    es-MX
  • 한국어
    ko-KR
  • Bahasa Melayu
    ms-MY
  • Polski
    pl-PL
  • Português (Brasil)
    pt-BR
  • Türkçe
    tr-TR
  • Tiếng Việt
    vi-VN
  • 繁體中文
    zh-Hant-TW
06 / 開発と統合

どの連携方法でも、同じ決済機能を

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 で。個人開発者は Pancake から。

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