コンテンツにスキップ
アカウント作成/サインイン
Stripe ドキュメントのロゴ
/
アカウントを作成サインイン
概要構築済みのシステムをアップグレード
オンライン決済
概要ユースケースを見つけるManaged Payments を使用する
対面決済
決済手段
決済シナリオ
決済以外の機能

メモ

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

支払いを受け付ける

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

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

税金、割引、配送料などを管理する Stripe Elements と Checkout セッションを実装して、お客様のウェブサイトに決済ページを構築します。

顧客の場所
サイズ
テーマ
レイアウト
Google Pay または Apple Pay ウォレットのいずれかが関連付けられた有効カードがある場合、このデモでは対応するウォレットのみが表示されます。

サーバを設定する
サーバー側

はじめに、Stripe アカウントを登録する必要があります。

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

Command Line
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
# Available as a gem
sudo gem install stripe
Gemfile
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

Checkout セッションを作成する
サーバー側

Checkout セッションを作成してその Client Secret をフロントエンドに返すエンドポイントを、サーバーに追加します。Checkout セッションは、顧客が 1 回限りの購入またはサブスクリプションの支払いを行う際のセッションを表します。Checkout セッションは作成後 24 時間で期限切れとなります。

server.ts
TypeScript
Node.js
Ruby
PHP
Python
Go
.NET
Java
No results
import express, {Express} from 'express';

const app: Express = express();

app.post('/create-checkout-session', async (req: Express.Request, res: Express.Response) => {
  const session = await stripe.checkout.sessions.create({
    line_items: [
      {
        price_data: {
          currency: 'usd',
          product_data: {
            name: 'T-shirt',
          },
          unit_amount: 2000,
        },
        quantity: 1,
      },
    ],
    mode: 'payment',
    ui_mode: 'custom',
    // The URL of your payment completion page
    return_url: 'https://example.com/return?session_id={CHECKOUT_SESSION_ID}'
  });

  res.json({checkoutSessionClientSecret: session.client_secret});
});

app.listen(3000, () => {
  console.log('Running on port 3000');
});

フロントエンドを設定する
クライアント側

Stripe.js スクリプトをチェックアウトページに含めるには、このスクリプトを HTML ファイルの head に追加します。常に js.stripe.com から Stripe.js を直接読み込むことにより、PCI への準拠が維持されます。スクリプトをバンドルに含めたり、そのコピーを自身でホストしたりしないでください。

Ensure you’re on the latest Stripe.js version by including the following script tag <script src=“https://js.stripe.com/clover/stripe.js”></script>. Learn more about Stripe.js versioning.

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/clover/stripe.js"></script>
</head>

メモ

Stripe は、Stripe.js をモジュールとして読み込むために使用できる npm パッケージを提供しています。GitHub のプロジェクトをご覧ください。バージョン 7.0.0 以降が必要です。

stripe.js を初期化します。

checkout.js
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe(
  
'pk_test_TYooMQauvdEDq54NiTphI7jx'
,
);

Checkout を初期化する
クライアント側

Client Secret を解決する clientSecret プロミスを作成するか、機密事項として直接設定します。initCheckout を呼び出し、clientSecret を渡します。initCheckout は、Checkout インスタンスに解決するプロミスを返します。

Checkout オブジェクトは、決済画面の基盤として機能し、決済セッションのデータやセッションを更新するためのメソッドを含みます。

actions.getSession() によって返されるオブジェクトには、価格情報が含まれます。セッションの total と lineItems を UI で読み込んで表示することをお勧めします。

これにより、最小限のコード変更で新機能を有効にできます。たとえば、手動通貨価格を追加しても、total を表示する場合、UI を変更する必要はありません。

checkout.js
const clientSecret = fetch('/create-checkout-session', {method: 'POST'})
  .then((response) => response.json())
  .then((json) => json.checkoutSessionClientSecret);
const checkout = stripe.initCheckout({clientSecret});
const loadActionsResult = await checkout.loadActions();
if (loadActionsResult.type === 'success') {
  const session = loadActionsResult.actions.getSession();
  const checkoutContainer = document.getElementById('checkout-container');
  checkoutContainer.append(JSON.stringify(session.lineItems, null, 2));
  checkoutContainer.append(document.createElement('br'));
  checkoutContainer.append(`Total: ${session.total.total.amount}`);
}
index.html
<div id="checkout-container"></div>

