コンテンツにスキップ
アカウントを作成
または
サインイン
Stripe ドキュメントのロゴ
/
アカウントを作成
サインイン
概要構築済みのシステムをアップグレード
オンライン決済
概要ユースケースを見つけるManaged Payments
支払い方法
支払いインターフェイス
決済シナリオ
店頭支払い
他の Stripe プロダクト

Checkout 移行ガイド

Stripe の最新の組み込みに移行する方法をご紹介します。

ページをコピー

レガシーバージョンの Checkout では、顧客にモーダルダイアログを表示し、そこでカード情報を収集して、貴社のウェブサイトにトークンまたはソースを返していました。これに対して、Payment Links と新バージョンの Checkout は、Stripe がオンラインで提供する、支払いまたはサブスクリプションを作成するための洗練された決済ページです。どちらの連携機能も、Apple Pay、Google Pay、動的な 3D セキュア、Connect、既存の顧客の再利用など多くの機能に対応しています。Payment Links や Checkout がユースケースに合わない場合は、他の決済連携を比較することもできます。

はじめに

Stripe の SDK を使用している場合は、最新バージョンにアップグレードしてください。

ビジネスモデルを選択する

レガシーバージョンの Checkout からに移行するには、お客様のビジネスモデルに最もよく適合するガイドを使用してください。各ガイドでは、推奨される組み込みパスがサンプルコードとともに示されています。

関連する移行ガイドに従う際に、特定のパラメータおよび設定オプションのマッピングを示した変換表を参照することもできます。

動的な商品カタログおよび料金体系

金額やラインアイテムが動的に決定される商品を販売している場合 (大規模な商品カタログを所有していたり、寄付を目的とする場合など) は、1 回限りの支払いの受け付けをご覧ください。

レガシーバージョンの Checkout では、クライアント側でトークンまたはソースを作成し、それをサーバに渡して支払いを作成していたかもしれません。現行バージョンの Checkout ではこのフローは逆になります。まずサーバー側でセッションを作成し、顧客を Checkout にリダイレクトします。支払い後に、顧客はお客様のアプリケーションに再度リダイレクトされます。

移行前

レガシーバージョンの Checkout では、動的な金額と明細を表示して、顧客からカード情報を収集していました。

client.html
<form action="/purchase" method="POST">
  <script
    src="https://checkout.stripe.com/checkout.js"
    class="stripe-button"
    data-key=
"pk_test_TYooMQauvdEDq54NiTphI7jx"

    data-name="Custom t-shirt"
    data-description="Your custom designed t-shirt"
    data-amount="{{ORDER_AMOUNT}}"
    data-currency="usd">
  </script>
</form>

次に、生成されたトークンやソースをサーバに送信し、それに請求していました。

Command Line
curl https://api.stripe.com/v1/customers \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "email"="customer@example.com" \
  -d "source"="{{STRIPE_TOKEN}}"
curl https://api.stripe.com/v1/charges \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "description"="Custom t-shirt" \
  -d "amount"="{{ORDER_AMOUNT}}" \
  -d "currency"="usd"

移行後

ウェブサイトにサーバー側のエンドポイントを呼び出す決済ボタンを追加して 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 セッションは、顧客が支払いフォームにリダイレクトされた際に表示される内容をプログラムで示したものです。以下のようなオプションを使用して設定できます。

支払いを完了した後に顧客をリダイレクトするウェブサイト上のページの URL を success_url に含めます。

Command Line
curl https://api.stripe.com/v1/checkout/sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d "line_items[0][price_data][currency]"=usd \
  -d "line_items[0][price_data][product_data][name]"="Custom t-shirt" \
  -d "line_items[0][price_data][unit_amount]"=2000 \
  -d "line_items[0][quantity]"=1 \
  -d mode=payment \
  --data-urlencode success_url="https://example.com/success"

Checkout セッションを作成したら、レスポンスで返された URL に顧客をリダイレクトします。支払い後に購入した商品のフルフィルメントを行う必要がある場合は、Checkout および Payment Link の支払いのフルフィルメントをご覧ください。

動的なサブスクリプション

動的に決定されるサブスクリプションサービスを提供している場合や、その他の高度な機能のサポートが必要な場合は、サブスクリプションの設定をご覧ください。

レガシーバージョンの Checkout では、クライアント側でトークンまたはソースを作成し、それをサーバに渡して支払いを作成していたかもしれません。現行バージョンの Checkout ではこのフローは逆になります。まずサーバー側でセッションを作成し、顧客を Checkout にリダイレクトします。支払いが成功すると、顧客はお客様のアプリケーションに再度リダイレクトされます。

移行前

レガシーバージョンの Checkout では、サブスクリプション情報を表示して、顧客からカード情報を収集していました。

client.html
<form action="/subscribe" method="POST">
  <script
    src="https://checkout.stripe.com/checkout.js"
    class="stripe-button"
    data-key=
