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

When you first log in to Rebilly, you create an organization as part of the setup process. A default website is created when a new organization is created. For more information, see Organizations and websites.

1. Log in or sign up to Rebilly.
2. Obtain your organization ID and website ID:
   1. In the left navigation bar, press Settings .
   2. In the Management section, press My organization & websites.
   3. In the Organization details section, note the ID value.
   4. In the Website section, note the ID value.
3. Obtain your publishable API key:
   1. In the left navigation bar, press Automations .
   2. In the Development section, press API keys.
   3. Optionally, if you have not created a publishable key:
      1. In top right of the screen, press Create API key.
      2. In the API key type section, select Publishable.
      3. Optionally, in the Organizations dropdown, select the organizations that can use the API key.
      4. Optionally, in the Allowed IPs field, enter the IP addresses that are permitted to use the API key.
      5. Press Save API key.
      6. Go to the API keys page.
   4. 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 Framepay.

<script src="https://framepay.rebilly.com/framepay.js"></script>

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 activate default FramePay styles, include the following line in your checkout page:

<link href="https://framepay.rebilly.com/framepay.css" rel="stylesheet" />

Here is an example of a basic payment card element that is styled using the default framepay.css:

3. Create your checkout form

3.1 Add customer information inputs to your form

FramePay automatically gathers data from your checkout form.

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

Create a basic customer information form:

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

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:

<form>
  ...
  <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" />
  ...
</form>

4. Initialize FramePay

In an earlier step, you included the framepay.js script in your checkout page. In this step you will access the globally exposed Framepay 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:

Framepay.initialize({
  // 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 Framepay.on to listen to the ready event and determine when to mount the bank account elements with Framepay.bban.mount:

Framepay.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
  Framepay.bban.mount('#bank-account-type', 'accountType');
  Framepay.bban.mount('#bank-account-number', 'accountNumber');
  Framepay.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 Framepay.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 Framepay.createToken(form);
    // Use this paymentToken in your subsequent Rebilly API calls to complete your checkout process
    console.log(paymentToken);
} 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.