銀行口座情報を提供し、この支払いを確認することにより、お客様はこのダイレクトデビットのリクエストとダイレクトデビットリクエスト利用規約に同意し、Stripe Payments Australia Pty Ltd ACN 160 180 343 Direct Debit User ID number 507156 (以下「Stripe」) が、 (「加盟店」) に代わって、加盟店から別途通知された金額について、バルク電子決済システム (BECS) を使用してお客様の口座から引き落としを行うことを許可するものとします。また、お客様が上記の口座の名義人または承認された署名者であることを認めるものとします。
Australia Bank Account Element は、BSB 番号と口座番号の両方の収集と検証に役立ちます。決済フォームに、一意の ID を指定して空の DOM ノード (コンテナー) を作成し、この Element を含めてください。また、顧客はダイレクトデビットリクエスト利用規約を読んで同意する必要もあります。
submit_payment.html
HTML
CSS
No results
<formaction="/charge"method="post"id="payment-form"><divclass="form-row inline"><divclass="col"><labelfor="accountholder-name">
Name
</label><inputid="accountholder-name"name="accountholder-name"placeholder="John Smith"required/></div><divclass="col"><labelfor="email">
Email Address
</label><inputid="email"name="email"type="email"placeholder="john.smith@example.com"required/></div></div><divclass="form-row"><!--
Using a label with a for attribute that matches the ID of the
Element container enables the Element to automatically gain focus
when the customer clicks on the label.
--><labelfor="au-bank-account-element">
Bank Account
</label><divid="au-bank-account-element"><!-- A Stripe Element will be inserted here. --></div></div><!-- Used to display bank (branch) name associated with the entered BSB --><divid="bank-name"></div><!-- Used to display form errors. --><divid="error-message"role="alert"></div><!-- Display mandate acceptance text. --><divclass="col"id="mandate-acceptance">
By providing your bank account details and confirming this payment,
you agree to this Direct Debit Request and the
<ahref="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><!-- Add the client_secret from the PaymentIntent as a data attribute --><buttonid="submit-button"data-secret="{{CLIENT_SECRET}}">Confirm Payment</button></form>
フォームが読み込まれるときに、次のように、Australia Bank Account Element のインスタンスを作成し、それを Element コンテナーにマウントできます。
// Custom styling can be passed to options when creating an Elementconst 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",// or "solid"}// Create an instance of the auBankAccount Element.const auBankAccount = elements.create('auBankAccount', options);// Add an instance of the auBankAccount Element into// the `au-bank-account-element` <div>.
auBankAccount.mount('#au-bank-account-element');