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

注

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

顧客が支払いに使用した、その決済手段を保存する

PaymentIntent を確定する際に顧客の決済手段を保存する方法をご紹介します。

Payment Intents API を使用して、購入から支払い詳細を保存します。以下のようなユースケースがあります。

  • 顧客に EC ストアの注文の請求を行い、以降の購入に備えて情報を保存します。
  • 継続支払いの初回の支払いを開始します。
  • 頭金を請求し、情報を保存して後から全額を請求できるようにします。

カード提示取引

Stripe Terminal を介した支払いなどのカード提示取引では、別のプロセスを使用して決済手段を保存します。詳細については、Terminal のドキュメントをご覧ください。

法令遵守

顧客の支払いの詳細を保存する際、適用されるすべての法律、規制、ネットワークの規則に準拠する責任はお客様にあります。これらの要件は通常、以降の購入時の決済フローでの顧客の支払い方法を提示する、顧客がお客様のウェブサイトやアプリを使用していないときに請求するなど、将来に備えて顧客の支払い方法を保存する場合に適用されます。支払い方法の保存をどのように計画しているかを示す規約をウェブサイトやアプリに追加し、顧客が許可できるようにします。

支払い方法を保存する場合、規約に記載された特定の用途にのみ使用できます。顧客がオフラインであるときに支払い方法に請求して、以降の購入に備えたオプションとして保存する場合は、この特定の用途について顧客から明示的に同意を収集する必要があります。たとえば、同意を収集するために「今後の使用に備えて支払い方法を保存する」チェックボックスを使用します。

顧客がオフラインのときに請求するには、規約に以下の内容を含める必要があります。

  • 指定された取引で顧客の代理として単独の支払いまたは一連の支払いを開始することをお客様に許可するという、顧客からお客様への同意
  • 予期される支払い時期と支払い頻度 (たとえば、請求が予定されている分割払いなのか、サブスクリプションの決済なのか、あるいは予定されていないトップアップなのか)。
  • 支払い金額の決定方法
  • 支払い方法をサブスクリプションサービスに使用する場合は、キャンセルに関するポリシー

これらの規約に関する顧客の書面による同意の記録を必ず保管してください。

Stripe を設定する
サーバ側

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

アプリケーションから 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'

Customer の作成
サーバ側

将来の支払いに備えてカードを設定するには、カードを Customer (顧客) に関連付ける必要があります。顧客がビジネスでアカウントを作成する際に、Customer オブジェクトを作成します。Customer オブジェクトを使用すると、支払い方法を再利用したり、複数の支払いを追跡したりできます。

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/customers \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d name="Jenny Rosen" \
  --data-urlencode email="jennyrosen@example.com"

作成に成功すると、Customer オブジェクトが返されます。オブジェクトで顧客の id を調べて、その値を後で取得できるようにデータベースに保存できます。

これらの顧客は、ダッシュボードの顧客ページで見つけることができます。

支払い方法を有効にする

支払い方法の設定を表示して、サポートする支払い方法を有効にします。PaymentIntent を作成するには、少なくとも 1 つは支払い方法を有効にする必要があります。

多くの顧客から決済を受け付けられるよう、Stripe では、カードやその他一般的な決済手段がデフォルトで有効になっていますが、ビジネスや顧客に適した追加の決済手段を有効にすることをお勧めします。プロダクトと決済手段のサポートについては決済手段のサポートを、手数料については料金体系ページをご覧ください。

支払いの作成
サーバ側

注

最初に PaymentIntent を作成せずに Payment Element をレンダリングする場合は、インテントを作成する前に支払いの詳細を収集するをご覧ください。

PaymentIntent (支払いインテント) オブジェクトは、顧客から支払いを回収する意図を示し、支払いプロセス全体を通して請求の実施と状態の変化を追跡します。

PaymentIntent を作成する

サーバーで PaymentIntent を作成します。amount、currency、customerを指定します。最新バージョンの API では、automatic_payment_methods パラメーターの指定は必須ではありません。この機能はデフォルトで有効になっています。setup_future_usage を有効にします。ダッシュボードで設定した決済手段は、Payment Intent に自動的に追加されます。

ダッシュボードを使用しない場合、または決済手段を手動で指定する場合は、payment_method_types 属性 を使用して決済手段を一覧表示することができます。

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d customer=
{{CUSTOMER_ID}}
 \
  -d amount=1099 \
  -d currency=usd \
  -d setup_future_usage=off_session \
  -d "automatic_payment_methods[enabled]"=true

