新しいユーザーの場合には、このガイドで説明されているように、Stripe Elements ではなく、Payment Element を使用してください。Payment Element は、コンバージョン最適化が組み込まれたローコードの導入パスを提供します。手順については、サブスクリプションの構築をご覧ください。
Create the subscription using the customer and price IDs. Return to the client side the client_secret from either the latest invoice’s confirmation_secret.client_secret or, for subscriptions that don’t collect a payment up front, the pending_setup_intent. Additionally, set:
# Set your secret key. Remember to switch to your live secret key in production.# See your keys here: https://dashboard.stripe.com/apikeysStripe.api_key =
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="/form"method="post"id="setup-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 SetupIntent as a data attribute --><buttonid="submit-button"data-secret="{CLIENT_SECRET}">
Set up SEPA Direct Debit
</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');
// Define stripe with your publishable keyvar stripe =Stripe('pk_test_1234');// Get the IBAN information from your elementvar iban = document.getElementById('iban-element');const form = document.getElementById('payment-form');const accountholderName = document.getElementById('accountholder-name');const email = document.getElementById('email');
form.addEventListener('submit',async(event)=>{
event.preventDefault();// Create the subscriptionconst res =awaitfetch('/create-subscription',{
method:'POST',});const{type, clientSecret}=await res.json();const confirmIntent = type ==='setup'? stripe.confirmSepaDebitSetup: stripe.confirmSepaDebitPayment;const{error}=awaitconfirmIntent({
clientSecret,{
payment_method:{
sepa_debit: iban,
billing_details:{
name: accountholderName.value,
email: email.value,},},}});});