"pk_test_TYooMQauvdEDq54NiTphI7jx"

    data-name="Gold Tier"
    data-description="Monthly subscription with 30 days trial"
    data-amount="2000"
    data-label="Subscribe">
  </script>
</form>

次に、生成されたトークンやソースをサーバに送信し、顧客およびサブスクリプションを作成していました。

Command Line
curl https://api.stripe.com/v1/customers \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "email"="customer@example.com" \
  -d "source"="{{STRIPE_TOKEN}}"
curl https://api.stripe.com/v1/subscriptions \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "items[0][price]"="{PRICE_ID}" \
  -d "trial_period_days"=30

移行後

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

checkout.html
<html>
  <head>
    <title>Subscribe to cool new service</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">Subscribe</button>
    </form>
  </body>
</html>

Checkout セッションは、顧客が支払いフォームにリダイレクトされた際に表示される内容をプログラムで示したものです。以下のようなオプションを使用して設定できます。

支払いを完了した後に顧客をリダイレクトするウェブサイト上のページの URL を success_url に含めます。

Command Line
curl https://api.stripe.com/v1/checkout/sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d "line_items[0][price]"=
{{PRICE_ID}}
 \
  -d "line_items[0][quantity]"=1 \
  -d "subscription_data[trial_period_days]"=30 \
  -d mode=subscription \
  --data-urlencode success_url="https://example.com/success"

Checkout セッションを作成したら、レスポンスで返された URL に顧客をリダイレクトします。顧客とサブスクリプションが作成されると、顧客は success_url にリダイレクトされます。支払い後に購入したサービスのフルフィルメントを行う必要がある場合は、Checkout および Payment Link の支払いのフルフィルメントをご覧ください。

Connect プラットフォームとマーケットプレイス

お客様が Connect プラットフォームまたはマーケットプレイスを運営していて、連結アカウントに関連する支払いを作成する場合には、現行バージョンの Checkout を使用することを検討してください。

以下の例では、Checkout Sessions API を使用したダイレクト支払いの処理について説明しています。また、Checkout と Connect をデスティネーション支払いおよび支払いと送金別方式で使用することもできます。

移行前

レガシーバージョンの Checkout では、クライアント側で顧客からカード情報を収集していました。

client.html
<form action="/purchase" method="POST">
  <script
    src="https://checkout.stripe.com/checkout.js"
    class="stripe-button"
    data-key=
"pk_test_TYooMQauvdEDq54NiTphI7jx"

    data-name="Food Marketplace"
    data-description="10 cucumbers from Roger's Farm"
    data-amount="2000">
  </script>
</form>

次に、生成されたトークンやソースをサーバに送信し、連結アカウントに代わって請求を行っていました。

Command Line
curl https://api.stripe.com/v1/charges \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "source"="{{TOKEN_ID}}" \
  -d "description"="10 cucumbers from Roger\"s Farm" \
  -d "amount"=2000 \
  -d "currency"="usd" \
  -d "application_fee_amount"=200 \
  -H "Stripe-Account: {{CONNECTED_STRIPE_ACCOUNT_ID}}"

移行後

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

checkout.html
<html>
  <head>
    <title>Roger's Farm</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 セッションは、顧客が支払いフォームにリダイレクトされた際に表示される内容をプログラムで示したものです。以下のようなオプションを使用して設定できます。

支払いを完了した後に顧客をリダイレクトするウェブサイト上のページの URL を success_url に含めます。

Command Line
curl https://api.stripe.com/v1/checkout/sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -H "Stripe-Account: 
{{CONNECTED_ACCOUNT_ID}}
" \
  -d "line_items[0][price_data][currency]"=usd \
  --data-urlencode "line_items[0][price_data][product_data][name]"="Cucumbers from Roger's Farm" \
  -d "line_items[0][price_data][unit_amount]"=200 \
  -d "line_items[0][quantity]"=10 \
  -d "payment_intent_data[application_fee_amount]"=200 \
  -d mode=payment \
  --data-urlencode success_url="https://example.com/success"

Checkout セッションを作成したら、レスポンスで返された URL に顧客をリダイレクトします。支払い後に購入した商品またはサービスのフルフィルメントを行う必要がある場合は、Checkout および Payment Link の支払いのフルフィルメントをご覧ください。

将来の利用に備えて支払い方法を保存する

顧客に対して即時請求を行わないサービスを提供している場合は、将来の支払いを設定するをご覧ください。

レガシーバージョンの Checkout では、クライアント側でトークンまたはソースを作成し、それをサーバに渡して今後の使用に備えて保存していたかもしれません。現行バージョンの Checkout ではこのフローは逆になります。まずサーバー側でセッションを作成し、顧客を Checkout にリダイレクトします。支払いが成功すると、顧客はお客様のアプリケーションに再度リダイレクトされます。

