SEPA Direct Debit Component

Our SEPA Direct Debit Component renders SEPA Direct Debit in your payment form, where shoppers provide their account holder name and IBAN, and then review and confirm the payment.

Before you begin

This page explains how to add SEPA Direct Debit to your existing Web Components integration. The Web Components integration works the same way for all payment methods. If you haven't done this integration yet, refer to our Components integration guide.

Before starting your SEPA Direct Debit integration:

1. Make sure that you have set up your back end implementation, and created an instance of AdyenCheckout.
2. Add SEPA in your test Customer Area.

Show SEPA Direct Debit in your payment form

To show SEPA Direct Debit Component in your payment form, you need to:

1. Specify in your /paymentMethods request:

   • countryCode: Country where SEPA Direct Debit is supported. For example, NL.
   • amount.currency: EUR

   Pass the full response to the paymentMethodsResponse object when creating an instance of the AdyenCheckout.

2. Add the SEPA Direct Debit Component:

   a. Create a DOM element for SEPA, placing it where you want the form to be rendered:

   <div id="sepa"></div>

   b. Create an instance of the SEPA Component, and mount it.

   const sepa = checkout.create("sepadirectdebit").mount("#sepa");

Make a payment

When the shopper selects to pay, the Component calls the onChange event, which contains a state.data.

1. If state.isValid is true, collect the state.data and pass this to your server.

2. From your server, make a /payments, specifying:
   • paymentMethod: The state.data.paymentMethod from the onChange event from your front end.

{
  "merchantAccount":"YOUR_MERCHANT_ACCOUNT",
  "reference":"YOUR_UNIQUE_REFERENCE",
  "amount":{
    "currency":"EUR",
    "value":"1000"
  },
  "paymentMethod":{
    "type":"sepadirectdebit",
    "sepa.ownerName":"A. Schneider",
    "sepa.ibanNumber":"DE87123456781234567890"
  }
}

The /payments response contains:

• resultCode: RedirectShopper
• details: Array that contains the key parameter name and the corresponding data type that you should expect when the shopper is redirected to your returnURL. You need to submit this value in your /payments/details request when handling the redirect.
• action: Object containing information about the redirect.
• action.paymentData: Value that you need to submit in your /payments/details request when handling the redirect.
• action.method: GET or POST. The HTTP request method that you should use. After the shopper completes the payment, they will be redirected back to your returnURL using the same method.
  The redirect method depends on your payment method configuration and the length of the data included in the request, so make sure that your integration can handle both HTTP GET and HTTP POST methods.

{
    "pspReference": "881572960484022G",
    "resultCode": "Received",
    "merchantReference": "sepa test"
}

Present the payment result

Use the resultCode that you received in the /payments/details response to present the payment result to your shopper.

The resultCode values you can receive for SEPA Direct Debit are:

Recurring payments

If you have a recurring or subscription business model we recommend tokenizing the shopper's payment details. When you create a shopper token from a SEPA payment, we store their payment details with the token. The token can be used to make recurring payments for the shopper.

You can create a shopper token and then make subsequent recurring payments with the token using the /payments endpoint.

Create shopper token

Tokenize the shopper's payment details when you make the initial SEPA payment.

1. When you call /payments to make a payment, additionally include:
   • shopperReference: Your unique ID for this shopper.
   • paymentMethod.storePaymentMethod: true
2. When you receive the response (or the notification) that the payment was authorised, note the recurringDetailReference. This is the token you will need to make recurring payments for this shopper.

Make recurring payment

For each recurring payment for this shopper, make a SEPA payment with a /payments call, and additionally include:

• recurringDetailReference: Token you received back in the initial payment.
• shopperReference: The shopper ID you provided when created the shopper token.
• shopperInteraction: ContAuth.

{
   "amount":{
       "value":1000,
       "currency":"EUR"
   },
   "paymentMethod":{
       "type":"sepadirectdebit",
       "recurringDetailReference":"7219687191761347"
   },
   "reference":"Your Reference Here",
   "merchantAccount":"TestMerchant",
   "shopperReference":"YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j",
   "shopperInteraction":"ContAuth"
}

If the payment was successfully received the response will contain a Received resultCode and a pspReference, which is our unique identifier for this transaction. You can track whether the payment was successful using notifications.

Chargebacks

If a shopper for some reason wants the funds from a payment returned, they can ask their bank for a refund. This is referred to as a chargeback.
For SEPA, the chargeback process gives significant consumer rights to the shopper. They have:

• Eight weeks to dispute a SEPA payment without providing a reason.
• Thirteen months to dispute an unauthorised or incorrect SEPA payment when they provide evidence to their bank.

A SEPA chargeback notification can indicate that:

• The shopper disputed the charge.
• There were insufficient funds in the shopper's bank account.

A chargeback notification contains:

• pspReference: Adyen's unique reference associated with the payment request.
• eventCode: CHARGEBACK.
• reason: Reason for the chargeback.
• success: true.

Here is an example of a notification that indicates a SEPA chargeback because there were insufficient funds in the shopper's bank account.

{
  "live":"false",
  "notificationItems":[
    {
      "NotificationRequestItem":{
        "amount":{
          "value":1000,
          "currency":"EUR"
        },

        "pspReference":"931354792477061C",
        "eventCode":"CHARGEBACK",
        "eventDate":"2020-01-01T01:02:01.111+02:00",
        "merchantAccountCode":"YourMerchantAccount",
        "merchantReference":"YourMerchantReference",
        "paymentMethod":"sepadirectdebit",
        "reason":"Insufficient funds",
        "success":true
      }
    }
  ]
}

For more information on the chargeback process, refer to Dispute management.

Test and go live

Before making live SEPA payments, use the following Account Names and IBANs to test your integration.

You can check the status of SEPA test payments in your Customer Area > Transactions > Payments.

See also