支払いページで、次の JavaScript を使用して Elements のインスタンスを作成します。
const stripe =Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx'
);const elements = stripe.elements();
IBAN Element を追加して設定する
Elements には、決済フォーム内での配置場所が必要です。決済フォームで一意の ID を持つ空の DOM ノード (コンテナー) を作成します。また、顧客は SEPA ダイレクトデビット同意書を読み、同意する必要があります。
以下に示す定型の承認用文書を表示し、顧客が黙示的にこの同意書に署名するようにしてください。
「Rocket Rides」はお客様の社名に置き換えます。
Authorization text template
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.
<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="Jenny Rosen"required/></div><divclass="col"><labelfor="email">
Email Address
</label><inputid="email"name="email"type="email"placeholder="jenny.rosen@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="iban-element">
IBAN
</label><divid="iban-element"><!-- A Stripe Element will be inserted here. --></div></div><!-- Add the client_secret from the PaymentIntent as a data attribute --><buttonid="submit-button"data-secret="{{CLIENT_SECRET}}">Submit Payment</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
and/or PPRO, its local 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>
フォームが読み込まれるときに、IBAN Element のインスタンスを作成し、それを Element コンテナーにマウントできます。
// Custom styling can be passed to options when creating an 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,
supportedCountries:['SEPA'],// Elements can use a placeholder as an example IBAN that reflects// the IBAN format of your customer's country. If you know your// customer's country, we recommend passing it to the Element as the// placeholderCountry.
placeholderCountry:'DE',};// Create an instance of the IBAN Elementconst iban = elements.create('iban', options);// Add an instance of the IBAN Element into the `iban-element` <div>
iban.mount('#iban-element');