注

支払い額は常に、クライアント側ではなく、信頼性の高い環境であるサーバー側で決定してください。このようにすることで、悪意のある顧客が価格を操作できないようにすることができます。

client secret を取得する

PaymentIntent には、client secret が含まれています。これは、支払いプロセスを安全に完了するためにクライアント側で使用されます。client secret をクライアント側に渡す際は、いくつかの方法を使用できます。

ブラウザーの fetch 関数を使用して、サーバーのエンドポイントから client secret を取得します。この方法は、クライアント側が 1 ページのアプリケーションで、特に React などの最新のフロントエンドフレームワークで構築されている場合に最適です。client secret を処理するサーバーのエンドポイントを作成します。

main.rb
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
get '/secret' do
  intent = # ... Create or retrieve the PaymentIntent
  {client_secret: intent.client_secret}.to_json
end

その後、クライアント側で JavaScript を使用して client secret を取得します。

(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();

支払いの詳細を収集する
クライアント側

Payment Element を使用してクライアント側で支払い詳細を収集します。Payment Element は事前構築された UI コンポーネントであり、さまざまな決済手段の詳細の収集をシンプルにします。

Payment Element には、HTTPS 接続を介して支払い情報を Stripe に安全に送信する iframe が含まれています。一部の支払い方法では、支払いを確定するために別のページにリダイレクトする必要があるため、Payment Element を別の iframe 内に配置しないでください。

iframe の使用を選択し、Apple Pay または Google Pay を受け付ける場合、iframe の allow 属性が "payment *" に設定されている必要があります。

構築済みのシステムを機能させるには、決済ページのアドレスの先頭を http:// ではなく https:// にする必要があります。HTTPS を使用しなくてもシステムをテストできますが、本番環境で決済を受け付ける準備が整ったら、必ず、HTTPS を有効にしてください。

Stripe.js を設定する

Payment Element は Stripe.js の機能として自動的に使用できるようになります。決済ページに Stripe.js スクリプトを含めるには、HTML ファイルの head にスクリプトを追加します。常に js.stripe.com から Stripe.js を直接読み込むことにより、PCI 準拠が維持されます。スクリプトをバンドルに含めたり、そのコピーを自身でホストしたりしないでください。

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

決済ページで以下の JavaScript を使用して、Stripe のインスタンスを作成します。

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'
);

Payment Element を支払いページに追加する

Payment Element を決済ページに配置する場所が必要です。決済フォームで、一意の ID を持つ空の DOM ノード (コンテナー) を作成します。

checkout.html
<form id="payment-form">
  <div id="payment-element">
    <!-- Elements will create form elements here -->
  </div>
  <button id="submit">Submit</button>
  <div id="error-message">
    <!-- Display error message to your customers here -->
  </div>
</form>

前のフォームが読み込まれたら、Payment Element のインスタンスを作成して、それをコンテナーの DOM ノードにマウントします。Elements インスタンスを作成する際に、前のステップからの client secret を options に渡します。

client secret は支払いを完了できるため、慎重に取り扱う必要があります。記録したり、URL に埋め込んだり、当該の顧客以外に漏洩することがないようにしてください。

