支払いを受け付ける

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

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

Stripe Elements を使用して、UI コンポーネントをサイトに埋め込むことでカスタムの決済システムを構築します。この実装と、Stripe の他の実装タイプとの比較をご覧ください。

クライアント側およびサーバー側のコードでさまざまな支払い方法を受け付ける決済フォームを構築します。

リピートユーザーに対する Link のしくみを見るには、メールアドレス demo@stripe.com を入力してください。新規登録中の Link のしくみを見るには、他の任意のメールアドレスを入力し、フォームの残りの部分に入力してください。 Google Pay または Apple Pay ウォレットのいずれかが関連付けられた有効カードがある場合、このデモでは対応するウォレットのみが表示されます。

実装作業

API

システム構築のタイプ

カスタムの決済フローに UI コンポーネントを組み合わせる

UI のカスタマイズ

Appearance API による CSS レベルのカスタマイズ

Stripe Tax、割引、配送、通貨換算の使用をご希望の場合

Stripe は、税金、割引、配送、通貨換算を管理する Payment Element の実装をご用意しています。詳細については、決済ページの構築をお読みください。

Stripe を設定する
サーバー側

まず、Stripe アカウントを作成するかサインインします。

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

PaymentIntent を作成する
サーバー側

注

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

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

PaymentIntent を作成する

サーバーで amount および currency を指定して PaymentIntent を作成します。最新バージョンの API では automatic_payment_methods パラメーターの指定は必須ではありません。この機能はデフォルトで有効になっています。決済手段はダッシュボードで管理できます。Stripe は、取引の金額、通貨、決済フローなどの要素に基づいて、適切な決済手段が返されるように処理します。

Stripe は、決済手段の設定を使用して、導入されている決済手段を表示します。決済手段が顧客に表示される方法を確認するには、ダッシュボードで取引 ID を入力するか、注文金額と通貨を設定します。決済手段を上書きするには、payment_method_types 属性を使用して、っ導入する決済手段を一覧表示します。

注

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

client secret を取得する

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

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

その後、クライアント側で 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 で関連するマーチャントトークンのタイプをリクエストします。

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

将来の利用に備えて顧客の決済手段を保存するように 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 の関連付けが解除されます。

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
  }
})

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

