Set up a subscription with SEPA Direct Debit

Learn how to create and charge a subscription with SEPA Direct Debit.

Learn how to create and charge for a subscription with SEPA Direct Debit.

Note

If you’re a new user, use the Payment Element instead of using Stripe Elements as described in this guide. The Payment Element provides a low-code integration path with built-in conversion optimisations. For instructions, see Build a subscription.

Create a product and price
Dashboard

Products represent the item or service you’re selling. Prices define how much and how frequently you charge for a product. This includes how much the product costs, what currency you accept, and whether it’s a one-off or recurring charge. If you only have a few products and prices, create and manage them in the Dashboard.

This guide uses a stock photo service as an example and charges customers a 15 EUR monthly subscription. To model this:

Go to the Products page and click Create product.
Enter a Name for the product. You can optionally add a Description and upload an image of the product.
Select a Product tax code. Learn more about product tax codes.
Select Recurring. Then enter 15 for the price and select EUR as the currency.
Choose whether to Include tax in price. You can either use the default value from your tax settings or set the value manually. In this example, select Auto.
Select Monthly for the Billing period.
Click More pricing options. Then select Flat rate as the pricing model for this example. Learn more about flat rate and other pricing models.
Add an internal Price description and Lookup key to organise, query and update specific prices in the future.
Click Next. Then click Add product.

After you create the product and the price, record the price ID so you can use it in subsequent steps. The pricing page displays the ID and it looks similar to this: price_G0FvDp6vZvdwRZ.

Create a customer
Server-side

A subscription needs a customer so it can re-use payment methods and track recurring payments. Create a Customer object when your customer creates an account with your business.

Create the subscription
Server-side

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:

payment_behavior to default_incomplete to simplify collection of the SEPA Direct Debit mandate.
save_default_payment_method to on_subscription to save the payment method as the default for the subscription when the payment succeeds. Saving a default payment method increases the success rate of future subscription payments.

Collect payment method details and mandate acknowledgment
Client-side

You’re ready to collect payment information on the client with Stripe Elements. Elements is a set of pre-built UI components for collecting payment details.

A Stripe Element contains an iframe that securely sends the payment information to Stripe over an HTTPS connection. The checkout page address must also start with https:// rather than http:// for your integration to work.

You can test your integration without using HTTPS. Enable it when you’re ready to accept live payments.

Set up Stripe Elements

Stripe Elements is automatically available as a feature of Stripe.js. Include the Stripe.js script on your payment page by adding it to the head of your HTML file. Always load Stripe.js directly from js.stripe.com to remain PCI compliant. Do not include the script in a bundle or host a copy of it yourself.

payment_setup.html
<head>
  <title>Submit Payment</title>
  <script src="https://js.stripe.com/basil/stripe.js"></script>
</head>

Create an instance of Elements with the following JavaScript on your payment page:

const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);
const elements = stripe.elements();

Add and configure an IBAN Element

Elements needs a place to live in your payment form. Create empty DOM nodes (containers) with unique IDs in your payment form. Additionally, your customer must read and accept the SEPA Direct Debit mandate.

Display the following standard authorization text for your customer to implicitly sign the mandate.

Replace Rocket Rides with your company name.

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.

Copy

Setting up a payment method creates the accepted mandate. As the customer has implicitly signed the mandate when accepting these terms, you must communicate these terms in your form or through email.

payment_setup.html
<form action="/form" 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="Jenny Rosen"
        required
      />
    </div>

    <div class="col">
      <label for="email">
        Email Address
      </label>
      <input
        id="email"
        name="email"
        type="email"
        placeholder="jenny.rosen@example.com"
        required
      />
    </div>
  </div>

  <div class="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.
    -->
    <label for="iban-element">
      IBAN
    </label>
    <div id="iban-element">
      <!-- A Stripe Element will be inserted here. -->
    </div>
  </div>

  <!-- Add the client_secret from the SetupIntent as a data attribute   -->
  <button id="submit-button" data-secret="{CLIENT_SECRET}">
    Set up SEPA Direct Debit
  </button>

  <!-- Display mandate acceptance text. -->
  <div id="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. -->
  <div id="error-message" role="alert"></div>
</form>

When the form loads, you can create an instance of the IBAN Element and mount it to the Element container:

// 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 Element
const iban = elements.create('iban', options);

// Add an instance of the IBAN Element into the `iban-element` <div>
iban.mount('#iban-element');

Submit the payment method details to Stripe
Client-side

Use confirmSepaDebitPayment or, for subscriptions that don’t collect a payment up front, confirmSepaDebitSetup to confirm the subscription and create a SEPA Direct Debit PaymentMethod. Include the customer’s name and email address in the payment_method.billing_details properties.

PaymentSetup.js
// Define stripe with your publishable key
var stripe = Stripe('pk_test_1234');

