BACS Direct Debit Component

This page explains how to add BACS Direct Debit to your existing Web Components integration.

Requirements

Select which endpoint you are using:

Import resources for v6

If you are using Web Components v6, import the Component that you need for BACS Direct Debit:

import { AdyenCheckout, BacsDirectDebit } from '@adyen/adyen-web'

API reference

Select which endpoint you are using:

Component configuration

Step 1: Create a DOM element

Create a DOM element on your checkout page, placing it where you want the payment method form to be rendered:

 <div id="directdebit_GB-container"></div>

Step 2: Create an instance of the Component

v6.0.0 or later

Create an instance of the Component, passing:

• Your instance of AdyenCheckout.

const bacsDirectDebit = new BacsDirectDebit(checkout).mount('#directdebit_GB-container');

const bacsDirectDebitComponent = checkout.create('directdebit_GB').mount('#directdebit_GB-container');

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 BACS Direct Debit payment, we store the shopper's payment details with the token. You can use this token to make recurring BACS Direct Debit payments.

You need to use the /payments endpoint to make recurring payments with the token.

Create shopper token

Tokenize the shopper's payment details when you make the initial BACS Direct Debit payment.

1. When you make a POST request to /payments to make a payment, additionally include:

• shopperReference: Your unique ID for this shopper.
• paymentMethod.storePaymentMethod: true.

2. When you receive the RECURRING_CONTRACT webhook, store the pspReference. This is the token you will need to make recurring payments for this shopper.

Make recurring payments

For each recurring payment for this shopper, make a BACS Direct Debit payment with a POST request to the /payments endpoint, and additionally include:

• paymentMethod.recurringDetailReference or paymentMethod.storedPaymentMethodIdfor API v49 and above. This is the pspReference returned in the RECURRING_CONTRACT webhook when you created the token.
• shopperReference: The same unique shopper ID you used to create the shopper token.
• shopperInteraction: ContAuth.

{
   "merchantAccount":"YOUR_MERCHANT_ACCOUNT",
   "reference":"BACS test payment",
   "shopperReference":"YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j",
   "shopperInteraction":"ContAuth",
   "amount":{
      "currency":"GBP",
      "value":49900
   },
   "paymentMethod":{
      "type":"directdebit_GB",
      "storedPaymentMethodId":"7219687191761347"
   },
   "countryCode":"GB",
   "shopperLocale":"en_gb",
   "returnUrl":"https://your-company.com/checkout?shopperOrder=12xy.."
}

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

Test and go live

Before accepting live BACS Direct Debit payments, test your integration using the following details:

Check the status of BACS Direct Debit test payments in your Customer Area > Transactions > Payments.

Before you can accept live BACS Direct Debit payments, you need to submit a request for BACS Direct Debit in your live Customer Area.

See also