この例は、クライアント側でこれらの変更を反映するために 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`.
  }
});

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

パラメーター	説明
`payment_intent`	`PaymentIntent` の一意の識別子。
`payment_intent_client_secret`	`PaymentIntent` オブジェクトの 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;
  }
});

支払い後のイベントを処理する
サーバー側

支払いが完了すると、Stripe は payment_intent.succeeded イベントを送信します。ダッシュボードの Webhook ツールを使用するか Webhook のガイドに従ってこれらのイベントを受信し、顧客への注文確認メールの送信、データベースでの売上の記録、配送ワークフローの開始などのアクションを実行します。

クライアントからのコールバックを待つのではなく、これらのイベントをリッスンします。クライアントでは、コールバックが実行される前に顧客がブラウザーのウィンドウを閉じたり、アプリを終了する場合、また悪意を持つクライアントがレスポンスを不正操作する場合もあります。非同期型のイベントをリッスンするよう組み込みを設定すると、単一の組み込みで複数の異なるタイプの支払い方法を受け付けることができます。

Payment Element を使用して支払いを回収する場合は、payment_intent.succeeded イベントのほかにこれらのイベントを処理することをお勧めします。

イベント	説明	アクション
payment_intent.succeeded	顧客が正常に支払いを完了したときに送信されます。	顧客に注文の確定を送信し、顧客の注文のフルフィルメントを実行します。
payment_intent.processing	顧客が正常に支払いを開始したが、支払いがまだ完了していない場合に送信されます。このイベントは、多くの場合、顧客が口座引き落としを開始するときに送信されます。その後、`payment_intent.succeeded` イベント、また、失敗の場合は `payment_intent.payment_failed` イベントが送信されます。	顧客に注文確認メールを送信し、支払いが保留中であることを示します。デジタル商品では、支払いの完了を待たずに注文のフルフィルメントを行うことが必要になる場合があります。
payment_intent.payment_failed	顧客が支払いを試みたが、支払いに失敗する場合に送信されます。	支払いが `processing` から `payment_failed` に変わった場合は、顧客に再度支払いを試すように促します。

導入をテストする

カスタムの決済システムをテストするには、以下の手順を実行します。

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

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

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

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

オプション支払い方法をさらに追加する

Payment Element は、デフォルトで多数の支払い方法に対応しています。一部の支払い方法を有効にして表示するには、追加のステップを実行する必要があります。

Affirm

Affirm の使用を開始するには、ダッシュボードで有効にする必要があります。支払い方法に Affirm を指定して PaymentIntent を作成する際に、配送先住所も含める必要があります。この例では、顧客が支払い方法を選択した後に配送情報をクライアントに渡すことを推奨しています。Stripe での Affirm の使用方法の詳細をご確認ください。

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://my-site.com/order/123/complete',
      shipping: {
        name: 'Jenny Rosen',
        address: {
          line1: '1 Street',
          city: 'Seattle',
          state: 'WA',
          postal_code: '95123',
          country: 'US',
        },
      },

    },
  });

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

Affirm をテストする

次の表を使用してさまざまなシナリオをテストする方法をご紹介します。

シナリオ	テスト方法
顧客は Affirm による支払いに成功します。	フォームに入力し (必ず配送先住所も含める)、支払いの認証を行います。
顧客は Affirm のリダイレクトページで認証に失敗します。	フォームに入力し、リダイレクトページで Fail Test Payment (テスト支払い失敗) をクリックします。

Afterpay (Clearpay)

支払い方法に Afterpay を指定して PaymentIntent を作成する場合は、配送先住所を含める必要があります。Stripe での Afterpay の使用方法の詳細をご確認ください。

決済手段はダッシュボードで管理できます。Stripeは取引額、通貨、決済フローなどの要素に基づいて、適切な決済手段が返されるように処理します。以下の例では、automatic_payment_methods 属性を使用していますが、決済手段タイプを使用して afterpay_clearpay を一覧表示することができます。最新バージョンのAPIでは automatic_payment_methods パラメーターの指定は必須ではありません。この機能はデフォルトで有効になっています。いずれのオプションを選択する場合でも、必ずダッシュボードで Afterpay Clearpay を有効にしてください。

Afterpay (Clearpay) をテストする

次の表を使用してさまざまなシナリオをテストする方法をご紹介します。

シナリオ	テスト方法
顧客が Afterpay での支払いに成功しました。	フォームに入力し (必ず配送先住所も含める)、支払いの認証を行います。
顧客が Afterpay のリダイレクトページで認証に失敗しました。	フォームに入力し、リダイレクトページで Fail Test Payment (テスト支払い失敗) をクリックします。

Apple Pay および Google Pay

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

支払い方法設定でこれらを有効にします。Apple Payはデフォルトで有効になっています。
開発環境と本番環境で HTTPS を介してアプリケーションを提供します。
ドメインを登録します。
PaymentIntent の金額を更新する場合は、サーバーから更新を取得して、ウォレットの支払いモーダルの同期を維持します。

各地域でのテスト
インド

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

Stripe での Apple Pay および Google Pay の使用方法の詳細をご確認ください。

ACH ダイレクトデビット

ACH ダイレクトデビットによる支払い方法で Payment Element を使用する際には、次のステップに従います。

Customer オブジェクトを作成します。
Command Line
言語を選択
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl -X POST https://api.stripe.com/v1/customers \ -u "sk_test_BQokikJOvBiI2HlWgH4olfQ2 :"

PaymentIntent の作成時に顧客 ID を指定します。

確認方法を選択します。

Payment Element で ACH ダイレクトデビットによる支払い方法を使用する場合は、automatic または instant のみを選択できます。

Stripe での ACH ダイレクトデビットの使用方法の詳細をご確認ください。

ACH ダイレクトデビットをテストする

シナリオ	テスト方法
顧客が即時の確認を使用し、アメリカの銀行口座で決済しました。	アメリカの銀行口座を選択し、フォームに入力します。Test Institution (機関をテスト) をクリックします。モーダルに表示される指示に従って銀行口座を関連付け、支払いボタンをクリックします。
顧客が少額入金を使用し、アメリカの銀行口座で決済しました。	アメリカの銀行口座を選択し、フォームに入力します。代わりに手動で銀行口座情報を入力をクリックします。モーダルに表示される指示に従って銀行口座を関連付けます。これらのテスト用口座番号を使用できます。支払いボタンをクリックします。
顧客が銀行口座を関連付けるプロセスを完了できませんでした。	アメリカの銀行口座を選択し、Test Institution (機関をテスト) または代わりに手動で銀行口座情報を入力をクリックします。完了せずにモーダルを閉じます

BLIK

BLIK で Payment Element を使用する場合、ユーザーはバンキングアプリで支払いの承認を求めるモーダルを閉じることができます。この操作では、ユーザーは購入ページに戻らずに return_url にリダイレクトされます。Stripe での BLIK の使用方法の詳細をご確認ください。

ユーザーがモーダルを閉じた場合、これに対応するには、return_url に対するサーバー側のハンドラで、Payment Intent の status が succeeded になっているか、まだ requires_action (ユーザーが支払わずにモーダルを閉じたことを示す) のままであるかを調べ、それぞれのケースに応じて対応します。

QR コードを使用した支払い方法

QR コードベースの支払い方法 (WeChat Pay、PayNow、Pix、PromptPay、Cash App Pay) で Payment Element を使用すると、ユーザーは QR コードのモーダルを閉じることができます。この操作では、ユーザーが決済ページに戻らずに、お客様の return_url にリダイレクトされます。

ユーザーが QR コードのモーダルを閉じた操作を処理するには、お客様の return_url に対するサーバー側のハンドラーで、Payment Intent の status が succeeded になっているか、まだ requires_action (ユーザーが支払わずにモーダルを閉じたことを示す) のままであるかを調べ、それぞれのケースに応じて処理します。

それ以外に、QR コードのモーダルを閉じたときのリダイレクトを防止する詳細オプションパラメーター redirect=if_required を渡すことで、return_url への自動リダイレクトを防止する方法もあります。

Cash App Pay

Payment Element は、さまざまな顧客認証方式を使用しているため、デスクトップウェブとモバイルウェブでは動的なフォームをレンダリングする方法が異なります。Stripe での Cash App Pay の使用方法の詳細をご確認ください。

Cash App Pay は、モバイルウェブで行われるリダイレクトベースの決済手段です。これにより、顧客は本番環境の Cash App、またはテスト環境のテスト用支払いページにリダイレクトされます。支払いが完了すると、redirect=if_required を設定したかどうかに関係なく return_url にリダイレクトされます。

PayPal

PayPal を使用するには、登録済みドメインを使用していることを確認します。

顧客に Stripe を開示する

Stripe は顧客の Elements とのやり取りに関する情報を収集して、サービスを提供し、不正利用を防止し、サービスを向上します。これには、Cookie と IP アドレスを使用して、1 つの決済フローセッションで顧客に表示する Elements を特定することが含まれます。Stripe がこのような方法でデータを使用するために必要なすべての権利と同意について開示し、これらを取得することはお客様の責任です。詳細については、プライバシーセンターをご覧ください。