Use iDEAL to set up future SEPA Direct Debit payments

Learn how to save bank details from an iDEAL payment and charge your customers later with SEPA Direct Debit.

Mise en garde

We recommend that you follow the Set up future payments guide. If you’ve already integrated with Elements, see the Payment Element migration guide.

iDEAL is a single use payment method where customers are required to authenticate each payment. With this integration, Stripe charges your customer 0.01 EUR through iDEAL to collect their bank details. After your customer authenticates the payment, Stripe refunds the payment and stores your customer’s IBAN in a SEPA Direct Debit payment method. You can then use the SEPA Direct Debit PaymentMethod to accept payments or set up a subscription.

Mise en garde

To use iDEAL to set up SEPA Direct Debit payments, you must activate SEPA Direct Debit in the Dashboard. You must also comply with the iDEAL Terms of Service and SEPA Direct Debit Terms of Service.

Setting up future SEPA Direct Debit payments using iDEAL in your app consists of creating a SetupIntent to track the process, collecting mandate acknowledgement, and redirecting your customer to iDEAL. Stripe uses the SetupIntent to track and handle all the states of the setup until the setup completes.

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 a Customer
Server-side

Create a Customer when they create an account with your business and associate it with your internal representation of their account. This enables you to retrieve and use their saved payment method details later.

Create a SetupIntent
Server-side

Create a SetupIntent with the Customer’s ID and set payment_method_types to ideal. The SetupIntent tracks the steps of the set-up process. For iDEAL, this includes collecting a SEPA Direct Debit mandate from the customer and tracking its validity.

Collect payment method details
Client-side

Collect payment details on the client with the Payment Element. The Payment Element is a prebuilt UI component that simplifies collecting payment details for a variety of payment methods.

The Payment Element contains an iframe that securely sends payment information to Stripe over an HTTPS connection. Avoid placing the Payment Element within another iframe because some payment methods require redirecting to another page for payment confirmation.

The checkout page address must start with https:// rather than http:// for your integration to work. You can test your integration without using HTTPS, but remember to enable it when you’re ready to accept live payments.

Set up Stripe.js

The Payment Element is automatically available as a feature of Stripe.js. Include the Stripe.js script on your checkout page by adding it to the head of your HTML file. Always load Stripe.js directly from js.stripe.com to remain PCI compliant. Don’t include the script in a bundle or host a copy of it yourself.

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/v3/"></script>
</head>

Create an instance of Stripe with the following JavaScript on your checkout page:

checkout.js
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

Add the Payment Element to your payment page

The Payment Element needs a place to live on your payment page. Create an empty DOM node (container) with a unique ID in your payment form:

checkout.html
<form id="payment-form">
  <div id="payment-element">
    <!-- Elements will create form elements here -->
  </div>
  <button id="submit">Submit</button>
  <div id="error-message">
    <!-- Display error message to your customers here -->
  </div>
</form>

When the previous form loads, create an instance of the Payment Element and mount it to the container DOM node. Pass the client secret from the previous step into options when you create the Elements instance:

