銀行振込を受け付ける

Payment Intents API を使用して、銀行振込による支払いを受け付けます。

顧客からの銀行振込による決済を初めて受け付ける際に、Stripe はその顧客用に仮想銀行口座を生成します。この口座は、顧客と直接共有できます。この顧客からの以降のすべての銀行振込による支払いは、この銀行口座に送金する必要があります。一部の国では、Stripe は、一意の送金照会番号も提供します。未払いの支払いと振込の照合を簡単にするため、顧客は各振込にこの番号を含める必要があります。国によっては、無料で作成できる仮想銀行口座番号の数に制限があります。

以下のシーケンス図は、銀行振込による決済を受け付ける際の一般的なステップの概要を示しています。

支払い不足と過払いを処理する

銀行振込による決済では、顧客の振込額が予想される支払い金額よりも多い場合や少ない場合があります。顧客の振込額が少ない場合、Stripe は、未払いの支払いインテントに部分的に資金を充当します。請求書に部分的に資金が充当されることはありません。入金された売上によって請求額の全額が支払われるまで、請求書は未払いのままになります。

顧客から予想される金額よりも多く振り込まれた場合、Stripe は、未払いの支払いに対して入金された売上の消し込みを試行し、残りの超過額を顧客の現金残高に保持します。Stripe による消し込み処理について、詳細はドキュメントの消し込みセクションをご覧ください。

顧客の支払いが不足している場合は以下のようになります。

顧客の支払いが過払いの場合は以下のようになります。

複数の未払いの支払いまたは請求書を処理する

銀行振込で支払うことができる未払いの支払いや請求書が複数ある場合があります。デフォルトの設定の場合、Stripe が振込の参照コードや送金額などの情報を使用して、銀行振込の自動消し込みを試行します。

自動消し込みを無効にして、支払いと請求書を手動で消し込むことができます。reconciliation mode (消し込みモード) を manual に設定すると、顧客ごとに自動消し込み動作を上書きできます。

Stripe を設定する
サーバー側

まず、Stripe アカウントが必要です。今すぐ登録してください。

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

Customer を作成または取得する
サーバー側

銀行振込による各支払いを消し込むには、Customer (顧客) オブジェクトを関連付ける必要があります。すでに Customer オブジェクトが存在する場合は、このステップをスキップできます。ない場合は、新しい Customer オブジェクトを作成します。

PaymentIntent を作成する
サーバー側

PaymentIntent は、顧客から支払いを回収する意図を表すオブジェクトであり、支払いプロセスのライフサイクルをステージごとに追跡します。回収する金額と通貨を指定して、サーバーで PaymentIntent を作成します。PaymentIntent 作成リクエストの customer パラメーターにも入力する必要があります。銀行振込は、顧客が指定されていない PaymentIntents には利用できません。

Payment Intent を作成する前に、ダッシュボードの支払い方法の設定ページで、銀行振込を有効にしていることを確認します。

注

動的な支払い方法の場合、Stripe は取引額、通貨、決済フローなどの要素に基づいて、適切な支払い方法が返されるように処理します。

最新バージョンの API では、automatic_payment_methods パラメーターがデフォルトで有効になっているため、機能の指定は任意です。

支払い額に充当できる金額が顧客の残高に十分にある場合、PaymentIntent は succeeded ステータスで即座に成功します。顧客が誤って取引に対して過払いをした場合 (銀行振込の場合によく発生します)、差額が生じることがあります。お客様の所在地に基づいて一定期間内に顧客の残高を消し込む必要があります。

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

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

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

構築済みのシステムを機能させるには、決済ページのアドレスの先頭を 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 を使用します。

確定されると、Stripe は顧客に銀行振込の詳細を表示するモーダルを自動的に開きます。

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

オプション決済手順メールを送信する

PaymentIntent の成功を確認する

PaymentIntent は、売上が銀行口座に入金されるまで requires_action ステータスのままとなります。売上の準備ができると、PaymentIntent のステータスが requires_action から succeeded に更新されます。

Webhook エンドポイントは、payment_intent.partially_funded イベントの受信を開始するように設定する必要があります。PaymentIntent の一部だけ入金された場合、ステータスは requires_action ステータスのままとなります。

ダッシュボードから Webhook を追加できます。

また、Webhook Endpoints API を使用して payment_intent.partially_funded イベントの受信を開始することもできます。

注意

Stripe CLI は、payment_intent.partially_funded など、ベータ API バージョンのイベントのトリガーはサポートしていません。

PaymentIntent が更新されると、以下のイベントが支払い資金追加フロー中に送信されます。

イベント	説明	次のステップ
`payment_intent.requires_action`	顧客の残高に PaymentIntent を消し込むのに十分な資金がない場合、確定時に送信され、PaymentIntent は `requires_action` に移行します。	`amount_remaining` を使用して銀行振込を行うよう顧客に指示します。
`payment_intent.partially_funded`	顧客は PaymentIntent に充てられた銀行振込を行いましたが、支払いを完了するのに十分ではありませんでした。このような状況は、振込額が不足していたり (誤りによる支払い不足または銀行から請求される手数料のため)、差引残高がこの PaymentIntent に適用されていたりすると発生する可能性があります。一部のみ資金追加された PaymentIntent は支払いが完了するまでアカウント残高に反映されません。	新しい `amount_remaining` を使用して別の銀行振込を行い、支払いを完了するよう顧客に指示します。部分的に資金を充当して支払いを完了する場合は、`amount` を更新して PaymentIntent をもう一度確定できます。
`payment_intent.succeeded`	顧客の支払いが成功しました。	顧客が購入した商品またはサービスのフルフィルメントを行います。

注意

部分的に資金が充当された PaymentIntent の金額を変更すると、売上は顧客の残高に戻されます。他に open 状態の PaymentIntent がある場合、Stripe はそれらに自動で資金追加します。顧客に手動消し込みが設定されている場合は、もう一度売上を充当する必要があります。

支払いが成功したことを確認し、顧客に支払い完了を通知するには、Webhook を使用することをお勧めします。

サンプルコード

ダッシュボードで保留中の支払いを確認する

ダッシュボードでステータスに資金供給待ちのフィルターを適用すると、保留中のすべての銀行振込 PaymentIntent を確認できます。

組み込みをテストする

API、ダッシュボード、または Stripe CLI のベータバージョンを使用して、銀行振込の受け取りをシミュレーションすることにより、実装をテストできます。

サンドボックスでダッシュボードを使用して銀行振込をシミュレーションするには、ダッシュボードの顧客のページに移動します。決済手段で追加をクリックし、現金残高に資金を追加 (テスト環境のみ) を選択します。

一時的に利用できない問題に対応する

次のエラーコードは、その支払い方法が一時的に使用できない状態にあることを示しています。

コード	説明	処理
`payment_method_rate_limit_exceeded`	この決済手段には、API 全体のレート制限よりも厳しい制限が課されていますが、大量のリクエストが立て続けに実行されました。	このエラーは、Web サイトでのセール期間中などに、多くの顧客が同じ決済方法を使用しようとすると、複数の API リクエストで生じることがあります。その場合は、顧客に別の決済方法を使用するように依頼します。

注意

全般的に、または今後のイベントで使用量が高くなることが想定される場合は、すぐに Stripe にお問い合わせください。