支払いを受け付ける
支払いフォームを作成するか、構築済みの決済ページを使用して、オンライン決済の受け付けを開始します。
Stripe Checkout を使用して、Stripe がオンラインで提供する決済ページにリダイレクトします。この実装と、Stripe の他の実装タイプとの比較をご覧ください。
顧客を Stripe Checkout にリダイレクトするクライアント側サーバー側
ウェブサイトにサーバー側のエンドポイントを呼び出す決済ボタンを追加して Checkout セッションを作成します。
<html> <head> <title>Buy cool new product</title> </head> <body> <!-- Use action="/create-checkout-session.php" if your server is PHP based. --> <form action="/create-checkout-session" method="POST"> <button type="submit">Checkout</button> </form> </body> </html>
Checkout セッションは、顧客が支払いフォームにリダイレクトされた際に表示される内容をプログラムで示したものです。以下のようなオプションを使用して設定できます。
- 請求するラインアイテム
- 使用する通貨
success_url
を指定する必要もあります。これはお客様のウェブサイト上にあり、支払い完了後に Checkout が顧客を戻すページです。必要に応じて cancel_url
を指定します。このページはお客様のウェブサイト上にあり、決済フローで顧客が決済をキャンセルした場合に戻されるページです。
注
Checkout セッションは作成後 24 時間で有効期限が切れます。
Checkout セッションを作成したら、レスポンスで返された URL に顧客をリダイレクトします。
注
カード支払いと普及率の高いその他の決済手段は、より多くの顧客を獲得できるようデフォルトで有効になっています。Stripe ダッシュボードから決済手段を有効または無効にできます。決済手段リストには、サポート対象となる決済手段が表示されます。Stripe は、通貨や決済手段の制約、その他のパラメーターを考慮した上でリストを生成します。
Web サーバー (localhost:4242
など) を起動し、次のコマンドを実行して、エンドポイントをテストします。
curl -X POST -is "http://localhost:4242/create-checkout-session" -d ""
端末に次のようなレスポンスが表示されます。
HTTP/1.1 303 See Other Location: https://checkout.stripe.com/c/pay/cs_test_... ...
テストする
これで、顧客を Stripe Checkout にリダイレクトする決済ボタンが機能するようになりました。
- 決済ボタンをクリックします。
- Stripe Checkout 支払いフォームにリダイレクトされます。
構築したシステムが機能しない場合:
- ブラウザーの開発者ツールでネットワークタブを開きます。
- 決済ボタンをクリックし、サーバー側エンドポイント (
POST /create-checkout-session
) に XHR リクエストが送信されたことを確認します。 - リクエストが 200 ステータスを返すことを確認します。
- ボタンクリックリスナー内で
console.log(session)
を使用し、正しいデータが返されたことを確認します。
決済手段が顧客に表示される方法を確認するには、ダッシュボードで取引 ID を入力するか、注文金額と通貨を設定します。
成功ページを表示するクライアント側サーバー側
顧客が決済フォームを無事に送信したら、成功ページを表示することが重要です。この成功ページはお客様のサイトでホストします。
以下のように、最小限の成功ページを作成します。
<html> <head><title>Thanks for your order!</title></head> <body> <h1>Thanks for your order!</h1> <p> We appreciate your business! If you have any questions, please email <a href="mailto:orders@example.com">orders@example.com</a>. </p> </body> </html>
次に、この新しいページを使用するように Checkout セッション作成エンドポイントを更新します。
注
成功ページのカスタマイズをご希望の場合、成功ページをカスタマイズするを参照してください。
テストする
- 決済ボタンをクリックします。
- テストカード情報を使用して支払い情報を入力します。
- カード番号として
4242 4242 4242 4242
を入力します。 - カードの有効期限として任意の将来の日付を入力します。
- 任意の 3 桁のセキュリティーコードを入力します。
- 請求先の任意の郵便番号を入力します。
- カード番号として
- 支払う をクリックします。
- 新しい成功ページにリダイレクトされます。
次に、Stripe ダッシュボードで新しい支払いを探します。成功した支払いは、ダッシュボードの支払いリストに表示されます。支払いをクリックすると、その支払いの詳細ページに移動します。Checkout サマリーセクションには、請求先情報と購入されたアイテムのリストが含まれ、これを使用して手動で注文のフルフィルメントを実行できます。
導入をテストする
Stripe がオンラインで提供する決済フォームの導入をテストするには、以下の手順を使用します。
- Checkout セッションを作成します。
- 次の表の方法を使用して、支払い詳細を入力します。
- カードの有効期限として任意の将来の日付を入力します。
- 任意の 3 桁のセキュリティコードを入力します。
- 請求先の任意の郵便番号を入力します。
- 支払うをクリックします。指定した
success_url
にリダイレクトされます。 - ダッシュボードに移動して、支払いページで対象の支払いを探します。支払いが成功した場合は、このリストに表示されます。
- 支払いをクリックすると詳細が表示され、請求先情報と購入されたアイテムのリストが含まれた Checkout サマリーなどを確認できます。これを使用して注文のフルフィルメントを実行できます。
詳細は、実装のテストをご覧ください。
実装内容をテストするためのその他の情報については、テストをご覧ください。
テストカード
番号 | 説明 |
---|---|
支払いが成功し、すぐに処理されます。 | |
支払いの成功には 3D セキュア 2 認証が必要です。 | |
常に支払い拒否コード insufficient_funds で失敗します。 |
Apple Pay および Google Pay
決済手段設定で Apple Pay と Google Pay を有効にすることができます。Apple Pay はデフォルトで有効になっています。
Checkout の Stripe がホストするページでは、Apple Pay や Google Pay を有効にするために実装内容を変更する必要はありません。これらの支払いは、ほかのカード支払いと同じように処理されます。
以上で、基本的な組み込みが機能するようになりました。次に、顧客が支払うたびにプログラムで通知を受け取る方法をご覧ください。