(async()=>{const response =awaitfetch('/secret');const{client_secret: clientSecret}=await response.json();// Render the form using the clientSecret})();
By providing your payment information and confirming this payment, you authorise (A)
これをお客様の社名に置き換えます
and Stripe, our payment service provider, to send instructions to your bank to debit your account and (B) your bank to debit your account in accordance with those instructions. As part of your rights, you are entitled to a refund from your bank under the terms and conditions of your agreement with your bank. A refund must be claimed within 8 weeks starting from the date on which your account was debited. Your rights are explained in a statement that you can obtain from your bank. You agree to receive notifications for future debits up to 2 days before they occur.
<formid="payment-form"><divclass="form-row"><labelfor="accountholder-name">
Name
</label><inputid="accountholder-name"name="accountholder-name"></div><divclass="form-row"><labelfor="accountholder-email">
Email
</label><inputid="accountholder-email"name="accountholder-email"></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="ideal-bank-element">
iDEAL Bank
</label><divid="ideal-bank-element"><!-- A Stripe Element will be inserted here. --></div></div><buttonid="submit-button"data-secret="{CLIENT_SECRET}">Submit</button><!-- Display mandate acceptance text. --><divid="mandate-acceptance">
By providing your payment information and confirming this payment, you
authorise (A) Rocket Rides and Stripe, our payment service provider, to
send instructions to your bank to debit your account and (B) your bank to
debit your account in accordance with those instructions. As part of your
rights, you are entitled to a refund from your bank under the terms and
conditions of your agreement with your bank. A refund must be claimed
within 8 weeks starting from the date on which your account was debited.
Your rights are explained in a statement that you can obtain from your
bank. You agree to receive notifications for future debits up to 2 days
before they occur.
</div><!-- Used to display form errors. --><divid="error-message"role="alert"></div></form>
上記のフォームが読み込まれたら、idealBank Element のインスタンスを作成し、そのインスタンスを上記で作成した Element コンテナーにマウントします。
const options ={// Custom styling can be passed to options when creating an Element
style:{
base:{
padding:'10px 12px',
color:'#32325d',
fontSize:'16px','::placeholder':{
color:'#aab7c4'},},},};// Create an instance of the idealBank Elementconst idealBank = elements.create('idealBank', options);// Add an instance of the idealBank Element into// the `ideal-bank-element` <div>
idealBank.mount('#ideal-bank-element');
Element は完全にカスタマイズ可能です。お客様のサイトのデザインと雰囲気に合わせて Element のスタイルを設定して、顧客にシームレスな決済体験を提供できます。Element が選択されているときなど、さまざまな入力状態のスタイルを設定することもできます。
以下に示すように、setup_future_usage パラメーターを渡すには、Elements のインスタンスを作成したときに渡した API バージョンを変更する必要があります。このステップで setup_future_usage を渡すことができない場合は、上記の Stripe Elements の設定の手順をご確認ください。
client.js
const form = document.getElementById('payment-form');const accountholderName = document.getElementById('accountholder-name');
form.addEventListener('submit',(event)=>{
event.preventDefault();// Redirects away from the clientconst{error}=await stripe.confirmIdealPayment('{{PAYMENT_INTENT_CLIENT_SECRET}}',{
payment_method:{
ideal: idealBank,
billing_details:{
name: accountholderName.value,},},
return_url:'https://example.com/checkout/complete',});});