顧客のメールアドレスを収集する
クライアント側

顧客のメールアドレスを収集するためのメールアドレス入力を作成します。顧客が入力を完了してメールアドレスを検証し、保存したら、updateEmail を呼び出します。

決済フォームのデザインに応じて、次の方法で updateEmail を呼び出すことができます。

  • 支払いの送信の直前。また、updateEmail を呼び出して、早い段階 (ぼかしの入力時など) で検証することもできます。
  • 次のステップに進む前 (フォームが複数のステップからなる場合の保存ボタンのクリック時など)。
index.html
<input type="text" id="email" />
<div id="email-errors"></div>
checkout.js
const checkout = stripe.initCheckout({clientSecret});
const loadActionsResult = await checkout.loadActions();

if (loadActionsResult.type === 'success') {
  const {actions} = loadActionsResult;
  const emailInput = document.getElementById('email');
  const emailErrors = document.getElementById('email-errors');

  emailInput.addEventListener('input', () => {
    // Clear any validation errors
    emailErrors.textContent = '';
  });

  emailInput.addEventListener('blur', () => {
    const newEmail = emailInput.value;
    actions.updateEmail(newEmail).then((result) => {
      if (result.error) {
        emailErrors.textContent = result.error.message;
      }
    });
  });
}

支払い情報を収集する
クライアント側

Payment Element を使用して、クライアントで支払い情報を収集します。Payment Element は、さまざまな決済手段で支払い情報の収集を簡略化する事前構築済みの UI コンポーネントです。

まず、コンテナーの DOM 要素を作成して、Payment Element をマウントします。次に、checkout.createPaymentElement を使用して Payment Element のインスタンスを作成し、element.mount を呼び出してマウントし、CSS セレクターまたはコンテナーの DOM 要素を指定します。

index.html
<div id="payment-element"></div>
checkout.js
const paymentElement = checkout.createPaymentElement();
paymentElement.mount('#payment-element');

対応しているオプションについては、Stripe.js のドキュメント をご覧ください。

フロントエンドで Checkout を初期化するときに elementsOptions.appearance を渡すことで、すべての Elements のデザインをカスタマイズできるようになります。

支払いを送信する
クライアント側

Checkout インスタンスから 確定 を呼び出す支払う ボタンをレンダリングして、決済を送信します。

index.html
<button id="pay-button">Pay</button>
<div id="confirm-errors"></div>
checkout.js
const checkout = stripe.initCheckout({clientSecret});
const loadActionsResult = await checkout.loadActions();

if (loadActionsResult.type === 'success') {
  const {actions} = loadActionsResult;
  const button = document.getElementById('pay-button');
  const errors = document.getElementById('confirm-errors');
  button.addEventListener('click', () => {
    // Clear any validation errors
    errors.textContent = '';

    actions.confirm().then((result) => {
      if (result.type === 'error') {
        errors.textContent = result.error.message;
      }
    });
  });
}

構築したシステムをテストする

  1. 決済ページに移動します。
  2. 次の表の決済手段を使用して、支払いの詳細を入力します。カード支払いの場合:
    • カードの有効期限として任意の将来の日付を入力します。
    • 任意の 3 桁のセキュリティコードを入力します。
    • 請求先の任意の郵便番号を入力します。
  3. Stripe に支払いを送信します。
  4. ダッシュボードに移動し、取引ページで支払いを探します。支払いが成功していると、そのリストに表示されます。
  5. 支払いをクリックすると、請求先情報や購入したアイテムのリストなどの詳細が表示されます。この情報を使用して注文のフルフィルメントを実行できます。
カード番号シナリオテスト方法
カード支払いは成功し、認証は必要とされません。クレジットカード番号と、任意の有効期限、セキュリティコード、郵便番号を使用してクレジットカードフォームに入力します。
カード支払いには認証が必要です。クレジットカード番号と、任意の有効期限、セキュリティコード、郵便番号を使用してクレジットカードフォームに入力します。
カードは、insufficient_funds などの拒否コードで拒否されます。クレジットカード番号と、任意の有効期限、セキュリティコード、郵便番号を使用してクレジットカードフォームに入力します。
UnionPay カードは、13 ～ 19 桁の可変長です。クレジットカード番号と、任意の有効期限、セキュリティコード、郵便番号を使用してクレジットカードフォームに入力します。

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

オプション製品および価格の作成

