支払いの詳細を更新する

まず、Stripe アカウントが必要です。今すぐ登録してください。

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

# Available as a gem
sudo gem install stripe

# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

設定モードのセッションを作成するには、セッション作成時に setup の値を指定して mode パラメータを使用します。セッションの作成に使用できる全パラメータの一覧については、Checkout Session API リファレンスを参照してください。

顧客が Checkout セッションを正常に完了した後でセッション ID にアクセスするための、success_url に {CHECKOUT_SESSION_ID} テンプレート変数を追加します。

最後に、setup_intent_data.metadata ディクショナリを使用して、顧客の既存の Stripe subscription_id を Checkout セッションに渡します。このデータをお客様のサーバーに渡す方法は他にもありますが、このガイドではメタデータを使用します。

curl https://api.stripe.com/v1/checkout/sessions \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "payment_method_types[]"="card" \
  -d "mode"="setup" \
  -d "customer"="cus_FOsk5sbh3ZQpAU" \
  -d "setup_intent_data[metadata][subscription_id]"="sub_8epEF0PuRhmltU" \
  -d "success_url"="https://example.com/success?session_id={CHECKOUT_SESSION_ID}" \
  -d "cancel_url"="https://example.com/cancel"

Checkout では、Stripe の基本的な JavaScript ライブラリである Stripe.js を利用して決済フローを作成します。

npm install @stripe/stripe-js

import {loadStripe} from '@stripe/stripe-js';

const stripe = await loadStripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const checkoutButton = document.getElementById('checkout-button');

checkoutButton.addEventListener('click', () => {
  stripe.redirectToCheckout({
    // Make the id field from the Checkout Session creation API response
    // available to this file, so you can provide it as argument here
    // instead of the {{CHECKOUT_SESSION_ID}} placeholder.
    sessionId: '{{CHECKOUT_SESSION_ID}}'
  })
  // If `redirectToCheckout` fails due to a browser or network
  // error, display the localized error message to your customer
  // using `error.message`.
});

このコードは通常、顧客による支払いボタンのクリックなどの操作をきっかけにして、イベントハンドラにより起動されます。

顧客が Checkout セッションを正常に完了した後に、お客様は Session オブジェクトを取得する必要があります。これは、以下の 2 つの方法で実行できます。

• 非同期: Session オブジェクトを含む checkout.session.completed Webhook を処理します。Webhook の設定の詳細をご覧ください。
• 同期: ユーザーがサイトにリダイレクトされるときに success_url からセッション ID を取得します。セッション ID を使用して、Session オブジェクトを取得します。

curl https://api.stripe.com/v1/checkout/sessions/cs_test_MlZAaTXUMHjWZ7DcXjusJnDU4MxPalbtL5eYrmS2GKxqscDtpJq8QM0k \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:"

顧客が支払いの成功後に必ず success_url に到達するとは限らないため、ドロップオフの許容度に応じて適切な判断をする必要があります。リダイレクトが発生する前に顧客がブラウザータブを閉じることもあります。Webhook を処理することで、システムがこのようなドロップオフの影響を受けずに済みます。

Session オブジェクトの取得後、Checkout セッションの際に作成された SetupIntent の ID である setup_intent キーの値を入手します。SetupIntent は、今後の支払いに備えて顧客の銀行口座情報を設定するために使用されるオブジェクトです。

以下に checkout.session.completed ペイロードの例を示します。

{
  "id": "evt_1Ep24XHssDVaQm2PpwS19Yt0",
  "object": "event",
  "api_version": "2019-03-14",
  "created": 1561420781,
  "data": {
    "object": {
      "id": "cs_test_MlZAaTXUMHjWZ7DcXjusJnDU4MxPalbtL5eYrmS2GKxqscDtpJq8QM0k",
      "object": "checkout.session",
      "billing_address_collection": null,
      "client_reference_id": null,
      "customer": "cus_FOsk5sbh3ZQpAU",
      "customer_email": null,
      "display_items": [],
      "mode": "setup",
      "setup_intent": "seti_1EzVO3HssDVaQm2PJjXHmLlM",
      "submit_type": null,
      "subscription": null,
      "success_url": "https://example.com/success"
    }
  },
  "livemode": false,
  "pending_webhooks": 1,
  "request": {
    "id": null,
    "idempotency_key": null
  },
  "type": "checkout.session.completed"
}

次のステップに備えて setup_intent ID を書き留めておきます。

setup_intent ID を使用して、/v1/setup_intents/:id エンドポイントで SetupIntent オブジェクトを取得します。

curl https://api.stripe.com/v1/setup_intents/seti_1EzVO3HssDVaQm2PJjXHmLlM \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:"

レスポンス例:

{
  "id": "seti_1EzVO3HssDVaQm2PJjXHmLlM",
  "object": "setup_intent",
  "application": null,
  "cancellation_reason": null,
  "client_secret": null,
  "created": 1561420781,
  "customer": "cus_FOsk5sbh3ZQpAU",
  "description": null,
  "last_setup_error": null,
  "livemode": false,
  "metadata": {
    "subscription_id": "sub_8epEF0PuRhmltU"
  },
  "next_action": null,
  "on_behalf_of": null,
  "payment_method": "pm_1F0c9v2eZvKYlo2CJDeTrB4n",
  "payment_method_types": [
    "card"
  ],
  "status": "succeeded",
  "usage": "off_session"
}

customer ID、subscription_id および payment_method ID を次のステップのために書き留めておきます。

支払い方法を以降の請求書で使用する方法は、2 つあります。

• 顧客の invoice_settings.default_payment_method として設定する
• サブスクリプションの default_payment_method として設定する

顧客に invoice_settings.default_payment_method を設定すると、その顧客のそれ以降のすべての請求書が、指定された支払い方法で支払われることになります。

サブスクリプションに default_payment_method を設定すると、そのサブスクリプションのそれ以降の請求書はすべて、指定されたその支払い方法で支払われることになり、関連付けられた顧客に設定された invoice_settings.default_payment_method が上書されます。

顧客に invoice_settings.default_payment_method を設定する

取得した顧客 ID と PaymentMethod ID を使用して、/v1/customers/:id エンドポイントで、顧客に invoice_settings.default_payment_method を設定します。

curl https://api.stripe.com/v1/customers/cus_FOsk5sbh3ZQpAU \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d "invoice_settings[default_payment_method]"=pm_1F0c9v2eZvKYlo2CJDeTrB4n

この顧客の以降の請求書はすべて、設定モードの Checkout セッションで作成された新しい PaymentMethod で請求されます。

サブスクリプションに default_payment_method を設定する

取得したサブスクリプション ID と PaymentMethod ID を使用して、/v1/subscriptions/:id エンドポイントで、サブスクリプションに default_payment_method を設定します。

curl https://api.stripe.com/v1/subscriptions/sub_8epEF0PuRhmltU \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -X "POST" \
  -d "default_payment_method"="pm_1F0c9v2eZvKYlo2CJDeTrB4n"

このサブスクリプションの以降の請求書はすべて、セットアップモードの Checkout セッションで作成された新しい PaymentMethod で請求されます。関連付けられた顧客に設定された invoice_settings.default_payment_method はすべて上書されます。