コンテンツにスキップ
アカウントを作成
または
サインイン
Stripe ドキュメントのロゴ
/
AI に質問する
アカウントを作成
サインイン
始める
支払い
財務の自動化
プラットフォームおよびマーケットプレイス
資金管理
開発者向けのツール
始める
支払い
財務の自動化
始める
支払い
財務の自動化
プラットフォームおよびマーケットプレイス
資金管理
概要すべての商品を確認する
構築を開始する
開発の開始
    開発環境を設定
    最初の API リクエストを送信
    決済を受け付ける
    新機能の構築とテスト
    本番環境開始のチェックリスト
サンプルプロジェクト
API について
Build with LLMs
ノーコードで Stripe を使用する
Stripe を設定する
アカウントを作成する
ウェブダッシュボード
モバイルダッシュボード
Stripe に移行
不正利用のリスク管理
不正利用について
Radar の不正防止
不審請求の申請の管理
本人確認
ホーム始めるStart developing

注

このページはまだ日本語ではご利用いただけません。より多くの言語で文書が閲覧できるように現在取り組んでいます。準備が整い次第、翻訳版を提供いたしますので、もう少しお待ちください。

支払いを受け付ける

オンライン支払いを安全に受け付けます。

ページをコピー

支払いフォームを作成するか、構築済みの決済ページを使用して、オンライン決済の受け付けを開始します。

Stripe Checkout を使用して、Stripe がオンラインで提供する決済ページにリダイレクトします。この実装と、Stripe の他の実装タイプとの比較をご覧ください。

Checkout のプレビュー

実装作業

ローコード

システム構築のタイプ

Stripe がオンラインで提供する決済ページにリダイレクトする

UI のカスタマイズ

カスタマイズは限定的

試してみる

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

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

Command Line
Ruby
# Available as a gem sudo gem install stripe
Gemfile
Ruby
# If you use bundler, you can add this line to your Gemfile gem 'stripe'

顧客を Stripe Checkout にリダイレクトする
クライアント側
サーバー側

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

You can also create a Checkout Session for an existing customer, allowing you to prefill Checkout fields with known contact information and unify your purchase history for that customer.

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 に顧客をリダイレクトします。

