コンテンツにスキップ
アカウントを作成
または
サインイン
Stripe ドキュメントのロゴ
/
アカウントを作成
サインイン
概要構築済みのシステムをアップグレード
オンライン決済
概要ユースケースを見つける
支払い方法
支払いインターフェイス
決済シナリオ
店頭支払い
他の Stripe プロダクト

注

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

将来のニュージーランドの BECS ダイレクトデビットによる決済に備えて詳細を保存する

将来のニュージーランドの銀行口座引き落としによる支払いに備えて支払い方法の詳細を保存する方法をご紹介します。

ページをコピー

Setup Intents API を使用して、事前に支払い方法の詳細を収集し、後から最終的な金額や支払い日を確定できます。この機能が役立つ用途を紹介します。

  • 支払い方法をウォレットに保存して、以降の購入を効率化する
  • サービスの提供後に追加料金を回収する
  • サブスクリプションの無料トライアルを開始する

Stripe を設定する
サーバー側

まず、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'

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

以降の支払いに銀行口座を再利用するには、その口座を Customer に関連付けます。

お客様のビジネスで顧客がアカウントを作成するときに、Customer オブジェクトを作成します。Customer オブジェクトの ID を、独自の内部的な顧客の表記に関連付けることにより、保存された支払い方法の詳細を後で取得して使用できます。顧客がアカウントを作成していない場合でも、すぐに Customer オブジェクトを作成し、後でこのオブジェクトを顧客のアカウントの内部表記に関連付けることができます。

新しい Customer を作成するか、または既存の Customer を取得して、この支払い詳細に関連付けます。サーバーに以下のコードを含め、新しい Customer を作成します。

Command Line
curl -X POST https://api.stripe.com/v1/customers \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:"

SetupIntent を作成する
サーバー側

SetupIntent (支払い方法設定インテント) は、今後の決済に備えて顧客の支払い方法を設定する意図を表すオブジェクトです。SetupIntent は、この設定プロセスのステップを追跡します。

payment_method_types を nz_bank_account に設定してサーバーで SetupIntent を作成し、Customer の ID を指定します。

Command Line
curl https://api.stripe.com/v1/setup_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -H "Stripe-Version: 2025-03-31.basil; nz_bank_account_beta=v2" \
  -d "payment_method_types[]"=nz_bank_account \
  -d customer=
{{CUSTOMER_ID}}

client secret を取得する

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

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

main.rb
get '/secret' do
  intent = # ... Create or retrieve the SetupIntent
  {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
})();

支払い方法の詳細と同意書承認を収集する
クライアント側

Stripe Elements を設定する

決済ページに Stripe.js スクリプトを含めるには、HTML ファイルの head にスクリプトを追加します。常に js.stripe.com から Stripe.js を直接読み込みます。スクリプトをバンドルに含めたり、そのコピーを自身でホストしたりしないでください。

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

最初のパラメーターとして公開可能な API キーを渡し、さらに Elements にアクセスするための nz_bank_account_beta_2 ベータフラグを渡して、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'
, {
  betas: ['nz_bank_account_beta_2'],
  apiVersion: "2025-03-31.basil;nz_bank_account_beta=v2"
});

Payment Element を決済ページに追加する

決済ページで、Payment Element がレンダリングできるように、一意の ID を持つ空の DOM ノードを作成します。

checkout.html
<form id="payment-form">
  <h3>Payment</h3>
  <div id="payment-element"></div>

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

上記のフォームの読み込みが完了したら、新しい Elements グループを作成し、前のステップの client secret を設定として渡します。appearance オプションを渡して、サイトのデザインに合わせて Elements をカスタマイズすることもできます。

次に、Payment Element のインスタンスを作成し、対応する DOM ノードにマウントします。

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

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

// Create Payment Element instance.
const paymentElement = elements.create("payment");

// Mount the Payment Element to its corresponding DOM node.
paymentElement.mount("#payment-element");

Payment Element によって動的なフォームが表示され、顧客はここで決済手段タイプを選択できます。このフォームでは、顧客が選択した決済手段タイプに必要な支払いの詳細のすべてが、自動的に収集されます。ニュージーランドの BECS ダイレクトデビットによる支払いでは、顧客の氏名、メールアドレス、銀行口座番号がこれに含まれます。

同意書承認

また、Payment Element はニュージーランドの BECS ダイレクトデビットサービスの利用規約も顧客に表示して、これらの規約への顧客の同意を収集します。他に必要な操作はありません。

Payment Element を使用しない場合は、これらの利用規約を別途顧客に表示して、顧客の同意を確認する必要があります。

注

