Set up bank account payment method

This topic describes how to add FramePay to a checkout form and use it to tokenize bank account payment information.

For an interactive example of this implementation, see Interactive example.

1. Obtain IDs and a publishable API key

  1. Obtain your organization ID and website ID:
    1. In the left navigation bar, click Settings icon.
    2. Click My organization & websites.
    3. In the Organization info section, note the ID value.
    4. In the Website section, note the ID value. A website and organization is created automatically when you sign up to Rebilly. For more information, see Organizations and websites.
  2. Obtain your publishable API key:
    1. In the left navigation bar, click Automation icon, then click API keys.
    2. Optionally, if you have not created a publishable key:
      1. In top right of the screen, click Add API.
      2. In the API Key Type section, select Publishable, then complete the form and click Save API key.
      3. Go back to the API Keys page.
    3. Select a publishable key and copy the Key value.

2. Include FramePay

2.1 Include FramePay script

To enable FramePay, include the following line in your checkout page. This exposes the library in the global JS scope as Rebilly.
<script src=""></script>
Automatic updates

Backward-compatible updates will be made available automatically without the need to change this URL.

2.2 Optionally, include default css styles

By default, FramePay does not inject CSS styles for the elements that are generated into your checkout form. However, we provide a CSS file that you can use to give elements a default look.

To enable default FramePay styles, include the following line in your checkout page:

<link href="" rel="stylesheet">
Here is an example of a basic payment card element that is styled using the default rebilly.css:

3. Create your checkout form

3.1 Add customer information inputs to your form

FramePay automatically gathers data from your checkout form.

To enable this, you must use data-rebilly attributes on your input fields.

Create a basic customer information form:

    <!-- FramePay will automatically gather these input field's values. -->
    <input data-rebilly="firstName" placeholder="First Name">
    <input data-rebilly="lastName" placeholder="Last Name">

3.2 Add mounting points to your form

You must specify empty HTML elements where FramePay will render the bank account inputs.

Edit your checkout form to add new HTML elements with unique IDs.

For example:

    <label>Account Type</label>
    <div id="bank-account-type"/>

    <label>Account Number</label>
    <div id="bank-account-number"/>

    <label>Routing Number</label>
    <div id="bank-routing-number"/>

4. Initialize FramePay

In an earlier step, you included the rebilly.js script in your checkout page. In this step you will access the globally exposed Rebilly object to initialize it.
  1. If you do not have a sandbox API key, create one.
  2. Include the following line in the JS of your checkout page, and replace the publishableKey value with your API key:
        // Use your own publishable key:
        publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
You must replace the key pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs with your own. We recommend starting with a sandbox key. To create a publishable key, check API keys section.

5. Mount the bank account elements

After initializing, FramePay will emit a ready event.Use Rebilly.on to listen to the ready event and determine when to mount the bank account elements with Rebilly.bban.mount:
 Rebilly.on('ready', function () {
    // bank-account-type, bank-account-number and bank-routing-number are the unique ids
    // of the divs that you added in the previous step
    Rebilly.bban.mount('#bank-account-type', 'accountType');
    Rebilly.bban.mount('#bank-account-number', 'accountNumber');
    Rebilly.bban.mount('#bank-routing-number', 'routingNumber');

6. Create the payment token

Once you have mounted your bank account elements, your customer will be able to complete the form.

To send the form data to FramePay, call Rebilly.createToken.
  • If the collected form data is valid, you will receive a successful result with a new payment token.
  • If the collected form data is not valid, you will receive an error explaining why.
// create a token from the fields within a form
try {
    const paymentToken = await Rebilly.createToken(form);
    // Use this paymentToken in your subsequent Rebilly API calls to complete your checkout process
} catch (error) {
    // Inspect this error to understand why the token creation failed
    console.log('❌ Create token error:', error);

7. Use the token

Use the generated token to complete the integration.

Interactive example

This is an interactive example of a basic checkout form which uses FramePay to tokenize bank account payment information. It is the result of the previous steps.

View console.log messages, and open a new window.