# Integrate Direct Debit

Direct debit is a transaction where funds are withdrawn directly from a customer’s bank account.

This tutorial guides you on using Chargebee.js to integrate Direct debit payments via Single Euro Payment Area(SEPA) (opens new window), Automated Clearing House(ACH) Network (opens new window), Bacs (opens new window) and Autogiro (opens new window) on your website and creating a subscription after the user checks out.

Currently, Chargebee JS supports the below payment options for Direct debit:

SEPA via Stripe
SEPA via Adyen
SEPA, ACH, Bacs, and Autogiro via GoCardless
SEPA via BlueSnap
ACH via Stripe using Plaid authentication. (opens new window)
ACH via Stripe using Stripe Financial Connections authentication (opens new window)
ACH via Checkout.com using Plaid authentication (opens new window).
ACH via Braintree
ACH via BlueSnap
ACH via Adyen
SEPA via Checkout.com

# Gateway prerequisites

The following is the list of requirements to fulfill before starting the integration steps.

Enable the payment method of your choice:

SEPA via Stripe. Learn more (opens new window).
SEPA via Adyen. Learn more (opens new window).
SEPA, ACH, BACS, Autogiro via GoCardless. Learn more (opens new window).
SEPA via BlueSnap. Learn more (opens new window).
ACH via Stripe. Learn more (opens new window).
ACH via Checkout.com. Learn more (opens new window).
ACH via Braintree. Learn more (opens new window).
ACH via BlueSnap. Learn more (opens new window).
ACH via Adyen Learn more (opens new window)
SEPA via Checkout.com Learn more (opens new window).

Configure Smart routing (opens new window) to select Direct debit payments for the following currencies:

USD for ACH
EUR for SEPA

# Setting up Chargebee JS

# Inserting chargebee.js script in your application

Include the following script in your HTML page. You need to do this only once per page.

<script src="https://js.chargebee.com/v2/chargebee.js"></script>

# Initializing a Chargebee instance

Inside your JavaScript code, initialize chargebee with the publishable key (opens new window) once the page is loaded and get 'chargebee instance' object. This object is used further to create components.

Example:

var cbInstance = Chargebee.init({
	site: "site-name", // your test site
	domain: "https://mybilling.acme.com" // this is an optional parameter.
    publishableKey: "test__"
})

1
2
3
4
5

Learn more about initializing a Chargebee instance.

# Create a Payment Intent

You should create a payment intent before submitting the form to authorize the payments.

payment_intent performs the essential function of tracking different events involved in a transaction. This includes:

Automatically changing its status based on the outcome of authorization and capture events.
Automatically refunding in case of an error post-payment.

A payment_intent can be created at your server-side using create a payment intent API (opens new window) and returned to the client side. The payment method handler uses the created payment_intent internally to perform authorization.

Here's the sample code to create a payment_intent.

TIP

This must be done from your backend to avoid exposing sensitive data.

Example:

Curl
jQuery

The above step should be initiated as a request from your front end.

Front end code:

function createPaymentIntent() {
	return fetch('/payment-intents', {
		method: 'POST',
		body: JSON.stringify({
			amount: 500,
			currency_code: 'USD',
			payment_method_type: 'direct_debit'
		})
	}).then(function(response) {
		return response.json();
	}).then(function(responseJson) {
		return responseJson.payment_intent;
	});
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# Authorize payment intent

Follow these steps to integrate Direct debit on your website.

# 1. Set up Direct debit using the steps below:

a. Load Direct debit integration.
`load` Direct debit integration using `cbInstance.load("direct_debit")`.

b. Set payment intent.
Pass the `payment_intent` object to `direcDebitHandler.setPaymentIntent(payment_intent)`.

# 2. Handle Payment

Use direct_debit and paymentInfo as the input parameter to direcDebitHandler.handlePayment function, as this enables the function to handle Direct debit payments.

# Supported `paymentInfo` Parameters

TIP

Parameters marked with * are mandatory inputs.

Also see: paymentInfo parameters in handlePayment.

ACH via GoCardless

Supported parameters in `paymentInfo`	Notes
useGateway	If true, we will use the GoCardless payment page to collect bankAccount details. The below customer details will be used to prefill the GoCardless payment page.
customer ↳firstName	Required if company is not provided.
customer ↳lastName	Required if company is not provided.
customer ↳company	Required if firstName and lastName are not provided.
customer ↳email *
customer ↳billingAddress
bankAccount ↳accountType *
bankAccount ↳accountNumber *
bankAccount ↳bankCode *
bankAccount ↳countryCode *	Should be US

Note: To see if you can collect bankAccount details at your end, check your GoCardless plan details (opens new window).

ACH via BlueSnap

Supported parameters in `paymentInfo`	Notes
customer ↳firstName	Required if accountHolderType is individual.
customer ↳lastName	Required if accountHolderType is individual.
customer ↳company	Required if accountHolderType is company.
customer ↳email *
bankAccount ↳accountNumber *
bankAccount ↳routingNumber *
bankAccount ↳accountType *
bankAccount ↳accountHolderType *

Autogiro via GoCardless

Supported parameters in `paymentInfo`	Notes
useGateway	If true, we will use the GoCardless payment page to collect bankAccount details. The below customer details will be used to prefill the GoCardless payment page.
customer ↳firstName	Required if company is not provided.
customer ↳lastName	Required if company is not provided.
customer ↳company	Required if firstName and lastName are not provided.
customer ↳email *
customer ↳billingAddress
bankAccount ↳swedishIdentityNumber*
bankAccount ↳accountNumber
bankAccount ↳routingNumber
bankAccount ↳countryCode*	Should be SE

Note: To see if you can collect bankAccount details at your end, check your GoCardless plan details (opens new window).

BACS via GoCardless

Supported parameters in `paymentInfo`	Notes
useGateway	If true, we will use the GoCardless payment page to collect bankAccount details. The below customer details will be used to prefill the GoCardless payment page.
customer ↳firstName	Required if company is not provided.
customer ↳lastName	Required if company is not provided.
customer ↳company	Required if firstName and lastName are not provided.
customer ↳email *
customer ↳billingAddress
bankAccount ↳swedishIdentityNumber*
bankAccount ↳accountNumber
bankAccount ↳routingNumber
bankAccount ↳countryCode*	Should be SE

Note: To see if you can collect bankAccount details at your end, check your GoCardless plan details (opens new window).

SEPA via BlueSnap

Supported parameters in `paymentInfo`
customer ↳firstName
customer ↳lastName
customer ↳email *
bankAccount ↳iban

SEPA(EUR) via Adyen

Supported parameters in `paymentInfo`	Notes
customer ↳firstName	Required if company is not provided.
customer ↳lastName	Required if company is not provided.
customer ↳company	Required if firstName and lastName are not provided.
customer ↳email*
bankAccount ↳iban*

SEPA(EUR) via Stripe

Supported parameters in `paymentInfo`	Notes
customer ↳firstName	Required if company is not provided.
customer ↳lastName	Required if company is not provided.
customer ↳company	Required if firstName and lastName are not provided.
customer ↳email*
customerBillingAddress ↳addressLine1*	Required if country code is AD, PF, TF, GI, GB, GC, VA, IM, JE, MC,NC, BL, PM, SM, CH, and WF
customerBillingAddress ↳addressLine2
customerBillingAddress ↳city
customerBillingAddress ↳state
customerBillingAddress ↳countryCode*	Required if country code is AD, PF, TF, GI, GB, GC, VA, IM, JE, MC,NC, BL, PM, SM, CH, and WF
customerBillingAddress ↳zip
bankAccount ↳iban*	Required

SEPA(EUR) via Checkout.com

Supported parameters in `paymentInfo`	Notes
customer ↳firstName *
customer ↳lastName *
customer ↳email
bankAccount ↳iban*
customerBillingAddress ↳addressLine1*
customerBillingAddress ↳addressLine2
customerBillingAddress ↳city*
customerBillingAddress ↳state
customerBillingAddress ↳countryCode*	Two-letter country code is required.
customerBillingAddress ↳zip*

ACH(USD) via Adyen

Supported parameters in `paymentInfo`
bankAccount ↳firstName *
bankAccount ↳lastName *
bankAccount ↳routingNumber *
bankAccount ↳accountNumber *
bankAccount ↳accountType *

ACH(USD) via Chargebee Payments

Supported parameters in `paymentInfo`
bankAccount ↳nameOnAccount *
bankAccount ↳routingNumber *
bankAccount ↳accountNumber *
bankAccount ↳accountType *

ACH(USD) via Checkout.com and Stripe using Plaid Authentication

Supported parameters in `paymentInfo`
plaid ↳userId
plaid ↳locale

ACH via Stripe using Stripe Financial Connections authentication

Supported parameters in `paymentInfo`
customer ↳firstName*
customer ↳lastName
customer ↳email*

ACH via Braintree

Supported parameters in `paymentInfo`	Notes
customer↳firstName	First name or last name is required.
customer↳lastName	First name or last name is required.
customer↳company*
customer↳billingAddress*
bankAccount↳accountNumber*
bankAccount↳routingNumber*
bankAccount↳accountType*
bankAccount↳accountHolderType*
mandateText*

SEPA via GoCardless

Supported parameters in `paymentInfo`	Notes
useGateway	If true, we will use the GoCardless payment page to collect bankAccount details. The below customer details will be used to prefill the GoCardless payment page.
customer ↳firstName	Required if company is not provided.
customer ↳lastName	Required if company is not provided.
customer ↳company	Required if firstName and lastName are not provided.
customer ↳email *
customer ↳billingAddress
bankAccount ↳iban	Required if the rest of the fields are not provided.
bankAccount ↳accountNumber
bankAccount ↳routingNumber
bankAccount ↳countryCode

Note: To see if you can collect bankAccount details at your end, check your GoCardless plan details (opens new window).

# SEPA via GoCardless Additional information

The table below details the required bankAccount input parameters based on the countryCode

Required bankAccount input parameters based on the countryCode

countryCode	countryName	bankAccount input
AT FI AX DE LV LT LU NL SK SI	Austria Finland Aland Islands Germany Latvia Lithuania Luxembourg Netherlands Slovakia Slovenia	- accountNumber - bankCode - countryCode
BE EE	Belgium Estonia	- accountNumber - countryCode
CY FR GF GP YT RE BL MF PM GR IT MC PT SM ES	Cyprus France French Guiana Guadeloupe Mayotte Reunion Saint Barthélemy Saint Martin Saint Pierre and Miquelon Greece Italy Monaco Portugal San Marino Spain	- accountNumber - routingNumber - bankCode - countryCode
IE MT	Ireland Malta	- accountNumber - routingNumber - countryCode

# Sample Code

cbInstance.load("direct_debit").then(directdebitHandler => {
	createPaymentIntent().then((intent) => {
		directdebitHandler.setPaymentIntent(intent);
		const paymentInfo = {
			plaid: {
				userId: "123",
			}
		}
		directdebitHandler.handlePayment(paymentInfo).then(intent => {
			// SUCCESS!!! payment_intent is authorized.
			var response = fetch('/subscriptions', {
				method: 'POST',
				body: JSON.stringify({
					paymentIntentId: intent.id,
					plan_id: 'pro_plan',
					plan_quantity: 1,
					billingAddress: {
						...
					}, // provide billing address
					customer: {
						...
					} // provide customer details if the subscription is to be created for an existing <code>customer</code> in Chargebee.
				})
			}).then(function(response) {
				return response.json();
			});
		}).catch(err => {
			// OOPS!!! payment_intent is not authorized.
		});
	});
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# Examples of Promises and Callbacks

Using webhooks

Use webhooks (opens new window) for production use, instead of making the subscription creation request from the client-side, it's more secure and reliable to respond to webhooks from Chargebee on the server-side. Listen to the payment_intent_updated (opens new window) event via webhooks and create the subscription when the payment_intent.status (opens new window) is authorized.

Promises
Callbacks

On successful authorization, the payment_intent turns authorized, and Chargebee redirects the user back to your website (payment authorization page).

Learn more about the additional functions supported for Direct debit.

# Create a subscription

Pass the ID of the successfully authorized payment_intent to Chargebee’s create a subscription API (opens new window).

Curl

← Bank Payments Integrate Netbanking →

# Integrate Direct Debit

# Gateway prerequisites

# Setting up Chargebee JS

# Inserting chargebee.js script in your application

# Initializing a Chargebee instance

# Create a Payment Intent

# Authorize payment intent

# 1. Set up Direct debit using the steps below:

# 2. Handle Payment

# Supported paymentInfo Parameters

# SEPA via GoCardless Additional information

# Sample Code

# Examples of Promises and Callbacks

# Create a subscription

# Supported `paymentInfo` Parameters