Ruby
# This example sets up an endpoint using the Sinatra framework. # Watch this video to get started: https://youtu.be/8aA9Enb8NVc. require 'json' require 'sinatra' require 'stripe' # Set your secret key. Remember to switch to your live secret key in production. # See your keys here: https://dashboard.stripe.com/apikeys Stripe.api_key =
'sk_test_BQokikJOvBiI2HlWgH4olfQ2'
post '/create-checkout-session' do session = Stripe::Checkout::Session.create({ line_items: [{ price_data: { currency: 'usd', product_data: { name: 'T-shirt', }, unit_amount: 2000, }, quantity: 1, }], mode: 'payment', # These placeholder URLs will be replaced in a following step. success_url: 'https://example.com/success', cancel_url: 'https://example.com/cancel', }) redirect session.url, 303 end

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 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 にリダイレクトする決済ボタンが使用できるようになりました。

  1. 決済ボタンをクリックします。
  2. Stripe Checkout 支払いフォームにリダイレクトされます。

構築したシステムが機能しない場合:

  1. ブラウザの開発者ツールでネットワークタブを開きます。
  2. 決済ボタンをクリックし、サーバー側エンドポイント (POST /create-checkout-session) に XHR リクエストが送信されたことを確認します。
  3. リクエストが 200 ステータスを返すことを確認します。
  4. ボタンクリックリスナー内で console.log(session) を使用し、正しいデータが返されたことを確認します。

成功ページを表示する
クライアント側
サーバー側

顧客が決済フォームを無事に送信したら、成功ページを表示することが重要です。この成功ページはお客様のサイトでホストします。

以下のように、最小限の成功ページを作成します。

success.html
<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 セッション作成エンドポイントを更新します。

Command Line
cURL
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]"=T-shirt \ -d "line_items[0][price_data][unit_amount]"=2000 \ -d "line_items[0][quantity]"=1 \ -d mode=payment \ --data-urlencode success_url="http://localhost:4242/success.html" \ --data-urlencode cancel_url="http://localhost:4242/cancel.html"

注

成功ページのカスタマイズをご希望の場合、成功ページをカスタマイズするを参照してください。

テストする

  1. 決済ボタンをクリックします。
  2. テストカード情報を使用して支払い情報を入力します。
    • カード番号として 4242 4242 4242 4242 を入力します。
    • カードの有効期限として任意の将来の日付を入力します。
    • 任意の 3 桁のセキュリティーコードを入力します。
    • 請求先の任意の郵便番号を入力します。
  3. 支払う をクリックします。
  4. 新しい成功ページにリダイレクトされます。

次に、Stripe ダッシュボードで新しい支払いを探します。成功した支払いは、ダッシュボードの支払いリストに表示されます。支払いをクリックすると、その支払いの詳細ページに移動します。Checkout サマリーセクションには、請求先情報と購入されたアイテムのリストが含まれ、これを使用して手動で注文のフルフィルメントを実行できます。

支払い後のイベントを処理する

Stripe sends a checkout.session.completed event when a customer completes a Checkout Session payment. Use the Dashboard webhook tool or follow the webhook guide to receive and handle these events, which might trigger you to:

  • Send an order confirmation email to your customer.
  • Log the sale in a database.
  • Start a shipping workflow.

Listen for these events rather than waiting for your customer to be redirected back to your website. Triggering fulfillment only from your Checkout landing page is unreliable. Setting up your integration to listen for asynchronous events allows you to accept different types of payment methods with a single integration.

Learn more in our fulfillment guide for Checkout.

Handle the following events when collecting payments with the Checkout:

Event説明Action
checkout.session.completedSent when a customer successfully completes a Checkout Session.Send the customer an order confirmation and fulfill their order.
checkout.session.async_payment_succeededSent when a payment made with a delayed payment method, such as ACH direct debt, succeeds.Send the customer an order confirmation and fulfill their order.
checkout.session.async_payment_failedSent when a payment made with a delayed payment method, such as ACH direct debt, fails.Notify the customer of the failure and bring them back on-session to attempt payment again.

導入をテストする

Stripe がオンラインで提供する決済フォームの導入をテストするには、以下の手順を使用します。

  1. Checkout セッションを作成します。
  2. 次の表の方法を使用して、支払い詳細を入力します。
    • カードの有効期限として任意の将来の日付を入力します。
    • 任意の 3 桁のセキュリティコードを入力します。
    • 請求先の任意の郵便番号を入力します。
  3. 支払うをクリックします。指定した success_url にリダイレクトされます。
  4. ダッシュボードに移動し、取引ページで支払いを探します。支払いが成功していると、そのリストに表示されます。
  5. 支払いをクリックすると詳細が表示され、請求先情報と購入されたアイテムのリストが含まれた Checkout サマリーなどを確認できます。これを使用して注文のフルフィルメントを実行できます。

詳細は、実装のテストをご覧ください。

カード番号シナリオテスト方法
カード支払いは成功し、認証は必要とされません。クレジットカード番号と、任意の有効期限、セキュリティコード、郵便番号を使用してクレジットカードフォームに入力します。
カード支払いには認証が必要です。クレジットカード番号と、任意の有効期限、セキュリティコード、郵便番号を使用してクレジットカードフォームに入力します。
カードは、insufficient_funds などの拒否コードで拒否されます。クレジットカード番号と、任意の有効期限、セキュリティコード、郵便番号を使用してクレジットカードフォームに入力します。
UnionPay カードは、13 ~ 19 桁の可変長です。クレジットカード番号と、任意の有効期限、セキュリティコード、郵便番号を使用してクレジットカードフォームに入力します。

実装内容をテストするためのその他の情報については、テストをご覧ください。

テストカード

番号説明
支払いが成功し、すぐに処理されます。
支払いの成功には 3D セキュア 2 認証が必要です。
常に支払い拒否コード insufficient_funds で失敗します。

オプション商品および価格を作成する

オプション顧客データを事前入力する
サーバー側

オプション支払い方法の詳細を保存する
サーバー側

オプションオーソリとキャプチャーを分離する
サーバー側

オプション顧客のアカウントの管理
コーディング不要

参照情報

  • 割引を追加する
  • 税金を徴収する
  • 納税者番号を収集する
  • 配送先住所を追加する
  • ブランディングをカスタマイズする
  • 成功ページをカスタマイズする
このページはお役に立ちましたか。
はいいいえ
お困りのことがございましたら 、サポートにお問い合わせください。
早期アクセスプログラムにご参加ください。
変更ログをご覧ください。
ご不明な点がございましたら、お問い合わせください。
LLM ですか?llms.txt を読んでください。
Powered by Markdoc
Code quickstart
関連ガイド
Elements Appearance API
その他の決済シナリオ
カードの仕組み
使用製品
Payments
Elements
Checkout