Stripe の事前構築された UI コンポーネントである Stripe Elements を使用して、機密データを扱うことなく銀行口座の詳細を安全に収集できる決済フォームを作成します。Setup Intents API を使用して、事前に BECS ダイレクトデビットの決済手段の詳細を収集し、後から最終的な金額や支払い日を決定できます。この機能は以下の目的に利用できます。
まず、Stripe アカウントが必要です。今すぐご登録ください。
アプリケーションから Stripe API にアクセスするには、Stripe の公式ライブラリを使用します。
以降の支払いに BECS ダイレクトデビットの口座を再利用するには、その口座を Customer に関連付ける必要があります。
お客様のビジネスで顧客がアカウントを作成する際、Customer オブジェクトを作成します。この Customer オブジェクトの ID を、顧客を表す独自の内部表記と関連付けることで、保存されている支払い方法の詳細を後で取得して使用することができます。
新しい Customer を作成するか、または既存の Customer を取得して、この支払いに関連付けます。サーバに以下のコードを含め、新しい Customer を作成します。
curl -X POST https://api.stripe.com/v1/customers \
-u "sk_test_BQokikJOvBiI2HlWgH4olfQ2
SetupIntent (支払い方法設定インテント) は、今後の支払いのために顧客の決済手段をセットアップするお客様の意図を表すオブジェクトです。SetupIntent は、この設定プロセスのステップを追跡します。BECS ダイレクトデビットの場合、このステップには顧客からの同意書の収集と、ライフサイクル全体にわたる同意書の有効性の追跡が含まれます。
payment_method_types を au_becs_debit に設定してサーバーに SetupIntent (支払い方法設定インテント) を作成し、Customer の id を指定します。
curl https://api.stripe.com/v1/setup_intents \
-u sk_test_BQokikJOvBiI2HlWgH4olfQ2
サーバで SetupIntent を作成した後、アプリケーションのデータモデルで現在のセッションの顧客に SetupIntent ID を関連付けることができます。これを行うと、支払い方法の収集に成功した後で情報を取得できます。
返される SetupIntent オブジェクトには、client_secret プロパティが含まれています。この client secret をクライアント側のアプリケーションに渡して、設定プロセスを続行します。
Stripe Elements を使用してクライアントで支払い情報を収集する準備ができました。Elements は、支払いの詳細を収集するための構築済み UI コンポーネントのセットです。
Stripe Element には、HTTPS 接続を介して支払い情報を Stripe に安全に送信する iframe が含まれています。組み込みを機能させるには、決済ページのアドレスの先頭を http:// ではなく https:// にする必要があります。
HTTPS を使用せずに実装をテストできます。本番環境で決済を受け付ける準備が整ったら、HTTPS を有効化します。
Stripe Elements を設定する
Stripe Elements は Stripe.js の機能として自動的に使用できるようになります。支払いページに Stripe.js スクリプトを含めるには、HTML ファイルの head にこのスクリプトを追加します。常に js.stripe.com から Stripe.js を直接読み込むことにより、PCI への準拠が維持されます。スクリプトをバンドルに含めたり、そのコピーを自身でホストすることがないようにしてください。
次の JavaScript を使用して、お客様の決済ページに Elements のインスタンスを作成します。
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
ダイレクトデビットのリクエスト
お客様が BECS ダイレクトデビット支払いを作成する前に、顧客がダイレクトデビットリクエスト利用規約に同意する必要があります。顧客は入力を完了したダイレクトデビットリクエスト (DDR) を送信することで、この規約に同意したことになります。この承認により、お客様は顧客の口座から引き落としを行う同意書を得られます。Mandate は支払い方法へのデビットが許可されたことの記録です。
同意書にオンラインで同意してもらうために、フォームを作成して必要な情報を収集できます。フォームは HTTPS で提供し、以下の情報を取得します。
| 情報 | 説明 |
|---|
| 口座名義人名 | 口座名義人の氏名 |
| BSB 番号 | 銀行口座の Bank-State-Branch 番号 (例: 123-456) |
| 口座番号 | 銀行口座番号 (例: 87654321) |
ダイレクトデビットリクエストを収集する際には、BECS ダイレクトデビット規約に従い、決済フォームの一環として次のことを行います。
- Stripe の DDR 利用規約の正確な規約をフォーム上にインラインで、またはフォームからリンクしたページに表示し、それが「DDR 利用規約」であると明記します。
- 同意された DDR とこれに伴う DDR 利用規約を顧客がいつでも参照できるようにします。これは印刷物でも、変更不可の電子的なコピー (メールなど) の形でもかまいません。お客様が利用できるように Stripe がこの DDR をオンラインで提供します
- 以下に示す許可のための標準的なテキストを表示し、顧客に BECS DDR に同意してもらいます。「Rocketship Inc」 を自社名に置き換えてください。顧客が同意すると、顧客の銀行口座からの BECS ダイレクトデビット支払いが許可されたことになります。
注
銀行口座情報を提供することにより、お客様はこのダイレクトデビットのリクエストとダイレクトデビットリクエスト利用規約に同意し、Stripe Payments Australia Pty Ltd ACN 160 180 343 Direct Debit User ID number 507156 (以下「Stripe」) が、「Rocketship Inc」 (「加盟店」) に代わって、加盟店から別途通知された金額について、バルク電子決済システム (BECS) を使用してお客様の口座から引き落としを行うことを許可するものとします。また、お客様が上記の口座の名義人または承認された署名者であることを認めるものとします。
同意された同意書の詳細情報は、PaymentMethod を設定する際、または PaymentIntent を確認する際に生成されます。この同意書 (同意された DDR とこれに伴う DDR 利用規約) はいつでも顧客に提示できる必要があります。これは印刷物でも、変更不可の電子的なコピー (メールなど) でもかまいません。Stripe はお客様が利用できるように、この利用規約を PaymentMethod にリンクされた Mandate オブジェクトの url プロパティでホストします。
Australia Bank Account Element は、BSB 番号と口座番号の両方の収集と検証に役立ちます。この Element は、決済フォーム上に保存場所が必要です。決済フォームに、一意の ID を指定して空の DOM ノード (コンテナー) を作成してください。また、顧客はダイレクトデビットリクエスト利用規約を読んで同意する必要もあります。
<form action="/setup" method="post" id="setup-form">
<div class="form-row inline">
<div class="col">
<label for="accountholder-name">
Name
</label>
<input
id="accountholder-name"
name="accountholder-name"
placeholder="John Smith"
required
/>
</div>
<div class="col">
<label for="email">
Email Address
</label>
<input
id="email"
name="email"
type="email"
placeholder="john.smith@example.com"
required
/>
</div>
</div>
<div class="form-row">
<label for="au-bank-account-element">
Bank Account
</label>
<div id="au-bank-account-element">
</div>
</div>
<div id="bank-name"></div>
<div id="error-message" role="alert"></div>
<div class="col" id="mandate-acceptance">
By providing your bank account details, you agree to this Direct Debit Request
and the <a href="stripe.com/au-becs-dd-service-agreement/legal">Direct Debit Request service agreement</a>,
and authorise Stripe Payments Australia Pty Ltd ACN 160 180 343
Direct Debit User ID number 507156 (“Stripe”) to debit your account
through the Bulk Electronic Clearing System (BECS) on behalf of
Rocket Rides (the "Merchant") for any amounts separately
communicated to you by the Merchant. You certify that you are either
an account holder or an authorised signatory on the account listed above.
</div>
<button id="submit-button" data-secret="{{CLIENT_SECRET}}">Set up BECS Direct Debit</button>
</form>
フォームが読み込まれるときに、次のように、Australia Bank Account Element のインスタンスを作成し、それを Element コンテナーにマウントできます。
const style = {
base: {
color: '#32325d',
fontSize: '16px',
'::placeholder': {
color: '#aab7c4'
},
':-webkit-autofill': {
color: '#32325d',
},
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a',
':-webkit-autofill': {
color: '#fa755a',
},
}
};
const options = {
style: style,
disabled: false,
hideIcon: false,
iconStyle: "default",
}
const auBankAccount = elements.create('auBankAccount', options);
auBankAccount.mount('#au-bank-account-element');
SetupIntent オブジェクト全体をクライアントに送信するのではなく、ステップ 2 で取得した client secret を使用します。これは、Stripe API リクエストを認証する API キーとは異なります。
client secret は設定を完了できるため、慎重に取り扱う必要があります。記録したり、URL に埋め込んだり、当該の顧客以外に漏洩することがないようにしてください。
ユーザーがフォームを送信したら、stripe.confirmAuBecsDebitSetup を使用してセットアップを完了します。セットアップに成功すると、SetupIntent の status プロパティに succeeded 値が返されます。セットアップが成功しなかった場合は、返された error を調べて原因を判断してください。
customer が設定されているため、セットアップが成功すると、PaymentMethod が指定された Customer オブジェクトに関連付けられます。この時点で Customer オブジェクトの ID を、お客様独自の顧客の内部表現に関連付けることができます。これにより、顧客の決済手段の詳細を求めるプロンプトを表示することなく、格納された PaymentMethod を使用して以降の支払いを回収できます。
const form = document.getElementById('setup-form');
const accountholderName = document.getElementById('accountholder-name');
const email = document.getElementById('email');
const submitButton = document.getElementById('submit-button');
const clientSecret = submitButton.dataset.secret;
form.addEventListener('submit', async (event) => {
event.preventDefault();
stripe.confirmAuBecsDebitSetup(
clientSecret,
{
payment_method: {
au_becs_debit: auBankAccount,
billing_details: {
name: accountholderName.value,
email: email.value
}
}
}
);
});
SetupIntent が正常に確定した後、Mandate (同意書) オブジェクトから取得した同意書の URL を顧客に提示する必要があります。また顧客に同意書が確定したことを伝える際には、下記の詳細情報を含めることを推奨します。
- ダイレクトデビットの準備が整ったことを示す明確な確認メッセージ
- 口座から引き落とされるたびに顧客の銀行明細書に表示されるビジネス名
- 支払い金額とスケジュール (該当する場合)
- 生成された DDR 同意書 URL へのリンク
Mandate オブジェクトの ID は、SetupIntent オブジェクトの mandate から取得できます。この ID は、確定後に送信される setup_intent.succeeded イベントの一部として送信され、API から取得することもできます。
curl https://api.stripe.com/v1/setup_intents/{{SETUP_INTENT_ID}} \
-u "sk_test_BQokikJOvBiI2HlWgH4olfQ2
テスト用の BSB 番号 000-000 と以下のいずれかのテストアカウント番号を confirmAuBecsDebitSetup リクエストで使用することで、フォームをテストできます。
| BSB 番号 | 口座番号 | 説明 |
|---|
000-000 | 000123456 | 生成された PaymentMethod で作成された PaymentIntent は、processing から succeeded に変わります。同意書のステータスは引き続き active です。 |
000-000 | 900123456 | 生成された PaymentMethod で作成された PaymentIntent は、processing から succeeded に変わります (3 分の遅延あり)。同意書のステータスは引き続き active です。 |
000-000 | 111111113 | 生成された PaymentMethod で作成された PaymentIntent は、processing から requires_payment_method に変わり、account_closed エラーコードが返されます。同意書のステータスはその時点で inactive になります。 |
000-000 | 111111116 | 生成された PaymentMethod で作成された PaymentIntent は、processing から requires_payment_method に変わり、no_account エラーコードが返されます。同意書のステータスはその時点で inactive になります。 |
000-000 | 222222227 | 生成された PaymentMethod で作成された PaymentIntent は、processing から requires_payment_method に変わり、refer_to_customer エラーコードが返されます。同意書のステータスは引き続き active です。 |
000-000 | 922222227 | 生成された PaymentMethod で作成された PaymentIntent は、processing から requires_payment_method に変わり、refer_to_customer エラーコードが返されます (3 分の遅延あり)。同意書のステータスは引き続き active です。 |
000-000 | 333333335 | 生成された PaymentMethod で作成された PaymentIntent は、processing から requires_payment_method に変わり、debit_not_authorized エラーコードが返されます。同意書のステータスはその時点で inactive になります。 |
000-000 | 666666660 | 生成された PaymentMethod で作成された PaymentIntent は、processing から succeeded に変わりますが、不審請求の申請が直ちに作成されます。 |
000-000 | 343434343 | The PaymentIntent that was created with the resulting PaymentMethod fails with a charge_exceeds_source_limit error due to the payment amount causing the account to exceed its weekly payment volume limit. |
000-000 | 121212121 | The PaymentIntent that was created with the resulting PaymentMethod fails with a charge_exceeds_transaction_limit error due to the payment amount exceeding the account’s transaction volume limit. |