Recurly.js lets you gather bank-account information directly on your checkout page—no hosted iframes required—and swap it for a temporary Recurly token. The workflow is identical across regions: build a simple HTML form, call recurly.bankAccount.token, receive the token, and submit it to any v3 endpoint that accepts billing_info. The sections below show the exact inputs and token calls for:

• U.S. ACH
• IBAN / SEPA
• UK Bacs
• Australia Becs

Key details

US bank accounts

Tokenize your users' bank account information

Just as with a card form, use the data-recurly attribute to identify fields to Recurly.js. Since Recurly.js does not need to inject fields for bank accounts, all fields may be displayed as inputs on your payment form.

<form>
  <input type="text" data-recurly="routing_number">
  <input type="text" data-recurly="account_number">
  <input type="text" data-recurly="account_number_confirmation">
  <input type="text" data-recurly="account_type">
  <input type="text" data-recurly="name_on_account">
  <input type="hidden" name="recurly-token" data-recurly="token">
  <button>submit</button>
</form>

US bank account inputs

Getting a token

fn recurly.bankAccount.token

You may call recurly.bankAccount.token with a form element:

recurly.bankAccount.token(document.querySelector('form'), tokenHandler);

Or with an Object:

const billingInfo = {
  // required attributes
  routing_number: '123456780',
  account_number: '111111111',
  account_number_confirmation: '111111111',
  account_type: 'checking',
  name_on_account: 'Pat Smith',

  // optional attributes
  address1: '123 Main St.',
  address2: 'Unit 1',
  city: 'Hope',
  state: 'WA',
  postal_code: '98552',
  country: 'US',
  vat_number: 'SE0000'
};

recurly.bankAccount.token(billingInfo, tokenHandler);

Both methods require using a handler function like this one:

function tokenHandler (err, token) {
  if (err) {
    // handle error using err.code and err.fields
  } else {
    // handle success using token.id
  }
}

This sends bank account billing information to Recurly to store as a token, returning that token id back to you via callback.

International bank accounts (IBAN)

Tokenize your users' International Bank Account (IBAN) information in
order to process SEPA transactions.

Similar to configuring a card form, use the data-recurly attribute to
identify IBAN specific inputs. Since Recurly.js does not need to inject fields for bank accounts, all fields may be displayed as inputs on your payment form.

<form>
  <input type="text" data-recurly="name_on_account">
  <input type="text" data-recurly="iban">
  <input type="text" data-recurly="country">
  <input type="hidden" name="recurly-token" data-recurly="token">
  <button>submit</button>
</form>

IBAN inputs

Getting a token

fn recurly.bankAccount.token

You may call recurly.bankAccount.token with a form element:

recurly.bankAccount.token(document.querySelector('form'), tokenHandler);

Or with an Object:

const ibanBillingInfo = {
  name_on_account: 'Pat Smith',
  iban: 'GB33BUKB20201555555555',
  country: 'GB'
};

recurly.bankAccount.token(ibanBillingInfo, tokenHandler);

Both methods require using a handler function like this one:

function tokenHandler (err, token) {
  if (err) {
    // handle error using err.code and err.fields
  } else {
    // handle success using token.id
  }
}

This sends IBAN information to Recurly to store as a token, returning that token id back to you via callback.

UK bank accounts (BACS)

Tokenize your users' UK based Bank Account (Bacs) information in
order to process Bacs transactions.

Similar to configuring a card form, use the data-recurly attribute to
identify Bacs specific inputs. Since Recurly.js does not need to inject fields for bank accounts, all fields may be displayed as inputs on your payment form.

<form>
  <input type="text" data-recurly="sort_code">
  <input type="text" data-recurly="account_number">
  <input type="text" data-recurly="account_number_confirmation">
  <input type="hidden" name="type" value="bacs" data-recurly="type">
  <input type="text" data-recurly="name_on_account">
  <input type="hidden" name="recurly-token" data-recurly="token">
  <button>submit</button>
</form>

UK bank account (BACS) inputs

Getting a token

fn recurly.bankAccount.token

You may call recurly.bankAccount.token with a form element:

recurly.bankAccount.token(document.querySelector('form'), tokenHandler);

Or with an Object:

const bacsBillingInfo = {
  name_on_account: 'Charles George',
  account_number: '55779911',
  account_number_confirmation: '55779911',
  sort_code: '200000',
  type: 'bacs'
};

recurly.bankAccount.token(bacsBillingInfo, tokenHandler);

Both methods require using a handler function like this one:

function tokenHandler (err, token) {
  if (err) {
    // handle error using err.code and err.fields
  } else {
    // handle success using token.id
  }
}

This sends Bacs information to Recurly to store as a token, returning that token id back to you via callback.

Arguments (form)

Alternatively, you can call recurly.bankAccount.token with a plain JavaScript object. This allows a more direct interface to the payment flow, eliminating any need to use the DOM.

Arguments (object)

A callback is always required

Callback arguments

Returns

Nothing.

Australian bank accounts (BECS)

Tokenize your users' Australian based Bank Account (Becs) information in
order to process Becs transactions.

Similar to configuring a card form, use the data-recurly attribute to
identify Becs specific inputs. Since Recurly.js does not need to inject fields for bank accounts, all fields may be displayed as inputs on your payment form.

<form>
  <input type="text" data-recurly="bsb_code">
  <input type="text" data-recurly="account_number">
  <input type="text" data-recurly="account_number_confirmation">
  <input type="hidden" name="type" value="becs" data-recurly="type">
  <input type="text" data-recurly="name_on_account">
  <input type="hidden" name="recurly-token" data-recurly="token">
  <button>submit</button>
</form>

Australian bank account (BECS) inputs

Getting a token

fn recurly.bankAccount.token

You may call recurly.bankAccount.token with a form element:

recurly.bankAccount.token(document.querySelector('form'), tokenHandler);

Or with an Object:

const becsBillingInfo = {
  name_on_account: 'Charles George',
  account_number: '55779911',
  account_number_confirmation: '55779911',
  bsb_code: '082902',
  type: 'becs'
};

recurly.bankAccount.token(becsBillingInfo, tokenHandler);

Both methods require using a handler function like this one:

function tokenHandler (err, token) {
  if (err) {
    // handle error using err.code and err.fields
  } else {
    // handle success using token.id
  }
}

This sends Becs information to Recurly to store as a token, returning that token id back to you via callback.

Arguments (form)

Alternatively, you can call recurly.bankAccount.token with a plain JavaScript object. This allows a more direct interface to the payment flow, eliminating any need to use the DOM.

Arguments (object)

A callback is always required

Callback arguments

Returns

Nothing.