Checkout セッションを作成する前に、商品と価格を事前に設定できます。商品を使用して複数の物理的商品やサービスのレベルを表し、価格を使用して各商品の料金体系を表します。

たとえば、価格が 20 USD の T シャツ商品を作成できます。これにより、対象商品の詳細を変更せずに価格を更新したり追加したりできるようになります。商品と価格は、Stripe ダッシュボードまたは API で作成できます。商品および価格の仕組みについて、詳細をご確認ください。

API で Product (商品) を作成するのに必要なのは name のみです。指定した商品の name、description、および images が Checkout に表示されます。

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/products \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d name=T-shirt

次に、Price (価格) を作成して商品の価格を定義します。これには商品コストと使用通貨が含まれます。

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/prices \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d product=
"{{PRODUCT_ID}}"
 \
  -d unit_amount=2000 \
  -d currency=usd

作成された価格ごとに ID があります。Checkout Session を作成する際には、価格 ID と数量を参照します。複数の通貨で販売している場合、Price を 多通貨 にします。Checkout は自動的に 顧客の現地通貨を特定し、Price が対応している場合にはその通貨を提示します。

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/checkout/sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d ui_mode=custom \
  -d mode=payment \
  -d "line_items[0][price]"={{PRICE_ID}} \
  -d "line_items[0][quantity]"=1 \
  --data-urlencode return_url="https://example.com/return?session_id={CHECKOUT_SESSION_ID}"

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

すでに顧客のメールを収集していて、それを Checkout セッションで事前に入力するには、Checkout セッションの作成時に customer_email を渡します。

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/checkout/sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  --data-urlencode customer_email="customer@example.com" \
  -d ui_mode=custom \
  -d mode=payment \
  -d "line_items[0][price]"={{PRICE_ID}} \
  -d "line_items[0][quantity]"=1 \
  --data-urlencode return_url="https://example.com/return?session_id={CHECKOUT_SESSION_ID}"

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

今後の購入に備えて支払いを受け付け、顧客の支払い情報を保存する方法をご紹介します。

オプションCheckout Session の変更をリッスンする

Checkout Session の変更をリッスンする

checkout.on を使用して change イベントにイベントリスナーを追加することで、Checkout Session への変更をリッスンできます。

checkout.js
checkout = stripe.initCheckout({
  clientSecret: promise,
  elementsOptions: { appearance },
});

checkout.on('change', (session) => {
  // Handle changes to the checkout session
});

オプション請求先住所と配送先住所を収集する

請求先住所を収集する

デフォルトでは、Checkout セッションは Payment Element を通じて支払いに必要な最小限の請求情報を収集します。

Billing Address Element を使用する

Billing Address Element を使用して、完全な請求先住所を収集できます。

まず、Checkout セッションの作成時に billing_address_collection=required を渡します。

コンテナーの DOM 要素を作成して、Billing Address Element をマウントします。次に、checkout.createBillingAddressElement を使用して Billing Address Element のインスタンスを作成し、element.mount を呼び出してマウントし、CSS セレクターまたはコンテナーの DOM 要素を指定します。

index.html
<div id="billing-address"></div>
checkout.js
const billingAddressElement = checkout.createBillingAddressElement();
billingAddressElement.mount('#billing-address');

Billing Address Element は、以下のオプションに対応しています。

カスタムフォームを使用する

請求先住所を収集するためのカスタムフォームを作成できます。

  • 決済ページで確認前に個別の住所収集ステップがある場合は、顧客が住所を送信したときに updateBillingAddress を呼び出します。
  • それ以外の場合は、billingAddress を confirm に渡すことで、顧客が「支払う」ボタンをクリックしたときに住所を送信できます。

請求先住所の一部を収集する

国と郵便番号のみなど、請求先住所の一部を収集するには、billing_address_collection=auto を渡します。

請求先住所の一部を収集する場合は、手動で住所を収集する必要があります。デフォルトでは、Payment Element が支払いに必要な最小限の請求情報を自動的に収集します。請求情報が二重に収集されないようにするため、Payment Element の作成時に fields.billingDetails=never を渡します。請求情報の一部 (顧客の名前など) のみを収集する場合は、自分で収集する予定のフィールドにのみ never を渡します。

配送先住所を収集する

顧客の配送先住所を収集するには、Checkout セッションの作成時に shipping_address_collection パラメーターを渡します。

