Accept a SEPA Direct Debit payment

Learn to accept SEPA Direct Debit payments.

Web

Mobile

Notiz

When processing SEPA Direct Debit payments using the Stripe Creditor ID, we recommend you use the prebuilt checkout page to collect SEPA Direct Debit mandates.

Accepting SEPA Direct Debit payments on your website consists of creating an object to track a payment, collecting payment method information and mandate acknowledgement, and submitting the payment to Stripe for processing. Stripe uses this payment object, the PaymentIntent, to track and handle all the states of the payment until the payment completes.

You can also set up a SEPA Direct Debit PaymentMethod by having your customer authenticate their bank details with Bancontact, iDEAL, or Sofort.

Set up Stripe
Server-side

First, you need a Stripe account. Register now.

Use our official libraries for access to the Stripe API from your application:

Create or retrieve a Customer
Server-side

To reuse a SEPA Direct Debit account for future payments, it must be attached to a Customer.

You should create a Customer object when your customer creates an account with your business. Associating the ID of the Customer object with your own internal representation of a customer will enable you to retrieve and use the stored payment method details later.

Create a new Customer or retrieve an existing Customer to associate with this payment. Include the following code on your server to create a new Customer.

Create a PaymentIntent
Server-side

A PaymentIntent is an object that represents your intent to collect payment from a customer and tracks the lifecycle of the payment process through each stage. First, create a PaymentIntent on your server and specify the amount to collect and the eur currency (SEPA Direct Debit does not support other currencies). If you already have an integration using the Payment Intents API, add sepa_debit to the list of payment method types for your PaymentIntent. Specify the id of the Customer.

To save the SEPA Direct Debit account for reuse, set the setup_future_usage parameter to off_session. SEPA Direct Debit only accepts an off_session value for this parameter.

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 prebuilt 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.

submit_payment.html
<head>
  <title>Submit Payment</title>
  <script src="https://js.stripe.com/v3/"></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.

Kopieren

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

submit_payment.html
HTML
<form action="/charge" method="post" id="payment-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 PaymentIntent as a data attribute   -->
  <button id="submit-button" data-secret="{{CLIENT_SECRET}}">Submit Payment</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 to Stripe
Client-side

Rather than sending the entire PaymentIntent object to the client, use its client secret from step 3. This is different from your API keys that authenticate Stripe API requests.

The client secret should still be handled carefully because it can complete the charge. Do not log it, embed it in URLs, or expose it to anyone but the customer.

Use stripe.confirmSepaDebitPayment to complete the payment when the user submits the form. Creating a SEPA Direct Debit PaymentMethod requires that you include the customer’s name and email address in the billing_details property of the payment_method parameter. Additionally, IBANs with the country codes AD, PF, TF, GI, GB, GG, VA, IM, JE, MC, NC, BL, PM, SM, CH, and WF require the country and line1 properties of the billing_details.address property. Listen to the change event of the IBAN element to get the IBAN’s country code.

const form = document.getElementById('payment-form');
const accountholderName = document.getElementById('accountholder-name');
const email = document.getElementById('email');
const submitButton = document.getElementById('submit-button');
const clientSecret = submitButton.dataset.secret;

form.addEventListener('submit', (event) => {
  event.preventDefault();
  stripe.confirmSepaDebitPayment(
    clientSecret,
    {
      payment_method: {
        sepa_debit: iban,
        billing_details: {
          name: accountholderName.value,
          email: email.value,
        },
      },
    }
  );
});

Confirm the PaymentIntent succeeded

SEPA Direct Debit is a delayed notification payment method, so funds are not immediately available. When the payment has been submitted successfully, the PaymentIntent status is updated from requires_confirmation to processing. After the payment has succeeded, the PaymentIntent status is updated from processing to succeeded.

The following events are sent when the PaymentIntent status is updated:

Event	Description	Next steps
`payment_intent.processing`	The customer’s payment was submitted to Stripe successfully.	Wait for the initiated payment to succeed or fail.
`payment_intent.succeeded`	The customer’s payment succeeded.	Fulfill the goods or services that the customer purchased.
`payment_intent.payment_failed`	The customer’s payment was declined.	Contact the customer via email or push notification and request another payment method.

We recommend using webhooks to confirm the charge has succeeded and to notify the customer that the payment is complete.

Note that because setup_future_usage and customer were set, the PaymentMethod will be attached to the Customer object once the payment enters the processing state. This attachment happens regardless of whether payment eventually succeeds or fails.

Test the integration

Stripe provides several test numbers you can use to make sure your integration is ready for production. Use the SEPA Direct Debit test numbers when testing your Checkout integration with SEPA Direct Debit.

Test IBANs

Kontonummer	Beschreibung
`BE62510007547061`	Der Status des PaymentIntent wechselt von `processing` zu `succeeded`.
`BE78510007547064`	Der Status des PaymentIntent wechselt nach mindestens drei Minuten von `processing` zu `succeeded`.
`BE68539007547034`	Der Status des PaymentIntent wechselt von `processing` zu `requires_payment_method`.
`BE51510007547065`	Der Status des PaymentIntent wechselt nach mindestens drei Minuten von `processing` zu `requires_payment_method`.
`BE08510007547063`	Der Status des PaymentIntent wechselt von `processing` zu `succeeded`, es wird jedoch sofort eine Zahlungsanfechtung erstellt.
`BE90510000343434`	Die Zahlung schlägt mit dem Fehlercode `charge_exceeds_source_limit` fehl, da der Zahlungsbetrag den wöchentlichen Grenzwert für das Zahlungsvolumen überschreitet.
`BE52510000121212`	Die Zahlung schlägt mit dem Fehlercode `charge_exceeds_weekly_limit` fehl, da der Zahlungsbetrag das Transaktionsvolumenlimit des Kontos überschreitet.
`BE90510002222227`	Die Zahlung schlägt mit dem Fehlercode `insufficient_funds` fehl.

Notiz

Accept a SEPA Direct Debit payment

Learn to accept SEPA Direct Debit payments.

Notiz

Set up Stripe
Server-side

Create or retrieve a Customer
Server-side

Create a PaymentIntent
Server-side

Collect payment method details and mandate acknowledgment
Client-side

Set up Stripe Elements

Add and configure an IBAN Element

Submit the payment to Stripe
Client-side

Confirm the PaymentIntent succeeded

Test the integration

Test IBANs

OptionalValidate the IBAN Element

OptionalConfigure customer debit date

OptionalCustomize mandate references with a prefix

Siehe auch

Notiz

Accept a SEPA Direct Debit payment

Learn to accept SEPA Direct Debit payments.

Notiz

Set up StripeServer-side

Create or retrieve a CustomerServer-side

Create a PaymentIntentServer-side

Collect payment method details and mandate acknowledgmentClient-side

Set up Stripe Elements

Add and configure an IBAN Element

Submit the payment to StripeClient-side

Confirm the PaymentIntent succeeded

Test the integration

Test IBANs

OptionalValidate the IBAN Element

OptionalConfigure customer debit date

OptionalCustomize mandate references with a prefix

Siehe auch

Set up Stripe
Server-side

Create or retrieve a Customer
Server-side

Create a PaymentIntent
Server-side

Collect payment method details and mandate acknowledgment
Client-side

Submit the payment to Stripe
Client-side