移行前

レガシーバージョンの Checkout では、支払い情報を表示して、顧客からカード情報を収集していました。

client.html
<form action="/subscribe" method="POST">
  <script
    src="https://checkout.stripe.com/checkout.js"
    class="stripe-button"
    data-key=
"pk_test_TYooMQauvdEDq54NiTphI7jx"

    data-name="Cleaning Service"
    data-description="Charged after your home is spotless"
    data-amount="2000">
  </script>
</form>

次に、結果として得られたトークンまたはソースをサーバに送信し、最終的に支払いを作成していました。

Command Line
curl https://api.stripe.com/v1/customers \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "email"="customer@example.com" \
  -d "source"="{{STRIPE_TOKEN}}"
curl https://api.stripe.com/v1/charges \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "description"="Cleaning service" \
  -d "amount"="{{ORDER_AMOUNT}}" \
  -d "currency"="usd"

移行後

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

checkout.html
<html>
  <head>
    <title>Cleaning service</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">Subscribe</button>
    </form>
  </body>
</html>

Checkout セッションは、顧客が支払いフォームにリダイレクトされた際に表示される内容をプログラムで示したものです。以下のようなオプションを使用して設定できます。

支払いの設定を完了した後に顧客をリダイレクトするウェブサイト上のページの URL を success_url に含めます。

Command Line
curl https://api.stripe.com/v1/checkout/sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d mode=setup \
  --data-urlencode success_url="https://example.com/success?session_id={CHECKOUT_SESSION_ID}"

Checkout セッションを作成したら、レスポンスで返された URL に顧客をリダイレクトして、決済手段の詳細を収集します。顧客は、フローを完了すると success_url にリダイレクトされます。支払いを回収する準備ができたら、Checkout セッションから SetupIntent を取得し、それを使用して取引を準備します。

固定価格によるシンプルな商品カタログ

固定料金の商品 (T シャツや電子書籍など) を販売している場合は、決済用のリンクに関するガイドをご覧ください。レガシーバージョンの Checkout を使用して、クライアント側でトークンまたはソースを作成し、それをサーバーに渡して請求を作成していた可能性があります。

移行前

レガシーバージョンの Checkout では、金額と明細を表示して、顧客からカード情報を収集していました。

client.html
<form action="/pay" method="POST">
  <script
    src="https://checkout.stripe.com/checkout.js"
    class="stripe-button"
    data-key=
"pk_test_TYooMQauvdEDq54NiTphI7jx"

    data-name="T-shirt"
    data-description="Comfortable cotton t-shirt"
    data-amount="500"
    data-currency="usd">
  </script>
</form>

次に、生成されたトークンやソースをサーバに送信し、顧客および請求を作成していました。

Command Line
curl https://api.stripe.com/v1/customers \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "email"="{{STRIPE_EMAIL}}" \
  -d "source"="{{STRIPE_TOKEN}}"
curl https://api.stripe.com/v1/charges \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "description"="T-shirt" \
  -d "amount"=500 \
  -d "currency"="usd"

移行後

アイテムを表す商品と価格を作成します。次の例では、Product インラインを作成します。これらのオブジェクトは、ダッシュボードで作成することもできます。

Command Line
curl https://api.stripe.com/v1/prices \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d currency=usd \
  -d unit_amount=500 \
  -d "product_data[name]"=T-shirt

商品と価格を使用して、ダッシュボードで決済用のリンク を作成します。リンクを作成したら、購入ボタン をクリックしてデザインを設定し、ウェブサイトにコピーアンドペーストできるコードを生成します。

index.html
<body>
  <h1>Purchase your new kit</h1>
  <!-- Paste your embed code script here. -->
  <script
    async
    src="https://js.stripe.com/v3/buy-button.js">
  </script>
  <stripe-buy-button
    buy-button-id=
'{{BUY_BUTTON_ID}}'

    publishable-key=
"pk_test_TYooMQauvdEDq54NiTphI7jx"

  >
  </stripe-buy-button>
</body>

シンプルなサブスクリプション

シンプルなサブスクリプションサービス (ソフトウェアへの月次アクセスなど) を提供している場合は、決済用のリンクに関するガイドをご覧ください。レガシーバージョンの Checkout を使用して、クライアント側でトークンまたはソースを作成し、それをサーバーに渡して顧客とサブスクリプションを作成していた可能性があります。

移行前

レガシーバージョンの Checkout では、サブスクリプション情報を表示して、顧客からカード情報を収集していました。

client.html
<form action="/subscribe" method="POST">
  <script
    src="https://checkout.stripe.com/checkout.js"
    class="stripe-button"
    data-key=
"pk_test_TYooMQauvdEDq54NiTphI7jx"

    data-name="Gold Tier"
    data-description="Monthly subscription"
    data-amount="2000"
    data-currency="usd"
    data-label="Subscribe">
  </script>