配送先住所を収集するときは、配送先の国も指定する必要があります。2 文字の ISO 国コードの配列を含む allowed_countries プロパティを設定します。

Shipping Address Element の使用方法

Shipping Address Element を使用して、完全な配送先住所を収集できます。

コンテナーの DOM 要素を作成して、Shipping Address Element をマウントします。次に、checkout.createShippingAddressElement を使用して Shipping Address Element のインスタンスを作成し、element.mount を呼び出してマウントし、CSS セレクターまたはコンテナーの DOM 要素を指定します。

index.html
<div id="shipping-address"></div>
checkout.js
const shippingAddressElement = checkout.createShippingAddressElement();
shippingAddressElement.mount('#shipping-address');

Shipping Address Element は、以下のオプションに対応しています。

Checkout Session の変更をリッスンする

住所関連の変更を処理するイベントリスナーを追加して、Checkout Session への変更をリッスンできます。

Session オブジェクトを使用して、決済フォームに配送料を表示します。

index.html
<div>
  <h3> Totals </h3>
  <div id="subtotal" ></div>
  <div id="shipping" ></div>
  <div id="total" ></div>
</div>
checkout.js
const checkout = stripe.initCheckout({clientSecret});
const subtotal = document.getElementById('subtotal');
const shipping = document.getElementById('shipping');
const total = document.getElementById('total');

checkout.on('change', (session) => {
  subtotal.textContent = `Subtotal: ${session.total.subtotal.amount}`;
  shipping.textContent = `Shipping: ${session.total.shippingRate.amount}`;
  total.textContent = `Total: ${session.total.total.amount}`;
});

カスタムフォームを使用する

配送先住所を収集するためのカスタムフォームを作成できます。

  • 決済ページで確認前に個別の住所収集ステップがある場合は、顧客が住所を送信したときに updateShippingAddress を呼び出します。
  • それ以外の場合は、shippingAddress を confirm に渡すことで、顧客が「支払う」ボタンをクリックしたときに住所を送信できます。

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

Stripe は、まずカード支払いをオーソリし、後で売上をキャプチャーするという、2 段階構成のカード支払いに対応しています。Stripe が支払いをオーソリすると、カード発行会社が売上を保証し、支払い金額を顧客のカードで保持します。その後、カードに応じて)一定期間にわたって売上をキャプチャーできます。オーソリが期限切れになる前に支払いをキャプチャーしない場合、支払いはキャンセルされ、カード発行からは保留されていた売上がリリースされます。

オーソリとキャプチャーを分離すると、顧客の支払い能力の確認と支払い回収の間に別のアクションをとる必要がある場合に便利です。たとえば、在庫が限られたアイテムを販売している場合、支払いをキャプチャーして購入をフルフィルメントする前に、Checkout を使用して顧客が購入したアイテムの在庫がまだあることを確認する必要があります。これは、以下のワークフローで実行します。

  1. Stripe が顧客の支払い方法を承認したことを確認します。
  2. 在庫管理システムを調べ、アイテムがまだあることを確認します。
  3. 在庫管理システムを更新し、アイテムが購入されたことを反映させます。
  4. 顧客の支払いをキャプチャーします。
  5. 購入が成功したかどうかを確認ページで顧客に通知します。

オーソリとキャプチャーを分離するには、Checkout セッションの作成時に、payment_intent_data.capture_method の値を manual に設定します。これにより、Stripe に対して顧客のカードで金額のオーソリのみを行うよう指示します。

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
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 mode=payment \
  -d "payment_intent_data[capture_method]"=manual \
  -d return_url={{RETURN_URL}} \
  -d ui_mode=custom

キャプチャーされていない支払いをキャプチャーするには、ダッシュボードまたはキャプチャーエンドポイントを使用します。プログラムによる支払いのキャプチャーには、Checkout セッションの際に作成される PaymentIntent へのアクセスが必要です。これは Session (セッション) オブジェクトから取得できます。

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

カスタマーポータルへのリンクを共有して、顧客が自身のアカウントを管理できるようにします。カスタマーポータルでは、顧客はメールアドレスでログインして、サブスクリプションの管理や決済手段の更新などを行うことができます。

オプション注文のフルフィルメント

顧客が支払いを行ったときにプログラムで通知を受け取る方法をご紹介します。

参照情報

Code quickstart
関連ガイド
Elements Appearance API
その他の決済シナリオ
カードの仕組み