---
title: "Web Component"
description: "Add ACH Direct Debit to your Components integration."
url: "https://docs.adyen.com/payment-methods/ach-direct-debit/web-component"
source_url: "https://docs.adyen.com/payment-methods/ach-direct-debit/web-component.md"
canonical: "https://docs.adyen.com/payment-methods/ach-direct-debit/web-component"
last_modified: "2026-06-01T15:33:15+02:00"
language: "en"
---

# Web Component

Add ACH Direct Debit to your Components integration.

[View source](/payment-methods/ach-direct-debit/web-component.md)

You can add ACH Direct Debit to your existing integration. The following instructions show only what you must add to your integration specifically for ACH Direct Debit.

If an instruction on this page corresponds with a step in the main integration guide, it includes a link to that corresponding step of the main integration guide.

What you must add to your integration depends on the [server-side flow](/online-payments/build-your-integration) that your integration uses:

## Sessions flow Component

### Before-You-Begin

## Requirements

| Requirement                                                    | Description                                                                                                                                                                                                                                         |   |
| -------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | - |
| **Integration type**                                           | Make sure that you have an existing Sessions flow [Web Components integration](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Components).                                                                         |   |
| **[API credentials](/development-resources/api-credentials/)** | To issue a refund using an API request, make sure you have the **Merchant allow bank-refund** role.                                                                                                                                                 |   |
| **[Customer Area roles](/account/user-roles)**                 | To issue a refund using the Customer Area, make sure you have the **Merchant allow bank-refund** role.                                                                                                                                              |   |
| **Checkout API**                                               | Make sure that you use Checkout API v68 or later.                                                                                                                                                                                                   |   |
| **Webhooks**                                                   | Subscribe to [DIRECT\_DEBIT\_NOTICE\_OF\_CHANGE\_NOTIFICATION](https://docs.adyen.com/api-explorer/Webhooks/latest/post/DIRECT_DEBIT_NOTICE_OF_CHANGE_NOTIFICATION) webhooks to receive a notification when a shopper has outdated banking details. |   |
| **Setup steps**                                                | Before you begin, [add ACH Direct Debit in your Customer Area](/payment-methods/add-payment-methods).                                                                                                                                               |   |

### Add-Parameters-Sessions-Request

## Add additional parameters to your /sessions request

You do not need to add any parameters when you [create a payment session](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Components#create-a-payment-session).

### Import

## Import ACH Direct Debit

When you [import Adyen Web](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Components#get-adyen-web), include `Ach`.

**Import**

```javascript
import { AdyenCheckout, Ach } from '@adyen/adyen-web';
```

### Add-Configuration

## Add additional configuration for ACH Direct Debit

[Configure the Component](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Components#configure-the-component) with the following configuration object:

| Parameter                                                                                                        | Required | Description                                                                                                               |
| ---------------------------------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------- |
| `enableStoreDetails` **[v5.24.0](/online-payments/release-notes?integration_type=web\&version=5.24.0) or later** |          | Set to **true** to show the checkbox for saving the payment details. The default is **false**.                            |
| `hasHolderName`                                                                                                  |          | Set to **false** to hide this field if you want to pass the data yourself. The default is **true**.                       |
| `holderNameRequired`                                                                                             |          | Set to **false** if you want to make it optional for the shopper to fill cardholder name fields. The default is **true**. |

**Add a configuration object**

```bash
var achConfiguration = Ach.Configuration()
achConfiguration.enableStoreDetails = true // Optional configuration to show checkbox for saving payment details.
```

### Initialize

## Initialize the Component for ACH Direct Debit

To [initialize](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Components#initialize-the-payment-session) ACH Direct Debit, use the `Ach` class.

**Initialize the Component**

```javascript
const achComponent = newAch(checkout,
    {
    
    // The configuration object for ACH Direct Debit that you created.
    
    // Mount the Component to a container.
    } ).mount('#ach-container') 
```

### Payment-Outcome

## Get the payment outcome

Your integration [gets the payment outcome](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Components#get-the-payment-outcome).

Note that after we successfully received your request, it may take up to five business days to know whether the payment was authorised by the bank. If the bank authorised the payment, it will appear in the [Settlement details report](/reporting/settlement-detail-report). If the bank failed to authorise the payment, you will receive a [CHARGEBACK webhook](#chargebacks).

## Test and go live

You can test payments as well as chargebacks.

### Test the payment flow

Before making live payments, use the following account details to test your integration.

| `ownerName` | `bankAccountNumber`                                             | `bankLocationId` (routing number)                                                |
| ----------- | --------------------------------------------------------------- | -------------------------------------------------------------------------------- |
| Any name    | Any correctly formatted account number. Example: **1234567890** | Any correctly formatted routing number. Examples: **011000138** or **121000358** |

### Test the chargeback flow

You can test the chargeback flow by making test payments with an `ownerName` value that consists of **chargeback:** followed by an ACH return [reason code](/risk-management/chargeback-guidelines/ach-chargebacks/#ach-retry). For example, **chargeback:R01**. The other account details to use are the same as when testing payments.

For instructions, see [Test a chargeback scenario](/risk-management/chargeback-guidelines/ach-chargebacks#test-a-chargeback-scenario).

## Advanced flow Component

## Requirements

| Requirement                                                    | Description                                                                                                                                                                                                                                         |   |
| -------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | - |
| **Integration type**                                           | Make sure that you have an existing Advanced flow [Web Components integration](/online-payments/build-your-integration/advanced-flow?platform=Web\&integration=Components).                                                                         | { |
| **[API credentials](/development-resources/api-credentials/)** | To issue a refund using an API request, make sure you have the **Merchant allow bank-refund** role.                                                                                                                                                 |   |
| **[Customer Area roles](/account/user-roles)**                 | To issue a refund using the Customer Area, make sure you have the **Merchant allow bank-refund** role.                                                                                                                                              |   |
| **Webhooks**                                                   | Subscribe to [DIRECT\_DEBIT\_NOTICE\_OF\_CHANGE\_NOTIFICATION](https://docs.adyen.com/api-explorer/Webhooks/latest/post/DIRECT_DEBIT_NOTICE_OF_CHANGE_NOTIFICATION) webhooks to receive a notification when a shopper has outdated banking details. |   |
| **Setup steps**                                                | Before you begin, [add ACH Direct Debit in your Customer Area](/payment-methods/add-payment-methods).                                                                                                                                               |   |

### Import

## Import ACH Direct Debit

When you [import Adyen Web](/online-payments/build-your-integration/advanced-flow/?platform=Web\&integration=Components#get-adyen-web), include `Ach`.

**Import**

```javascript
import { AdyenCheckout, Ach } from '@adyen/adyen-web';
```

### Add-Configuration

## Add additional configuration for ACH Direct Debit

[Configure the Component](/online-payments/build-your-integration/advanced-flow/?platform=Web\&integration=Components#configure-the-component) with the following configuration object:

| Parameter                                                                                                        | Required | Description                                                                                                               |
| ---------------------------------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------- |
| `enableStoreDetails` **[v5.24.0](/online-payments/release-notes?integration_type=web\&version=5.24.0) or later** |          | Set to **true** to show the checkbox for saving the payment details. The default is **false**.                            |
| `hasHolderName`                                                                                                  |          | Set to **false** to hide this field if you want to pass the data yourself. The default is **true**.                       |
| `holderNameRequired`                                                                                             |          | Set to **false** if you want to make it optional for the shopper to fill cardholder name fields. The default is **true**. |

**Add a configuration object**

```bash
var achConfiguration = Ach.Configuration()
achConfiguration.enableStoreDetails = true // Optional configuration to show checkbox for saving payment details.
```

### Initialize

## Initialize the Component for ACH Direct Debit

To [initialize](/online-payments/build-your-integration/advanced-flow/?platform=Web\&integration=Components#initialize-the-payment-session) ACH Direct Debit, use the `Ach` class.

**Initialize the Component**

```javascript
const achComponent = newAch(checkout,
    {
    
    // The configuration object for ACH Direct Debit that you created.
    
    // Mount the Component to a container.
    } ).mount('#ach-container') 
```

### Add-Parameters-Payments-Request

## Add additional parameters to your /payments request

You do not need to add any parameters to the [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) request when you [make a payment](/online-payments/build-your-integration/advanced-flow/?platform=Web\&integration=Components#make-a-payment).

### Payment-Outcome

## Get the payment outcome

Your integration [gets the payment outcome](/online-payments/build-your-integration/advanced-flow/?platform=Web\&integration=Components#get-the-payment-outcome).

Note that after we successfully received your request, it may take up to five business days to know whether the payment was authorised by the bank. If the bank authorised the payment, it will appear in the [Settlement details report](/reporting/settlement-detail-report). If the bank failed to authorise the payment, you will receive a [CHARGEBACK webhook](#chargebacks).

## Test and go live

You can test payments as well as chargebacks.

### Test the payment flow

Before making live payments, use the following account details to test your integration.

| `ownerName` | `bankAccountNumber`                                             | `bankLocationId` (routing number)                                                |
| ----------- | --------------------------------------------------------------- | -------------------------------------------------------------------------------- |
| Any name    | Any correctly formatted account number. Example: **1234567890** | Any correctly formatted routing number. Examples: **011000138** or **121000358** |

### Test the chargeback flow

You can test the chargeback flow by making test payments with an `ownerName` value that consists of **chargeback:** followed by an ACH return [reason code](/risk-management/chargeback-guidelines/ach-chargebacks/#ach-retry). For example, **chargeback:R01**. The other account details to use are the same as when testing payments.

For instructions, see [Test a chargeback scenario](/risk-management/chargeback-guidelines/ach-chargebacks#test-a-chargeback-scenario).

## See also

* [Account validation with giact](/payment-methods/ach-direct-debit/verification-with-giact)
* [Tokenization](/online-payments/tokenization)
* [ACH Direct Debit chargebacks](/risk-management/chargeback-guidelines/ach-chargebacks)