</form>

次に、生成されたトークンやソースをサーバに送信し、顧客およびサブスクリプションを作成していました。

Command Line
curl https://api.stripe.com/v1/customers \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "email"="{{STRIPE_EMAIL}}" \
  -d "source"="{{STRIPE_TOKEN}}"
curl https://api.stripe.com/v1/subscriptions \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "items[][price]"="{PRICE_ID}" \
  -d "items[][quantity]"=1

移行後

サブスクリプションを表す商品と価格を作成します。次の例では、Product インラインを作成します。これらのオブジェクトは、ダッシュボードで作成することもできます。

Command Line
curl https://api.stripe.com/v1/prices \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d currency=usd \
  -d unit_amount=2000 \
  -d "recurring[interval]"=month \
  -d "product_data[name]"="Gold Tier"

商品と価格を使用して、ダッシュボードで決済用のリンク を作成します。リンクを作成したら、購入ボタン をクリックしてデザインを設定し、ウェブサイトにコピーアンドペーストできるコードを生成します。

index.html
<body>
  <h1>Purchase your new kit</h1>
  <!-- Paste your embed code script here. -->
  <script
    async
    src="https://js.stripe.com/v3/buy-button.js">
  </script>
  <stripe-buy-button
    buy-button-id=
'{{BUY_BUTTON_ID}}'

    publishable-key=
"pk_test_TYooMQauvdEDq54NiTphI7jx"

  >
  </stripe-buy-button>
</body>

パラメータの変換

現行バージョンの Checkout は、レガシーバージョンの Checkout のほとんどの機能に対応していますが、同じAPI を共有しているわけではありません。次の表は、レガシーバージョンと現行バージョンのパラメーターおよび設定オプションの対応関係を示しています。設定オプションの一覧については、Checkout セッション をご覧ください。

レガシーバージョン現行バージョン組み込みのヒント
allowRememberMeサポート対象外Checkout セッションを作成する際に customer パラメーターを指定して、既存の顧客を再利用します。Link を有効にして、顧客が支払い情報を安全に保存し、再利用できるようにすることも可能です。
amountすべての line_items の金額の合計として自動計算されます合計金額は Checkout に渡すラインアイテムの合計です。
billingAddressSession.billing_address_collectionCheckout は、不正使用の防止または規制への準拠を目的として要求されたときに、請求先住所を自動的に収集します。このパラメータを required に設定すると、請求先住所が常に収集されます。
closedcancel_url顧客が Checkout を閉じるときに、ブラウザタブを閉じるか、cancel_url に移動します。
currencySession.currency
descriptionSession.line_items.description または product.description価格を指定すると、Checkout は支払いの発生頻度についての記述を自動的に計算して表示します。Session.line_items を指定すると、Checkout は各ラインアイテムの name を表示します。
emailSession.customer_email顧客のメールアドレスがすでにわかっている場合は、Checkout セッションを作成する際に、customer_email を事前入力できます。

image

ビジネスブランディング: ダッシュボードでブランドロゴまたはアイコンをアップロードします。

商品画像: 各ラインアイテムの画像を product.images で指定します。

Checkout はお客様のビジネスのブランディングと、販売する商品用に専用の画像を使用します。Checkout はデフォルトでビジネス名の横にビジネスロゴを表示し、ビジネスアイコンにフォールバックします。

keyCheckout にパラメータは渡されなくなりました
localeSession.localeCheckout セッションの作成時に、サポート対象のロケールを指定できます。
nameSession.line_items で指定された価格の product.name価格を指定した場合、Checkout はその価格と関連付けられている商品の名前を表示します。Session.line_items を指定した場合、Checkout は各ラインアイテムの name を表示します。
panelLabelsubmit_typeCheckout はお客様が販売するアイテムに合わせて、ボタンの文字を自動的にカスタマイズします。1 回限りの支払いの場合は、submit_type を使用してボタンの文字をカスタマイズします。
shippingAddresssession.shipping_address_collection配送先の allowed_countries の配列を渡すことにより、配送先住所情報を収集します。
token または sourcesuccess_url支払い完了時の JavaScript のコールバックはなくなりました。顧客は別のページで支払いを行っているため、支払い完了後に顧客をリダイレクトするように success_url を設定します。
zipCodeCheckout により自動的に収集されます不正使用の防止または規制への準拠を目的として要求される場合、Checkout は郵便番号を自動的に収集します。

参照情報

このページはお役に立ちましたか。
はいいいえ
お困りのことがございましたら 、サポートにお問い合わせください。
早期アクセスプログラムにご参加ください。
変更ログをご覧ください。
ご不明な点がございましたら、お問い合わせください。
LLM ですか？llms.txt を読んでください。
Powered by Markdoc