Checkout 移行ガイド
レガシーバージョンの Checkout では、顧客にモーダルダイアログを表示し、そこでカード情報を収集して、お客様のウェブサイトにトークンまたはソースを返していました。これに対して現行バージョンの Checkout は、Stripe がオンラインで提供する洗練された決済ページで、支払いやサブスクリプションを作成します。Apple Pay、動的な 3D セキュア、およびその他多くの機能に対応しています。
現行バージョンの Checkout は柔軟性に優れ、動的なラインアイテム、Connect、Customer オブジェクトの再利用、および高度なサブスクリプション機能に対応できます。お客様が素早く簡単に使用を開始したい場合や、よりシンプルな商品カタログをすでにお持ちの場合は、クライアント側のみの組み込みも使用できます。
レガシーバージョンから現行バージョンに移行するには、お客様のビジネスモデルに最もよく適合するガイドを使用してください。各ガイドでは、推奨される組み込みパスがサンプルコードとともに示されています。
大規模な商品カタログを所有している場合や、動的に生成されるラインアイテム (寄付や税金など) への対応が必要な場合。
SaaS プロバイダとしてユーザに請求を行い、高度な機能への対応が必要な場合。
サービスプロバイダと顧客をつなぐマーケットプレイスを運営している場合。
アフターサービスの提供後に顧客に請求を行うビジネスを運営している場合。
数点の商品を事前設定済みの価格で販売している場合。
SaaS プロバイダとして、月額のサブスクリプションプランを提供している場合。
関連する移行ガイドに従う際に、Checkout の新旧 2 つのバージョン間での特定のパラメータおよび設定オプションのマッピングを示した変換表を参照することもできます。
動的な商品カタログおよび料金体系
金額やラインアイテムが動的に決定される商品を販売している場合 (大規模な商品カタログを所有していたり、寄付を目的とする場合など) は、1 回限りの支払いの受け付けをご覧ください。
レガシーバージョンの Checkout では、クライアント側でトークンまたはソースを作成し、それをサーバに渡して支払いを作成していました。現行バージョンの Checkout ではこのフローは逆になり、サーバ側でセッションを作成し、その ID をクライアントに渡し、顧客を Checkout にリダイレクトします。支払いが成功すると、顧客はお客様のアプリケーションに再度リダイレクトされます。
移行前
レガシーバージョンの Checkout では、動的な金額と明細を表示して、顧客からカード情報を収集していました。
<form action="/purchase" method="POST"> <script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-key=
data-name="Custom t-shirt" data-description="Your custom designed t-shirt" data-amount="{{ORDER_AMOUNT}}" data-currency="usd"> </script> </form>"pk_test_TYooMQauvdEDq54NiTphI7jx"
次に、生成されたトークンやソースをサーバに送信し、それに請求していました。
移行後
現行バージョンの Checkout では、最初にサーバで Checkout セッションを作成します。
注
Stripe が提供するいずれかのクライアントライブラリを使用している場合、Checkout Sessions API を使用するには最新バージョンのライブラリにアップグレードしてください。
次に、クライアントにセッション ID を渡して顧客を Checkout にリダイレクトし、支払いを完了します。
const stripe = Stripe(
); 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`. });'pk_test_TYooMQauvdEDq54NiTphI7jx'
支払いを完了すると、顧客は success_url
にリダイレクトされます。
支払い後に購入された商品のフルフィルメントを実行する必要がある場合は、Checkout による購入のフルフィルメントをご覧ください。
動的なサブスクリプション
動的に決定されるサブスクリプションサービスを提供している場合や、その他の高度な機能のサポートが必要な場合は、サブスクリプションの設定をご覧ください。
レガシーバージョンの Checkout では、クライアント側でトークンまたはソースを作成し、それをサーバに渡して支払いを作成していました。現行バージョンの Checkout ではこのフローは逆になり、サーバー側でセッションを作成し、その ID をクライアントに渡し、顧客を Checkout にリダイレクトします。支払いが成功すると、顧客はお客様のアプリケーションに再度リダイレクトされます。
移行前
レガシーバージョンの Checkout では、サブスクリプション情報を表示して、顧客からカード情報を収集していました。
<form action="/subscribe" method="POST"> <script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-key=
data-name="Gold Tier" data-description="Monthly subscription with 30 days trial" data-amount="2000" data-label="Subscribe"> </script> </form>"pk_test_TYooMQauvdEDq54NiTphI7jx"
次に、生成されたトークンやソースをサーバに送信し、顧客およびサブスクリプションを作成していました。
移行後
現行バージョンの Checkout では、最初にサーバで Checkout セッションを作成します。
注
Stripe が提供するいずれかのクライアントライブラリを使用している場合、Checkout Sessions API を使用するには最新バージョンのライブラリにアップグレードしてください。
次に、クライアントにセッション ID を渡して顧客を Checkout にリダイレクトし、支払いを完了します。
const stripe = Stripe(
); 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`. });'pk_test_TYooMQauvdEDq54NiTphI7jx'
顧客とサブスクリプションが作成されると、顧客が success_url
にリダイレクトされます。
支払い後に、購入されたサービスのフルフィルメントを実行する必要がある場合は、Checkout による購入のフルフィルメントをご覧ください。
また、Checkout を使用してサブスクリプション情報を更新することもできます。
Connect プラットフォームとマーケットプレイス
お客様が Connect プラットフォームまたはマーケットプレイスを運営していて、連結アカウントに関連する支払いを作成する場合には、現行バージョンの Checkout を使用することを検討してください。組み込みを移行するには、Connect のガイドの手順に従ってください。
以下の例は、Checkout Sessions API を使用したダイレクト支払いの処理について説明したものです。デスティネーション支払いの作成方法の詳細は、Connect のガイドを参照してください。
移行前
レガシーバージョンの Checkout では、クライアント側で顧客からカード情報を収集していました。
<form action="/purchase" method="POST"> <script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-key=
data-name="Food Marketplace" data-description="10 cucumbers from Roger's Farm" data-amount="2000"> </script> </form>"pk_test_TYooMQauvdEDq54NiTphI7jx"
次に、生成されたトークンやソースをサーバに送信し、連結アカウントに代わって請求を行っていました。
移行後
現行バージョンの Checkout では、連結アカウントに代わって最初にサーバで Checkout セッションを作成します。
注
Stripe が提供するいずれかのクライアントライブラリを使用している場合、Checkout Sessions API を使用するには最新バージョンのライブラリにアップグレードしてください。
次に、クライアントにセッション ID を渡して顧客を Checkout にリダイレクトし、支払いを完了します。Stripe.js を初期化する際には必ず連結アカウントの ID を指定してください。
// Initialize Stripe.js with the same connected account ID used when creating // the Checkout Session. const stripe = Stripe(
, { stripeAccount:'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`. });'{{CONNECTED_ACCOUNT_ID}}'
支払いを完了すると、顧客は success_url
にリダイレクトされます。
支払い後に、購入された商品またはサービスのフルフィルメントを実行する必要がある場合は、Checkout による購入のフルフィルメントをご覧ください。
将来の利用に備えて支払い方法を保存する
顧客に対して即時請求を行わないサービスを提供している場合は、将来の支払いを設定するをご覧ください。
レガシーバージョンの Checkout では、クライアント側でトークンまたはソースを作成し、それをサーバに渡して支払いを作成していました。現行バージョンの Checkout ではこのフローは逆になり、サーバー側でセッションを作成し、その ID をクライアントに渡し、顧客を Checkout にリダイレクトします。支払いが成功すると、顧客はお客様のアプリケーションに再度リダイレクトされます。
移行前
レガシーバージョンの Checkout では、支払い情報を表示して、顧客からカード情報を収集していました。
<form action="/subscribe" method="POST"> <script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-key=
data-name="Cleaning Service" data-description="Charged after your home is spotless" data-amount="2000"> </script> </form>"pk_test_TYooMQauvdEDq54NiTphI7jx"
次に、結果として得られたトークンまたはソースをサーバに送信し、最終的に支払いを作成していました。
移行後
現行バージョンの Checkout では、最初に設定モードを使用してサーバで Checkout セッションを作成します。
注
Stripe が提供するいずれかのクライアントライブラリを使用している場合、Checkout Sessions API を使用するには最新バージョンのライブラリにアップグレードしてください。
次に、クライアントにセッション ID を渡して顧客を Checkout にリダイレクトし、支払い方法の詳細を収集します。
const stripe = Stripe(
); 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`. });'pk_test_TYooMQauvdEDq54NiTphI7jx'
フローが完了すると、顧客は success_url
にリダイレクトされます。
その後、お客様は決済フローから Setup Intent を取得し、それを使用して取引を作成します。
固定価格によるシンプルな商品カタログ
固定価格の商品 (T シャツや電子書籍など) を販売している場合は、1 回限りの支払いのガイドを参照して、Web サイトに追加するコードスニペットの生成方法を確認してください。
レガシーバージョンの Checkout では、クライアント側でトークンまたはソースを作成し、それをサーバに渡して支払いを作成していました。現行バージョンの Checkout では自動的に支払いが作成されるため、サーバ側の組み込みは必要ありません。
クライアント側コード
サーバ側コード
以下の変換表は、Checkout の新旧 2 つのバージョン間での設定オプションのマッピングを示しています。現行バージョン用の設定オプションの一覧については、redirectToCheckout
のリファレンスをご覧ください。
シンプルなサブスクリプション
シンプルなサブスクリプションサービス (月額のソフトウェアへのアクセスなど) を提供している場合は、サブスクリプションのガイドを参照して、ダッシュボードでプランを作成し、ウェブサイトに追加するコードスニペットを生成する方法を確認してください。
レガシーバージョンの Checkout では、クライアント側でトークンまたはソースを作成し、それをサーバに渡して顧客とサブスクリプションを作成していました。現行バージョンの Checkout では自動的に顧客とサブスクリプションの両方が作成されるため、サーバ側の組み込みは必要ありません。
クライアント側コード
サーバ側コード
以下の変換表は、Checkout の新旧 2 つのバージョン間での設定オプションのマッピングを示しています。現行バージョン用の設定オプションの一覧については、redirectToCheckout
のリファレンスをご覧ください。
パラメータの変換
現行バージョンの Checkout は、レガシーバージョンの Checkout のほぼすべての機能に対応していますが、両バージョンが同じ API を共有しているわけではありません。以下の表は、レガシーバージョンと現行バージョンのパラメータおよび設定オプションの対応関係を示しています。
現行バージョンの Checkout で利用できる設定オプションの一覧については、Stripe.js リファレンスおよび API リファレンスの Checkout セッションをご覧ください。
レガシーバージョン | 現行バージョン | 組み込みのヒント |
---|---|---|
allowRememberMe |
| 現行バージョンの Checkout では「サインイン情報を保存」はサポートされません。既存の顧客を再利用するには、Checkout Session (Checkout セッション) の作成時に customer パラメータを指定することをお勧めします。 |
amount |
| 合計金額は Checkout に渡すラインアイテムの合計です。 |
billingAddress |
| Checkout は、不正使用の防止または規制への準拠を目的として要求されたときに、請求先住所を自動的に収集します。このパラメータを required に設定すると、請求先住所が常に収集されます。 |
billingAddress |
| Checkout は、不正使用の防止または規制への準拠を目的として要求されたときに、請求先住所を自動的に収集します。このパラメータを required に設定すると、請求先住所が常に収集されます。 |
closed |
| 顧客が Checkout を閉じるときに、ブラウザタブを閉じるか、cancelUrl に移動します。 |
currency |
| |
description |
| 価格を指定すると、Checkout は支払いの発生頻度についての記述を自動的に計算して表示します。Session.line_items を指定すると、Checkout は各ラインアイテムの name を表示します。 |
email |
| 顧客のメールアドレスがすでにわかっている場合、ここで指定しておくと顧客が再度入力する必要がなくなります。 |
image |
| Checkout はお客様のビジネスのブランディングと、販売する商品用に専用の画像を使用します。Checkout はデフォルトでビジネス名の横にビジネスロゴを表示し、ビジネスアイコンにフォールバックします。 |
key |
| |
locale |
| Checkout セッションの作成時に、サポート対象のロケールを指定できます。 |
name |
| 価格を指定した場合、Checkout はその価格と関連付けられている商品の名前を表示します。Session.line_items を指定した場合、Checkout は各ラインアイテムの name を表示します。 |
panelLabel |
| Checkout はお客様が販売するアイテムに合わせて、ボタンの文字を自動的にカスタマイズします。1 回限りの支払いの場合は、submit_type を使用してボタンの文字をカスタマイズします。 |
shippingAddress |
| 配送先の allowed_countries の配列を渡すことにより、配送先住所情報を収集します。 |
token または source |
| 今後は、支払い完了時の JavaScript でコールバックは実行されません。顧客は別のページで支払いを実行するので、successUrl を設定して、支払いの完了後に顧客をリダイレクトします。 |
zipCode |
| 不正使用の防止または規制への準拠を目的として要求される場合、Checkout は郵便番号を自動的に収集します。 |