支払いを受け付ける
オンライン支払いを安全に受け付けます。
支払いフォームを作成するか、構築済みの決済ページを使用して、オンライン決済の受け付けを開始します。
開発者ではない場合
Stripe のノーコードオプションまたは当社パートナーのアプリを使用して、Stripe アカウントのご利用を開始すると、ノーコードでさらに多くのことを実現できます。サードパーティーのプラットフォームを使用してウェブサイトを構築し管理している場合は、プラグインを使用して Stripe Payments を追加できます。
Stripe Checkout を使用して、Stripe がオンラインで提供する決済ページにリダイレクトします。この実装と、Stripe の他の実装タイプとの比較をご覧ください。
まず、Stripe アカウントを登録します。
アプリケーションから Stripe API にアクセスするには、Stripe の公式ライブラリを使用します。
顧客を Stripe Checkout にリダイレクトするクライアント側サーバー側
ウェブサイトにサーバー側のエンドポイントを呼び出す決済ボタンを追加して Checkout セッションを作成します。
既存の顧客の 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 セッションは作成後 24 時間で期限切れとなります。
Checkout セッションを作成したら、レスポンスで返された URL に顧客をリダイレクトします。
決済手段
デフォルトでは、カードとその他の一般的な決済手段が有効になっています。Stripe ダッシュボードで個々の決済手段をオンまたはオフにできます。Checkout では、Stripe は通貨と制限事項を評価して、対応している決済手段を顧客に動的に提示します。
決済手段が顧客にどのように表示されるか確認するには、ダッシュボードで取引 ID を入力するか、または注文金額と通貨を設定します。
決済手段の設定では Apple Pay と Google Pay を有効にすることができます。デフォルトでは、Apple Pay は有効で、Google Pay は無効になっています。ただし、有効になっていても Stripe が除外する場合があります。配送先住所を収集せずに税金の自動計算を有効にした場合、Google Pay は除外されます。
Checkout の Stripe 上のオンラインページでは、Apple Pay や Google Pay を有効にするために実装内容を変更する必要はありません。Stripe は、これらの決済を他のカード決済と同じように処理します。
エンドポイントを確認する
ウェブサーバー (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)
成功ページを表示するクライアント側サーバー側
顧客が決済フォームを無事に送信したら、成功ページを表示することが重要です。この成功ページはお客様のサイトでホストします。
以下のように、最小限の成功ページを作成します。
<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 サマリーセクションには、請求先情報と購入されたアイテムのリストが含まれ、これを使用して手動で注文のフルフィルメントを実行できます。
支払い後のイベントを処理する
顧客が Checkout セッションの支払いを完了すると、Stripe は checkout.session.completed イベントを送信します。ダッシュボードの Webhook ツールを使用するか、Webhook ガイドに従ってこれらのイベントを受信して処理します。これにより、次のアクションがトリガーされます。
- 顧客に注文確認メールを送信します。
- 取引をデータベースに記録します。
- 配送ワークフローを開始します。
顧客がリダイレクトされ、ウェブサイトに戻るのを待たずに、これらのイベントはリッスンできます。Checkout のランディングページからのみフルフィルメントをトリガーする場合、確実性に欠けます。非同期型のイベントをリッスンするようシステムを設定すると、1 回の実装で異なるタイプの決済手段を受け付けられるようになります。
詳しくは、Checkout のフルフィルメントガイドをご覧ください。
Checkout で支払いを回収する際には、以下のイベントを処理します。
| イベント | 説明 | アクション |
|---|---|---|
| checkout.session.completed | 顧客が Checkout セッションを正常に完了すると送信されます。 | 注文確認書を顧客に送信し、注文のフルフィルメントを実行します。 |
| checkout.session.async_payment_succeeded | ACH Direct Debt など、遅延型の決済手段による支払いが成功した場合に送信されます。 | 注文確認書を顧客に送信し、注文のフルフィルメントを実行します。 |
| checkout.session.async_payment_failed | ACH Direct Debt など、遅延型の決済手段による支払いが失敗した場合に送信されます。 | 顧客に失敗を通知して、顧客をオンセッションに戻し、支払いを再試行できるようにします。 |
導入をテストする
Stripe がオンラインで提供する決済フォームの導入をテストするには、以下の手順を使用します。
- Checkout セッションを作成します。
- 次の表の方法を使用して、支払い詳細を入力します。
- カードの有効期限として任意の将来の日付を入力します。
- 任意の 3 桁のセキュリティコードを入力します。
- 請求先の任意の郵便番号を入力します。
- 支払うをクリックします。指定した
success_にリダイレクトされます。url - ダッシュボードに移動し、取引ページで支払いを探します。支払いが成功していると、そのリストに表示されます。
- 支払いをクリックすると詳細が表示され、請求先情報と購入されたアイテムのリストが含まれた Checkout サマリーなどを確認できます。これを使用して注文のフルフィルメントを実行できます。
詳細は、実装のテストをご覧ください。
実装内容をテストするためのその他の情報については、テストをご覧ください。
テストカード
| 番号 | 説明 |
|---|---|
| 支払いが成功し、すぐに処理されます。 | |
| 支払いの成功には 3D セキュア 2 認証が必要です。 | |
常に支払い拒否コード insufficient_ で失敗します。 |
オプション商品および価格を作成する
Checkout Session を作成する前に、商品と価格を事前に設定できます。商品を使用して複数の物理的商品やサービスのレベルを表し、価格を使用して各商品の料金体系を表します。Checkout Session を設定して、チップや寄付を受け付けることや、Pay What You Want の商品やサービスを販売することができます。
たとえば、価格が 20 USD の T シャツ商品を作成できます。これにより、対象商品の詳細を変更せずに価格を更新したり追加したりできるようになります。商品と価格は、Stripe ダッシュボードまたは API で作成できます。商品および価格の仕組みについて、詳細をご確認ください。
作成された価格ごとに ID があります。Checkout Session を作成する際には、価格 ID と数量を参照します。複数の通貨で販売している場合、Price を 多通貨 にします。Checkout は自動的に 顧客の現地通貨を特定し、Price が対応している場合にはその通貨を提示します。
オプション顧客データを事前入力するサーバー側
すでに顧客のメールを収集していて、それを Checkout セッションで事前に入力するには、Checkout セッションの作成時に customer_email を渡します。
オプション支払い方法の詳細を保存するサーバー側
デフォルトでは、Checkout で 1 回限りの支払いに使用した支払い方法を将来の支払いに使用することはできません。
支払い方法を保存し、オフセッションでその支払い方法に請求する
payment_intent_data.setup_future_usage 引数を渡すことで、1 回限りの支払いに使用した支払い方法を保存するように Checkout を設定できます。これは、キャンセル手数料やノーショー手数料などの将来の手数料に使用するために、登録済みの決済手段を取得しなければならない場合に便利です。
subscription モードで Checkout を使用すると、Stripe は決済手段を自動的に保存し、次回以降の支払いにはその決済手段で請求されます。setup_ または subscription のいずれかのモードを使用している顧客用に保存されたカード決済手段は、Checkout の返品購入には表示されません (詳細については以下をご覧ください)。カスタムテキストを使用して、保存された決済情報の使用に関連する規約にリンクすることをお勧めします。
注意
世界の個人情報保護法は複雑かつ曖昧です。setup_future_usage の実装は既存の個人情報の規制に関わる可能性があるため、事前に法務チームや個人情報担当チームに問い合わせることをお勧めします。支払いの詳細を保存することについては、欧州データ保護委員会から発行されたガイダンスをご覧ください。
支払い方法を保存し、Checkout でその支払い方法を事前入力する
デフォルトでは、Checkoutは Link を使用して、顧客に支払い情報を安全に保存して再利用するオプションを提供します。決済手段を自分で管理したい場合は、saved_payment_method_options.payment_method_save を Checkout Sessions の作成時に使用し、顧客に決済手段を保存していただき、Checkout で次回購入時に使用できるようにします。
このパラメーターを payment モードまたは subscription モードで渡すと、今後の購入に備えて顧客が支払い方法を明示的に保存できるようにするためのオプションのチェックボックスが表示されます。顧客がこのチェックボックスをオンにすると、Checkout は allow_redisplay: always を指定して支払い方法を保存します。Checkout はこのパラメーターを使用して、今後の購入で支払い方法を事前入力できるかどうかを判断します。saved_ を使用する場合、支払い方法を保存するために setup_ を渡す必要はありません。
saved_payment_method_options.payment_method_save を使用するには Customer が必要です。新しい顧客を保存するには、Checkout セッションの customer_creation を always に設定します。それ以外の場合、セッションで顧客や決済手段は保存されません。
payment_ が渡されていない場合、または顧客が支払い方法の保存に同意しない場合でも、Checkout は、subscription モードで作成された支払い方法または setup_ を使用して作成された支払い方法を保存します。これらの決済手段の allow_ 値は limited であるため、購入の返品に備えてこれらの決済手段が事前入力されることがなくなり、カードネットワークの規則およびデータ保護規制に準拠できます。これらのモードによって有効になるデフォルトの動作を変更する方法と、allow_ の動作を変更または上書きする方法をご紹介します。
メモ
Checkout を使用してカードやその他の決済手段を保存してオフセッションに請求することはできますが、Checkout では保存したカードのみが事前入力されます。保存したカード情報を事前入力する方法をご紹介します。初回の支払いなしで決済手段を保存するには、Checkout の設定モードを使用します。
保存した決済手段を顧客が削除できるようにする
今後の支払いで再表示されないように、保存された決済手段を顧客が削除できるようにするには、Checkout セッションの作成時に saved_payment_method_options.payment_method_remove を使用します。
有効なサブスクリプションに関連付けられていて、請求書やサブスクリプションの支払い用にデフォルトの決済手段が保存されていない場合、顧客は決済手段を削除できません。
オプションオーソリとキャプチャーを分離するサーバー側
Stripe は 2 段階カード決済をサポートしているため、まずクレジットカードをオーソリし、後で売上をキャプチャーすることができます。Stripe が決済をオーソリすると、カード発行会社が売上を保証し、顧客のクレジットカードに決済金額を保留します。その後、売上をキャプチャーする一定の時間 (カードによって異なります) が設定されます。オーソリの期限が切れる前に決済をキャプチャーしない場合、決済はキャンセルされ、カード発行会社は保留されていた売上を解放します。
Separating authorization and capture is useful if you need to take additional actions between confirming that a customer is able to pay and collecting their payment. For example, if you’re selling stock-limited items, you might need to confirm that an item purchased by your customer using Checkout is still available before capturing their payment and fulfilling the purchase. Accomplish this using the following workflow:
- Stripe が顧客の支払い方法を承認したことを確認します。
- 在庫管理システムを調べ、アイテムがまだあることを確認します。
- 在庫管理システムを更新し、アイテムが購入されたことを反映させます。
- 顧客の支払いをキャプチャーします。
- 購入が成功したかどうかを確認ページで顧客に通知します。
オーソリとキャプチャーを分離するには、Checkout セッションの作成時に、payment_intent_data.capture_method の値を manual に設定します。これにより、Stripe に対して顧客のカードで金額のオーソリのみを行うよう指示します。
キャプチャーされていない支払いをキャプチャーするには、ダッシュボードまたはキャプチャーエンドポイントを使用します。プログラムによる支払いのキャプチャーには、Checkout セッションの際に作成される PaymentIntent へのアクセスが必要です。これは Session (セッション) オブジェクトから取得できます。