銀行口座情報を提供し、この支払いを確定することにより、Stripe New Zealand Limited (オーソリコード 3143978) が、この許可に従って Rocket Rides (“Stripe”, “弊社” or “加盟店”) への口座引き落とし金額をお客様の口座から引き落とすことを認めるものとします。

この許可が以下に従うことに同意するものとします。

また、お客様が上記の銀行口座の個人名義人または委任された署名者であり、この銀行口座を単独で操作する権限を持つことを認めるものとします。

この口座引き落としの許可の確認後 5 営業日以内に、Stripe からの確認メールが送信されます。

Stripe からのリクエストがあった場合は、同意書の記録を速やかに提供する必要があります。

Stripe に支払い方法の詳細を送信する
クライアント側

stripe.confirmSetup を使用して銀行口座の詳細を収集し、PaymentMethod を作成して SetupIntent に関連付けます。

その他の決済手段タイプによっては、顧客をまず銀行のオーソリページなどの中間サイトにリダイレクトしてから、return_url にリダイレクトする場合があります。支払いの完了後に Stripe が顧客をリダイレクトする場所を指定するには、この関数に return_url を指定します。

ニュージーランドの BECS ダイレクトデビットにはリダイレクトが不要なので、redirect に return_url を指定する代わりに、if_required を設定することもできます。これにより、後でリダイレクトベースの決済手段を追加する場合にのみ、return_url が要求されるようになります。

script.js
confirmationForm.addEventListener('submit', (ev) => {
  ev.preventDefault();
  stripe.confirmSetup({elements, redirect: "if_required"})
  .then(({setupIntent, error}) => {
    if (error) {
      console.error(error.message);
      // The confirmation failed for some reason.
    } else if (setupIntent.status === "requires_payment_method") {
      // Confirmation failed. Attempt again with a different payment method.
    } else if (setupIntent.status === "succeeded") {
      // Confirmation succeeded! The account is now saved.
      // Display a message to the customer.
    }
  });
});

成功した場合、Stripe は succeeded ステータスで SetupIntent オブジェクトを返します。これで、関連付けられている PaymentMethod を将来の支払いに使用できるようになります。

顧客への通知メール

SetupIntent の確定に成功した後、同意書と収集した銀行口座の詳細を確認するメールを顧客に送信する必要があります。

さらに、回収されるそれぞれの支払いについて、遅くとも引き落としを行う日までに、引き落とし日と金額を記載したメール通知を顧客に送信する必要があります。

Stripe はデフォルトでこれらのメールの送信を行いますが、カスタム通知を送信することもできます。

将来の決済を受け付ける
サーバー側

SetupIntent が成功すると、新しい PaymentMethod が作成され Customer (顧客) に関連付けられます。これらを使用することで、将来の支払いを開始する際に、顧客に銀行口座の再入力を求める必要がなくなります。

Command Line
curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -H "Stripe-Version: 2025-03-31.basil; nz_bank_account_beta=v2" \
  -d "payment_method_types[]"=nz_bank_account \
  -d customer=
{{CUSTOMER_ID}}
 \
  -d payment_method=
{{PAYMENT_METHOD_ID}}
 \
  -d confirm=true \
  -d amount=100 \
  -d currency=nzd \
  -d off_session=true

組み込みをテストする

テスト用口座番号

In a sandbox, you can use the following parameters to simulate specific errors.

銀行コード 11、支店コード 0000 と、次のいずれかの口座番号を使用してフォームをテストします。

口座番号説明
0000000010生成された PaymentMethod で確定された PaymentIntent は、processing から succeeded に変わります。同意書のステータスは引き続き active です。
2222222027生成された PaymentMethod で確定された PaymentIntent は、processing から requires_payment_method に変わり、insufficient_funds エラーコードが返されます。同意書のステータスは引き続き active です。
8888888000生成された PaymentMethod で確定された PaymentIntent は、processing から requires_payment_method に変わり、refer_to_customer エラーコードが返されます。同意書のステータスは引き続き active です。
1111111016生成された PaymentMethod で確定された PaymentIntent は、processing から requires_payment_method に変わり、no_account エラーコードが返されます。同意書のステータスは inactive になります。
5555555059生成された PaymentMethod で確定された PaymentIntent は、processing から requires_payment_method に変わり、debit_not_authorized エラーコードが返されます。同意書のステータスは inactive になります。
9999999000生成された PaymentMethod で確定された PaymentIntent は、processing に変わり、そのまま維持されます。さらにステータスの移行を進めるには、以下に記述する API リクエストを使用します。
このページはお役に立ちましたか。
はいいいえ
お困りのことがございましたら 、サポートにお問い合わせください。
早期アクセスプログラムにご参加ください。
変更ログをご覧ください。
ご不明な点がございましたら、お問い合わせください。
LLM ですか？llms.txt を読んでください。
Powered by Markdoc