checkout.js
const options = {
  clientSecret: '{{CLIENT_SECRET}}',
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in a previous step
const elements = stripe.elements(options);

// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');

Payment Element によって動的なフォームが表示され、顧客はここで支払い方法を選択できます。支払い方法ごとに、フォームでは、必要な支払いの詳細のすべてを入力するように顧客に自動的に求めます。

デザインをカスタマイズする

Elements プロバイダーを作成する際に、Appearance (デザイン) オブジェクトを options に渡すことで、サイトのデザインに合わせて Payment Element をカスタマイズできます。

住所を収集

デフォルトでは、Payment Element は必要な請求先住所情報のみを収集します。(たとえば、デジタル商品およびサービスの税金を計算するなどの目的で) 顧客の詳細な請求先住所または配送先住所を収集するには、Address Element を使用します。

Apple Pay マーチャントトークンをリクエストする

Apple Pay の決済を受け付けるよう自社のシステムを構築している場合、マーチャントトークンを返すように Apple Pay インターフェイスを設定して、加盟店が開始する取引 (MIT) を有効にすることをお勧めします。Payment Element で関連するマーチャントトークンのタイプをリクエストします。

オプション決済ページでの Link
クライアント側

Payment Element の Link を使用して、顧客がすばやく購入できるようにします。ログイン済みの顧客がすでに Link を使用している場合、顧客が別のビジネスで Link を使用すると、最初に情報を保存していたかどうかに関係なく情報が自動入力されます。デフォルトの Payment Element システムでは、カードフォームに Link プロンプトが指定されています。Payment Element の Link を管理するには、決済手段の設定に移動します。

購入時に Payment Element で直接 Link を認証または登録する

Link の認証または登録のために顧客のメールアドレスを収集する

導入オプション

Payment Element を使用して Link を導入する方法は 2 つあります。中でも、Stripe は、利用可能な場合、Payment Element に顧客のメールアドレスを渡す方法を推奨しています。これらのオプションから決定する際は、必ず貴社の決済フローの仕組みを考慮してください。

導入オプション決済フロー説明
顧客のメールアドレスを渡す を Payment Element に追加する 推奨
  • 顧客は、購入ページを開く前に (以前のアカウント作成ステップなどで) メールアドレスを入力します。
  • 自社のメールアドレス入力フィールドを使用したい。
顧客のメールアドレスを Payment Element にプログラムで渡します。このシナリオでは、顧客は別の UI コンポーネントではなく、決済フォームで直接 Link の認証を行います。
Payment Element で顧客のメールアドレスを収集する顧客は、決済時に Payment Element で直接、メールアドレスを入力して、Link で認証または Link に登録されます。顧客が Link に登録しておらず、Payment Element でサポートされている支払い方法を選択すると、Link を使用して詳細を保存するように求められます。すでに登録している場合は、Link は支払い情報を自動的に入力します。

オプション顧客の支払い方法を保存および取得する

将来の利用に備えて顧客の決済手段を保存するように Payment Element を設定できます。このセクションでは、決済手段の保存機能を導入する方法を説明しています。Payment Element で以下を実行できます。

  • 買い手に支払い方法を保存することの同意を求める
  • 買い手が同意した場合に支払い方法を保存する
  • 将来の購入時に保存した支払い方法を買い手に表示する
  • 買い手が紛失したカードまたは期限切れのカードを交換するときにそれらのカードを自動的に更新する
Payment Element と保存した決済手段のチェックボックス

決済手段を保存します。

保存された支払い方法が選択された Payment Element

以前に保存した支払い方法を再利用します。

Payment Element で支払い方法の保存機能を有効にする

サーバー側で PaymentIntent を作成するときに、CustomerSession も作成します。その際、Customer ID を指定して、セッションの payment_element コンポーネントを有効にします。有効にする保存済みの決済手段機能を設定します。たとえば、payment_method_save を有効にすると、将来使用できるように支払いの詳細を保存するためのチェックボックスが、顧客に表示されます。

PaymentIntent または Checkout セッションで setup_future_usage を指定して、決済手段を保存するためのデフォルトの動作を上書きできます。これにより、顧客が明示的に保存を選択しなくても、将来の使用に備えて決済手段を自動的に保存できます。

注意

payment_method_remove を有効にして、保存済みの決済手段を買い手が削除できるようにすると、その決済手段を利用しているサブスクリプションに影響します。決済手段を削除すると、PaymentMethod とその Customer の関連付けが解除されます。

server.rb
Ruby
Python
PHP
Node.js
Java
Go
.NET
No results
# 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-intent-and-customer-session' do
  intent = Stripe::PaymentIntent.create({
    amount: 1099,
    currency: 'usd',
    # In the latest version of the API, specifying the `automatic_payment_methods` parameter
    # is optional because Stripe enables its functionality by default.
    automatic_payment_methods: {enabled: true},
    customer: 
{{CUSTOMER_ID}}
,
  })
  customer_session = Stripe::CustomerSession.create({
    customer: 
{{CUSTOMER_ID}}
,
    components: {
      payment_element: {
          enabled: true,
          features: {
            payment_method_redisplay: 'enabled',
            payment_method_save: 'enabled',
            payment_method_save_usage: 'off_session',
            payment_method_remove: 'enabled',
          },
        },
    },
  })
  {
    client_secret: intent.client_secret,
    customer_session_client_secret: customer_session.client_secret
  }.to_json
end

Elements インスタンスはその CustomerSession の client secret を使用して、顧客が保存した支払い方法にアクセスします。CustomerSession の作成時に適切にエラーを処理します。エラーが発生した場合、CustomerSession の client secret はオプションなので、Elements インスタンスに指定する必要はありません。

PaymentIntent と CustomerSession の両方の client secret を使用して、Elements インスタンスを作成します。次に、この Elements インスタンスを使用して Payment Element を作成します。

checkout.js
// Create the CustomerSession and obtain its clientSecret
const res = await fetch("/create-intent-and-customer-session", {
  method: "POST"
});

const {
  customer_session_client_secret: customerSessionClientSecret
} = await res.json();

const elementsOptions = {
  clientSecret: '{{CLIENT_SECRET}}',
  customerSessionClientSecret,
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form, passing the client secret
// and CustomerSession's client secret obtained in a previous step
const elements = stripe.elements(elementsOptions);

// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');

PaymentIntent の確定時に、顧客が支払いの詳細を保存するためのボックスにチェックマークを付けたかどうかに応じて、Stripe.js が PaymentIntent の setup_future_usage および allow_redisplay の設定をコントロールします。

セキュリティコードの再収集を実行する

オプションとして、PaymentIntent の作成時に require_cvc_recollection を指定して、顧客がカードで支払う場合にセキュリティコードの再収集を実行します。

保存した支払い方法の選択内容を検出する

保存した支払い方法を選択したときにコンテンツを動的に制御するには、Payment Element の change イベントをリッスンします。このイベントには、選択した支払い方法の情報が入力されています。

checkout.js
paymentElement.on('change', function(event) {
  if (event.value.payment_method) {
    // Control dynamic content if a saved payment method is selected
  }
})

オプション住所の詳細を収集する
クライアント側

Address Element を使用すると、配送先住所や請求先住所を収集できます。Address Element 用の空の DOM ノードを作成して、Link Authentication Element の後に表示します。

checkout.html
<form id="payment-form">
  <h3>Contact info</h3>
  <div id="link-authentication-element"></div>

  <h3>Shipping</h3>
  <div id="address-element"></div>

  <h3>Payment</h3>
  <div id="payment-element"></div>

  <button type="submit">Submit</button>
</form>

次に、Address Element のインスタンスを作成し、それを DOM ノードにマウントします。

checkout.js
// Customize the appearance of Elements using the Appearance API.
const appearance = { /* ... */ };

// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx'
);

// Create an elements group from the Stripe instance passing in the clientSecret and, optionally, appearance.
const elements = stripe.elements({clientSecret, appearance, loader});

// Create Element instances
const linkAuthenticationElement = elements.create("linkAuthentication");
const addressElement = elements.create("address", {
  mode: 'shipping',
  allowedCountries: ['US']
});
const paymentElement = elements.create("payment");

// Mount the Elements to their corresponding DOM node
linkAuthenticationElement.mount("#link-authentication-element");
addressElement.mount("#address-element");
paymentElement.mount("#payment-element");

Address Element を Payment Element の前に表示します。Payment Element は Address Element によって収集された住所データを動的に検出し、不要なフィールドが非表示にして、必要に応じて追加の請求先住所を収集します。

住所情報を取得する

顧客が支払いを送信すると Address Element から配送先住所が自動的に渡されますが、change イベントを使用してフロントエンドで住所詳細を取得することもできます。ユーザーが Address Element のフィールドを更新するか、保存された住所を選択すると常に、change イベントが送信されます。

addressElement.on('change', (event: AddressChangeEvent) => {
  const address = event.value;
})

配送先住所を事前入力する

defaultValues を使用して住所情報を事前入力し、顧客の決済をスピードアップします。

// Create addressElement with the defaultValues option
const addressElement = elements.create("address", {
  mode: 'shipping',
  defaultValues: {
    name: 'Jane Doe',
    address: {
      line1: '354 Oyster Point Blvd',
      line2: '',
      city: 'South San Francisco',
      state: 'CA',
      postal_code: '94080',
      country: 'US',
    }
  }
});

// Mount the Element to its corresponding DOM node
addressElement.mount("#address-element");

オプションレイアウトをカスタマイズする
クライアント側

決済フローインターフェイスに合わせて Payment Element のレイアウト (アコーディオンまたはタブ) をカスタマイズできます。各プロパティについて、詳細は elements.create をご覧ください。

Payment Element の作成時にレイアウトの type と他のオプションプロパティーを渡すと、レイアウト機能の使用を開始できます。

const paymentElement = elements.create('payment', {
  layout: {
    type: 'accordion',
    defaultCollapsed: false,
    radios: true,
    spacedAccordionItems: false
  }
});

以下の画像は、異なるレイアウト設定を適用した同一 Payment Element の表示を示しています。

3 つの決済フォーム体験

Payment Element のレイアウト

オプションデザインをカスタマイズする
クライアント側

これで、Payment Element がページに追加されました。次は、デザインに合わせて外観をカスタマイズできます。Payment Element のカスタマイズについての詳細は、Elements Appearance API をご覧ください。

Payment Element をカスタマイズする

Payment Element をカスタマイズする

オプションサーバーから更新を取得する
クライアント側

Payment Element が表示された後、PaymentIntent の amount などの属性を更新することができます (割引コードや配送料金など)。サーバー側で PaymentIntent を更新して、elements.fetchUpdates を呼び出すと、Payment Element に反映された新しい金額を確認できます。次の例では、PaymentIntent の amount (金額) を更新するサーバーエンドポイントを作成する方法を示しています。

main.rb
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
get '/update' do
  intent = Stripe::PaymentIntent.update(
    '{{PAYMENT_INTENT_ID}}',
    {amount: 1499},
  )
  {status: intent.status}.to_json
end

この例は、クライアント側でこれらの変更を反映するために UI を更新する方法を示しています。

(async () => {
  const response = await fetch('/update');
  if (response.status === 'requires_payment_method') {
    const {error} = await elements.fetchUpdates();
  }
})();

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

Payment Element からの詳細を指定して stripe.confirmPayment を使用し、支払いを完了します。ユーザーが支払いを完了した後に Stripe がユーザーをリダイレクトする場所を指定するには、この関数に return_url を指定します。ユーザーはまず、銀行のオーソリページなどの中間サイトにリダイレクトされ、その後 return_url にリダイレクトされます。カード支払いでは、支払いが正常に完了するとすぐに return_url にリダイレクトします。

カード決済で支払いの完了後にリダイレクトを行わない場合は、redirect に if_required を設定できます。これで、リダイレクトベースの決済手段で購入する顧客のみがリダイレクトされます。

checkout.js
const form = document.getElementById('payment-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const {error} = await stripe.confirmPayment({
    //`Elements` instance that was used to create the Payment Element
    elements,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

  if (error) {
    // This point will only be reached if there is an immediate error when
    // confirming the payment. Show error to your customer (for example, payment
    // details incomplete)
    const messageContainer = document.querySelector('#error-message');
    messageContainer.textContent = error.message;
  } else {
    // Your customer will be redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer will be redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});

注

stripe.confirmPayment の完了には数秒かかる場合があります。この間、フォームを再送信することがないように無効化し、スピナーのような待機中の印を表示します。エラーが発生した場合は、それを顧客に表示し、フォームを再度有効化し、待機中の印を非表示にします。支払いを完了するために顧客による認証などの追加の手順が必要な場合は、Stripe.js がそのプロセスをステップごとに顧客に提示します。

支払いが成功した場合、カードは Customer オブジェクトに保存されます。この内容は、PaymentMethod の customer フィールドに反映されます。この時点で、Customer オブジェクトの ID を独自の内部的な顧客の表記 (設定している場合) に関連付けます。これにより、今後は顧客に再度支払いの詳細を求めずに、保存した PaymentMethod オブジェクトを使用して顧客から支払いを回収できます。

return_url が、Web サイト上の支払いステータスを表示するページと対応していることを確認します。Stripe が顧客を return_url にリダイレクトするときは、以下の URL クエリーパラメーターが指定されます。

パラメーター説明
payment_intentPaymentIntent の一意の識別子。
payment_intent_client_secretPaymentIntent オブジェクトの client secret。

注意

顧客のブラウザーセッションを追跡するツールを利用している場合、リファラー除外リストに stripe.com ドメインの追加が必要になる場合があります。リダイレクトを行うと、一部のツールでは新しいセッションが作成され、セッション全体の追跡ができなくなります。

クエリパラメーターのいずれか 1 つを使用して PaymentIntent を取得します。PaymentIntent のステータスを調べて、顧客に表示する内容を決定します。また、return_url を指定するときにカスタムのクエリパラメーターを追加することもできます。このパラメーターはリダイレクトプロセスの間維持されます。

status.js
// Initialize Stripe.js using your publishable key
const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx'
);

// Retrieve the "payment_intent_client_secret" query parameter appended to
// your return_url by Stripe.js
const clientSecret = new URLSearchParams(window.location.search).get(
  'payment_intent_client_secret'
);

// Retrieve the PaymentIntent
stripe.retrievePaymentIntent(clientSecret).then(({paymentIntent}) => {
  const message = document.querySelector('#message')

  // Inspect the PaymentIntent `status` to indicate the status of the payment
  // to your customer.
  //
  // Some payment methods will [immediately succeed or fail][0] upon
  // confirmation, while others will first enter a `processing` state.
  //
  // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification
  switch (paymentIntent.status) {
    case 'succeeded':
      message.innerText = 'Success! Payment received.';
      break;

    case 'processing':
      message.innerText = "Payment processing. We'll update you when payment is received.";
      break;

    case 'requires_payment_method':
      message.innerText = 'Payment failed. Please try another payment method.';
      // Redirect your user back to your payment page to attempt collecting
      // payment again
      break;

    default:
      message.innerText = 'Something went wrong.';
      break;
  }
});

保存された支払い方法に後で請求する
サーバ側

警告

bancontact、ideal、sofort は、デフォルトでは 1 回限りの支払い方法です。将来も使用できるように設定すると、再利用可能な支払い方法タイプ sepa_debit が生成されます。このため、保存された支払い方法をクエリーで照会するには sepa_debit を使用する必要があります。

法令遵守

顧客の支払いの詳細を保存する際、お客様は適用されるすべての法律、規制、ネットワークの規則に準拠する責任があります。将来の購入に備えて顧客に過去の決済手段を提供する際は、必ず、特定の将来の使用に備えて決済手段の詳細を保存することについての同意を顧客から収集した決済手段をリストアップします。顧客に関連付けられた決済手段のうち、将来の購入用の保存済みの決済手段として顧客に提示できるものと提示できないものを区別するには、allow_redisplay パラメーターを使用します。

購入者にオフセッションで請求する準備ができたら、Customer ID と PaymentMethod ID を使用して、PaymentIntent を作成します。請求する決済手段を見つけるには、顧客に関連付けられた決済手段を一覧表示します。この例ではカードが一覧表示されますが、サポートされているすべてのタイプを一覧表示できます。

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl -G https://api.stripe.com/v1/payment_methods \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d customer=
{{CUSTOMER_ID}}
 \
  -d type=card

Customer ID と PaymentMethod ID を取得したら、支払いの金額と通貨を使用して PaymentIntent を作成します。その他のいくつかのパラメーターを設定して、オフセッションの支払いを行います。

  • off_session を true に設定して、支払いの試行時に購入者が決済フローを実行中でないことと、カード発行会社、銀行、その他の決済機関などのパートナーからの認証リクエストに対応できないことを示します。決済フローの実行時にパートナーが認証をリクエストした場合、Stripe は前回のオンセッション取引の顧客情報を使用して免除をリクエストします。免除の条件を満していない場合は PaymentIntent からエラーが返されることがあります。
  • PaymentIntent の confirm プロパティの値を true に設定します。これにより、PaymentIntent が作成されると直ちに確定されます。
  • payment_method を PaymentMethod の ID に設定し、customer を Customer の ID に設定します。
Command Line
curl
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d amount=1099 \
  -d currency=usd \
  # In the latest version of the API, specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default.
  -d "automatic_payment_methods[enabled]"=true \
  -d customer="{{CUSTOMER_ID}}" \
  -d payment_method="{{PAYMENT_METHOD_ID}}" \
  -d return_url="https://example.com/order/123/complete" \
  -d off_session=true \
  -d confirm=true

オプション将来に備えて支払い情報を保存する
サーバ側

PaymentIntent を作成するのステップに記載されているように、setup_future_usage 引数を渡すことで、顧客に支払いの詳細を保存できます。この方法で支払い方法のサブセットを再利用可能にできますが、すべての支払い方法を再利用可能にできるわけではありません。1 つの Payment Intent で、再利用可能と再利用不可の両方の支払い方法に対応できます。setup_future_usage に対応可能な支払い方法を確認するには、 決済手段のサポートページをご覧ください。

たとえば、カード支払いと Giropay (再利用不可) を受け付けるとします。顧客がカードによる支払い方法を選択する場合、payment_method_options[card] オブジェクトに setup_future_usage=off_session を設定することで、将来の使用に備えて顧客に支払い方法を保存できます。

顧客が支払い情報の保存を拒否した場合は、サーバー側で PaymentIntent の setup_future_usage を無効にします。クライアント側でのこの調整はサポートされていません。

支払い方法はダッシュボードで管理できます。Stripe は取引額、通貨、決済フローなどの要素に基づいて、適切な支払い方法が返されるように処理します。

Command Line
curl
Ruby
Python
PHP
Node.js
Stripe CLI
No results
curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "amount"=1099 \
  -d "currency"="usd" \
  -d "automatic_payment_methods[enabled]"="true" \
  -d "payment_method_options[card][setup_future_usage]"="off_session"

組み込みをテストする

テスト用の支払いの詳細とテスト用リダイレクトページを使用して、組み込みを確認できます。以下のタブをクリックすると、各支払い方法の詳細を表示できます。

決済手段シナリオテスト方法
クレジットカードカードの設定は成功し、認証は必要ありません。クレジットカード番号 4242 4242 4242 4242 と、任意の有効期限、セキュリティーコード、郵便番号を使用してクレジットカードフォームに入力します。
クレジットカードこのカードは初期設定時に認証が必要であり、それ以降は支払いに成功します。クレジットカード番号 4000 0025 0000 3155 と、任意の有効期限、セキュリティーコード、郵便番号を使用してクレジットカードフォームに入力します。
クレジットカードこのカードは、初期設定時も、以降の支払いでも認証が必要です。クレジットカード番号 4000 0027 6000 3184 と、任意の有効期限、セキュリティーコード、郵便番号を使用してクレジットカードフォームに入力します。
クレジットカード設定中にカードは拒否されます。クレジットカード番号 4000 0000 0000 9995 と、任意の有効期限、セキュリティーコード、郵便番号を使用してクレジットカードフォームに入力します。

保存された SEPA デビット PaymentMethod への請求をテストする

iDEAL、Bancontact または Sofort を使用して PaymentIntent が確定されると、SEPA ダイレクトデビット の PaymentMethod が生成されます。SEPA ダイレクトデビットは、通知遅延型の決済手段であり、中間の processing 状態に移行してから、数日後に succeeded または requires_payment_method の状態に移行します。

payment_method.billing_details.emailを以下の値のいずれかに設定して PaymentMethod のステータスの移行をテストします。メールアドレスの先頭に独自のカスタムのテキストを含め、その後ろにアンダースコアを付けることができます。 たとえば、test_1_generatedSepaDebitIntentsFail@example.com は、PaymentIntent とともに使用された場合に常に失敗する、SEPA ダイレクトデビットの PaymentMethod です。

メールアドレス説明
generatedSepaDebitIntentsSucceed@example.comPaymentIntent のステータスは、processing から succeeded に移行します。
generatedSepaDebitIntentsSucceedDelayed@example.comPaymentIntent のステータスは、3 分後以降に processing から succeeded に移行します。
generatedSepaDebitIntentsFail@example.comPaymentIntent のステータスは、processing から requires_payment_method に移行します。
generatedSepaDebitIntentsFailDelayed@example.comPaymentIntent のステータスは、3 分後以降に processing から requires_payment_method に移行します。
generatedSepaDebitIntentsSucceedDisputed@example.comPaymentIntent のステータスは、processing から succeeded に移行しますが、すぐに不審請求の申請が作成されます。

オプションApple Pay および Google Pay
クライアント側

カード支払いを有効にすると、ウォレットの表示条件を満たす環境を使用している顧客には Apple Pay と Google Pay が表示されます。これらのウォレットからの決済を受け付けるには、以下も実行する必要があります。

各地域でのテスト
インド

Stripe Elements は、インドの Stripe アカウントと顧客に対して Google Pay および Apple Pay をサポートしていません。そのため、Stripe アカウントの拠点がインド以外に所在している場合も、テスターの IP アドレスがインドにある場合は、Google Pay または Apple Pay の実装をテストできません。

参照情報

このページはお役に立ちましたか。
はいいいえ