checkout.js
const options = {
  clientSecret: '{{CLIENT_SECRET}}',
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in a previous step
const elements = stripe.elements(options);
// Optional: Autofill user's saved payment methods. If the customer's
// email is known when the page is loaded, you can pass the email
// to the linkAuthenticationElement on mount:
//
//   linkAuthenticationElement.mount("#link-authentication-element",  {
//     defaultValues: {
//       email: 'jenny.rosen@example.com',
//     }
//   })

// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');

Submit the payment method details to Stripe
Client-side

Rather than sending the entire SetupIntent object to the client, use its client secret. This is different from your API keys that authenticate Stripe API requests. The client secret should be handled carefully because it can complete the setup. Do not log it, embed it in URLs, or expose it to anyone but the customer.

Use stripe.confirmSetup to complete the setup intent using details from the Payment Element. Provide a return_url to this function to indicate where Stripe redirects the user after they complete the setup intent. Your user might first be redirected to an intermediate site, such as a bank authorization page, before being redirected to the return_url.

checkout.js
const form = document.getElementById('payment-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const {error} = await stripe.confirmSetup({
    //`Elements` instance that was used to create the Payment Element
    elements,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

  if (error) {
    // This point will only be reached if there is an immediate error when
    // confirming the setup intent. Show error to your customer (for example, payment
    // details incomplete)
    const messageContainer = document.querySelector('#error-message');
    messageContainer.textContent = error.message;
  } else {
    // Your customer will be redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer will be redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});

Make sure the return_url corresponds to a page on your website that provides the status of the setup intent. When Stripe redirects the customer to the return_url, we provide the following URL query parameters:

Parameter	Description
`setup_intent`	The unique identifier for the `SetupIntent`.
`setup_intent_client_secret`	The client secret of the `SetupIntent` object.

Charge the SEPA Direct Debit PaymentMethod later
Server-side

When you need to charge your customer again, create a new PaymentIntent. Find the ID of the SEPA Direct Debit payment method by retrieving the SetupIntent and expanding the latest_attempt field where you will find the generated_sepa_debit ID inside of payment_method_details.

Create a PaymentIntent with the SEPA Direct Debit and Customer IDs.

Test your integration

Using your test API keys to confirm the SetupIntent. After confirming, you’re redirected to a test page with options to authorize or fail the payment method setup.

Click Authorize test payment to test the case when the setup is successful. The SetupIntent transitions from requires_action to succeeded.
Click Fail test payment to test the case when the customer fails to authenticate. The SetupIntent transitions from requires_action to requires_payment_method.

Test your SEPA Direct Debit integration

Set payment_method.billing_details.email to one of the following values to test the PaymentIntent status transitions. You can include your own custom text at the beginning of the email address followed by an underscore. For example, test_1_generatedSepaDebitIntentsFail@example.com results in a SEPA Direct Debit PaymentMethod that always fails when used with a PaymentIntent.

Email Address	Description
`generatedSepaDebitIntentsSucceed@example.com`	The PaymentIntent status transitions from `processing` to `succeeded`.
`generatedSepaDebitIntentsSucceedDelayed@example.com`	The PaymentIntent status transitions from `processing` to `succeeded` after at least three minutes.
`generatedSepaDebitIntentsFail@example.com`	The PaymentIntent status transitions from `processing` to `requires_payment_method`.
`generatedSepaDebitIntentsFailDelayed@example.com`	The PaymentIntent status transitions from `processing` to `requires_payment_method` after at least three minutes.
`generatedSepaDebitIntentsSucceedDisputed@example.com`	The PaymentIntent status transitions from `processing` to `succeeded`, but a dispute is created immediately.

Remarque

Use iDEAL to set up future SEPA Direct Debit payments

Learn how to save bank details from an iDEAL payment and charge your customers later with SEPA Direct Debit.

Mise en garde

Mise en garde

Set up Stripe
Server-side

Create a Customer
Server-side

Create a SetupIntent
Server-side

Collect payment method details
Client-side

Set up Stripe.js

Add the Payment Element to your payment page

Submit the payment method details to Stripe
Client-side

Charge the SEPA Direct Debit PaymentMethod later
Server-side

Test your integration

Test your SEPA Direct Debit integration

FacultatifHandle post-setup events

Voir aussi

Remarque

Use iDEAL to set up future SEPA Direct Debit payments

Learn how to save bank details from an iDEAL payment and charge your customers later with SEPA Direct Debit.

Mise en garde

Mise en garde

Set up StripeServer-side

Create a CustomerServer-side

Create a SetupIntentServer-side

Collect payment method detailsClient-side

Set up Stripe.js

Add the Payment Element to your payment page

Submit the payment method details to StripeClient-side

Charge the SEPA Direct Debit PaymentMethod laterServer-side

Test your integration

Test your SEPA Direct Debit integration

FacultatifHandle post-setup events

Voir aussi

Set up Stripe
Server-side

Create a Customer
Server-side

Create a SetupIntent
Server-side

Collect payment method details
Client-side

Submit the payment method details to Stripe
Client-side

Charge the SEPA Direct Debit PaymentMethod later
Server-side