コンテンツにスキップ
アカウントを作成
または
サインイン
Stripe ドキュメントのロゴ
/
アカウントを作成
サインイン

注

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

支払いを受け付ける

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

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

Redirect to a Stripe-hosted payment page using Stripe Checkout. See how this integration compares to Stripe’s other integration types.

Checkout のプレビュー

実装作業

ローコード

システム構築のタイプ

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

UI のカスタマイズ

カスタマイズは限定的

試してみる

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

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

Command Line
# Available as a gem
sudo gem install stripe
Gemfile
# 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 に顧客をリダイレクトします。

# 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_4eC39HqLyjWDarjtT1zdp7dc'


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 https://api.stripe.com/v1/checkout/sessions \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -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 がオンラインで提供する決済フォームの導入をテストするには、以下の手順を使用します。

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

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

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

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

テストカード

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

以上で、基本的なシステムが機能するようになりました。次に、顧客が支払うたびにプログラムで通知を受け取る方法をご覧ください。

参照情報

このページはお役に立ちましたか。
はいいいえ
お困りのことがございましたら 、サポートにお問い合わせください。
早期アクセスプログラムにご参加ください。
Stripe の製品変更ログを確認してください。
ご不明な点がございましたら、お問い合わせください。
Powered by Markdoc
Code quickstart
このページの内容
顧客を Stripe Checkout にリダイレクトする
Payment methods
Confirm your endpoint
テスト
成功ページを表示する
テストする
導入をテストする
テストカード
参照情報
関連ガイド
Elements Appearance API
その他の決済シナリオ
カードの仕組み
使用製品
Payments
Elements
Checkout