支払い中に支払い詳細を保存する

支払いを受け付け、将来の購入に備えて顧客の支払い詳細を保存する方法をご紹介します。

Stripe Checkout を使用すると、ローコードでの素早い実装が可能であり、顧客は将来の購入に備えて支払いの詳細を保存できるようになります。

Stripe を設定する
サーバー側

まず、Stripe アカウントを登録します。

アプリケーションから Stripe API にアクセスするには、Stripe の公式ライブラリを使用します。

顧客を作成する
サーバー側

将来の支払いに備えてカードを設定するには、カードを Customer (顧客) に関連付ける必要があります。顧客がビジネスでアカウントを作成する際に、Customer オブジェクトを作成します。Customer オブジェクトを使用すると、支払い方法を再利用したり、複数の支払いを追跡したりできます。

作成に成功すると、Customer オブジェクトが返されます。オブジェクトで顧客の id を調べて、その値を後で取得できるようにデータベースに保存できます。

これらの顧客は、ダッシュボードの顧客ページで見つけることができます。

Checkout セッションを作成する
クライアント側
サーバー側

ウェブサイトにサーバー側のエンドポイントを呼び出す決済ボタンを追加して Checkout セッションを作成します。

checkout.html
<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 が顧客を戻すウェブサイト上のページの URL 値を設定します。オプションで、顧客が決済プロセスを完了前に終了した場合に、Checkout が顧客を戻すウェブサイト上のページの cancel_url 値を指定することもできます。

注

Checkout Sessions expire 24 hours after creation by default.

Checkout セッションを作成したら、レスポンスで返された URL に顧客をリダイレクトします。

Payment methods

By default, Stripe enables cards and other common payment methods. You can turn individual payment methods on or off in the Stripe Dashboard. In Checkout, Stripe evaluates the currency and any restrictions, then dynamically presents the supported payment methods to the customer.

To see how your payment methods appear to customers, enter a transaction ID or set an order amount and currency in the Dashboard.

You can enable Apple Pay and Google Pay in your payment methods settings. By default, Apple Pay is enabled and Google Pay is disabled. However, in some cases Stripe filters them out even when they’re enabled. We filter ApplePay if you set setup_future_usage (either top-level or in payment_method_options for card), and we filter Google Pay if you enable automatic tax without collecting a shipping address.

Checkout’s Stripe-hosted pages don’t need integration changes to enable Apple Pay or Google Pay. Stripe handles these payments the same way as other card payments.

Confirm your endpoint

ウェブサーバー (localhost:4242 など) を起動し、次のコマンドを実行して、エンドポイントがアクセス可能であることを確認します。

Command Line
curl -X POST -is "http://localhost:4242/create-checkout-session" -d ""

端末に次のようなレスポンスが表示されます。

Command Line
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) を使用し、正しいデータが返されたことを確認します。

オンラインで提供される Checkout システムの設定とテストについて詳しくは、決済を受け付けるをご覧ください。

支払い方法を保存する
サーバー側

オンラインで提供される Checkout システムを設定した後、顧客が使用する支払い方法を保存するために、システムの設定を選択します。

デフォルトでは、Checkout で 1 回限りの支払いに使用した支払い方法を将来の支払いに使用することはできません。

支払い方法を保存し、オフセッションでその支払い方法に請求する

You can set Checkout to save payment methods used to make a one-time payment by passing the payment_intent_data.setup_future_usage argument. This is useful if you need to capture a payment method on-file to use for future fees, such as cancellation or no-show fees.

If you use Checkout in subscription mode, Stripe automatically saves the payment method to charge it for subsequent payments. Card payment methods saved to customers using either setup_future_usage or subscription mode don’t appear for return purchases in Checkout (more on this below). We recommend using custom text to link out to any relevant terms regarding the usage of saved payment information.

注意

Global privacy laws are complicated and nuanced. We recommend contacting your legal and privacy team prior to implementing setup_future_usage because it might implicate your existing privacy compliance framework. Refer to the guidance issued by the European Protection Board to learn more about saving payment details.

支払い方法を保存し、Checkout でその支払い方法を事前入力する

By default, Checkout uses Link to provide your customers with the option to securely save and reuse their payment information. If you prefer to manage payment methods yourself, use saved_payment_method_options.payment_method_save when creating a Checkout Session to let your customers save their payment methods for future purchases in Checkout.

このパラメーターを payment モードまたは subscription モードで渡すと、今後の購入に備えて顧客が支払い方法を明示的に保存できるようにするためのオプションのチェックボックスが表示されます。顧客がこのチェックボックスをオンにすると、Checkout は allow_redisplay: always を指定して支払い方法を保存します。Checkout はこのパラメーターを使用して、今後の購入で支払い方法を事前入力できるかどうかを判断します。saved_payment_method_options.payment_method_save を使用する場合、支払い方法を保存するために setup_future_usage を渡す必要はありません。

Using saved_payment_method_options.payment_method_save requires a Customer. To save a new customer, set the Checkout Session’s customer_creation to always. Otherwise, the session doesn’t save the customer or the payment method.

If payment_method_save isn’t passed in or if the customer doesn’t agree to save the payment method, Checkout still saves payment methods created in subscription mode or using setup_future_usage. These payment methods have an allow_redisplay value of limited, which prevents them from being prefilled for returning purchases and allows you to comply with card network rules and data protection regulations. Learn how to change the default behavior enabled by these modes and how to change or override allow_redisplay behavior.

注

You can use Checkout to save cards and other payment methods to charge them off-session, but Checkout only prefills saved cards. Learn how to prefill saved cards. To save a payment method without an initial payment, use Checkout in setup mode.

注