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 .
   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 , 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

<script src="https://framepay.rebilly.com/rebilly.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 enable default FramePay styles, include the following line in your checkout page:

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

3. Create your checkout form

3.1 Add customer information inputs to your form

FramePay automatically gathers data from your checkout form.

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

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:

Rebilly.initialize({
        // Use your own publishable key:
        publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',
});

5. Mount the bank account elements

 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.

• 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
    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.