// Get the IBAN information from your element
var 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 subscription
  const res = await fetch('/create-subscription', {
    method: 'POST',
  });
  const {type, clientSecret} = await res.json();
  const confirmIntent = type === 'setup' ? stripe.confirmSepaDebitSetup : stripe.confirmSepaDebitPayment;

  const {error} = await confirmIntent({
    clientSecret,
    {
      payment_method: {
        sepa_debit: iban,
        billing_details: {
          name: accountholderName.value,
          email: email.value,
        },
      },
    }
  });
});

Set the default payment method
Server-side

You need to add a stored payment method to the customer so future payments are successful. You do this by setting the payment method you just collected at the top level of the Customer object and as the default payment method for invoices:

Manage subscription status
Client-side

When the initial payment succeeds, the status of the subscription is active and no further action is needed. When payments fail, the status is changed to the Subscription status configured in your automatic collection settings. Notify the customer after a failure and charge them with a different payment method.

Note

SEPA Direct Debit payments are never automatically retried, even if you have a retry schedule configured for other payment methods.

Test the integration

You can test your integration using the IBANs below. The payment method details are successfully collected for each IBAN but exhibit different behavior when charged.

Test IBANs

Account Number	Description
`AT611904300234573201`	The PaymentIntent status transitions from `processing` to `succeeded`.
`AT321904300235473204`	The PaymentIntent status transitions from `processing` to `succeeded` after at least three minutes.
`AT861904300235473202`	The PaymentIntent status transitions from `processing` to `requires_payment_method`.
`AT051904300235473205`	The PaymentIntent status transitions from `processing` to `requires_payment_method` after at least three minutes.
`AT591904300235473203`	The PaymentIntent status transitions from `processing` to `succeeded`, but a dispute is immediately created.
`AT981904300000343434`	The payment fails with a `charge_exceeds_source_limit` failure code due to payment amount causing account to exceed its weekly payment volume limit.
`AT601904300000121212`	The payment fails with a `charge_exceeds_weekly_limit` failure code due to payment amount exceeding account's transaction volume limit.
`AT981904300002222227`	The payment fails with an `insufficient_funds` failure code.

OptionalSet the billing period

When you create a subscription, it automatically sets the billing cycle by default. For example, if a customer subscribes to a monthly plan on 7 September, they’re billed on the 7th of every month after that. Some businesses prefer to set the billing cycle manually so that they can charge their customers at the same time each cycle. The billing cycle anchor argument allows you to do this.

Setting the billing cycle manually automatically charges the customer a pro rata amount for the time between the subscription being created and the billing cycle anchor. If you don’t want to charge customers for this time, you can set the proration_behavior argument to none. You can also combine the billing cycle anchor with trial periods to give users free access to your product and then charge them a pro rata amount.

OptionalSubscription trials

Free trials allow customers access to your product for a period of time for free. Using free trials is different from setting proration_behavior to none because you can customise how long the free period lasts. Pass a timestamp in trial end to set the trial period.

You can also combine a billing cycle anchor with a free trial. For example, say it’s September 15 and you want to give your customer a free trial for seven days and then start the normal billing cycle on October 1. You can set the free trial to end on September 22 and the billing cycle anchor to October 1. This gives the customer a free trial for seven days and then charges a prorated amount for the time between the trial ending and October 1. On October 1, you charge them the normal subscription amount for their first full billing cycle.

OptionalCreate SEPA Direct Debit payments using other payment methods

You can create SEPA Direct Debit payments using other payment methods such as Bancontact, iDEAL, and Sofort. Using these payment methods requires a few additional steps. For iDEAL:

Use an idealBank Element to collect payment information.
Confirm the subscription using confirmIdealPayment or, for subscriptions that don’t collect a payment up front, confirmIdealSetup.
List the customer’s payment methods, find the SEPA Direct Debit payment method, and set it as the customer’s default payment method.

For Bancontact and Sofort, substitute:

confirmIdealPayment for confirmBancontactPayment or confirmSofortPayment
confirmIdealSetup for confirmBancontactSetup or confirmSofortSetup

Set up a subscription with SEPA Direct Debit

Learn how to create and charge a subscription with SEPA Direct Debit.

Note

Create a product and priceDashboard

Create a customerServer-side

Create the subscriptionServer-side

Collect payment method details and mandate acknowledgmentClient-side

Set up Stripe Elements

Add and configure an IBAN Element

Submit the payment method details to StripeClient-side

Set the default payment methodServer-side

Manage subscription statusClient-side

Note

Test the integration

Test IBANs

OptionalSet the billing period

OptionalSubscription trials

OptionalCreate SEPA Direct Debit payments using other payment methods

Create a product and price
Dashboard

Create a customer
Server-side

Create the subscription
Server-side

Collect payment method details and mandate acknowledgment
Client-side

Submit the payment method details to Stripe
Client-side

Set the default payment method
Server-side

Manage subscription status
Client-side