{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["partial","admonition"]},"redocly_category":"Documentation","type":"markdown"},"seo":{"title":"Tokenize payments made using a bank account","description":"Learn how to use the FramePay JavaScript library to tokenize payments made using a bank account.","siteUrl":"https://www.rebilly.com","image":"/assets/rebillysocial.94fb32fc280c9e84b963c440ec462771d25f4e6fdaaa6c59de41e8135113b46b.db81178d.png","lang":"en-US","llmstxt":{"hide":false,"sections":[{"title":"Table of contents","includeFiles":["**/*"],"excludeFiles":[]}],"excludeFiles":[]},"keywords":"Developer docs, FramePay"},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"tokenize-payments-made-using-a-bank-account","__idx":0},"children":["Tokenize payments made using a bank account"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This topic describes how to add the FramePay library to a checkout form and use it to tokenize payments made using a bank account."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For an interactive example of this implementation, see ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"#interactive-example"},"children":["Interactive example"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"1-obtain-ids-and-a-publishable-api-key","__idx":1},"children":["1. Obtain IDs and a publishable API key"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["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 ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/settings/organizations-and-websites"},"children":["Organizations and websites"]},"."]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://app-sandbox.rebilly.com/"},"children":["Log in or sign up to Rebilly"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Obtain your organization ID and website ID:",{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["In the left navigation bar, press ",{"$$mdtype":"Tag","name":"UiIcon","attributes":{"type":"settings","displayText":"true"},"children":[]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["In the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Management"]}," section, press ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["My organization & websites"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["In the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Organization details"]}," section, note the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["ID"]}," value."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["In the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Website"]}," section, note the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["ID"]}," value."]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Obtain your publishable API key:",{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["In the left navigation bar, press ",{"$$mdtype":"Tag","name":"UiIcon","attributes":{"type":"automations","displayText":"true"},"children":[]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["In the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Development"]}," section, press ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["API keys"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Optionally, if you have not created a publishable key:",{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["In top right of the page, press ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Create API key"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["In the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Description"]}," field, enter a recognizable name for the key."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["In the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Type"]}," section, select ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Publishable"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Optionally, in the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Organizations"]}," dropdown, select the organizations that can use the API key."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Optionally, in the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Allowed IPs"]}," field, enter the IP addresses that are permitted to use the API key."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Press ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Save API key"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Go to the API keys page."]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Select a publishable key and copy the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Key"]}," value."]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"2-include-framepay","__idx":2},"children":["2. Include FramePay"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"21-include-framepay-script","__idx":3},"children":["2.1 Include FramePay script"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To enable FramePay, include the following line in your checkout page."," ","This exposes the library in the global JS scope as ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Framepay"]},"."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Automatic updates"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Backward-compatible updates will be made available automatically without the need to change this URL."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"22-optionally-include-default-css-styles","__idx":4},"children":["2.2 Optionally, include default CSS styles"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["By default, FramePay does not inject CSS styles for the elements that are generated into your checkout form."," ","A CSS file is provided to give elements a default look."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To activate default FramePay styles, include the following line in your checkout page:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Here is an example of a basic payment card element that is styled using the default ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["framepay.css"]},":"]},{"$$mdtype":"Tag","name":"iframe","attributes":{"width":"600","border":"0","frameBorder":"0","scrolling":"no","src":"/examples/framepay-example-1-card.html"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"3-create-your-checkout-form","__idx":5},"children":["3. Create your checkout form"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"31-add-customer-information-inputs-to-your-form","__idx":6},"children":["3.1 Add customer information inputs to your form"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["FramePay automatically gathers data from your checkout form."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To activate this, you must use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["data-rebilly"]}," attributes on your input fields."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Create a basic customer information form:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"
\n ...\n \n \n \n ...\n
\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"32-add-mounting-points-to-your-form","__idx":7},"children":["3.2 Add mounting points to your form"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You must specify empty HTML elements where FramePay will render the bank account inputs."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Edit your checkout form to add new HTML elements with unique IDs."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For example:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"
\n ...\n \n
\n\n \n
\n\n \n
\n ...\n\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"4-initialize-framepay","__idx":8},"children":["4. Initialize FramePay"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In an earlier step, you included the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["framepay.js"]}," script in your checkout page."," ","In this step you will access the globally exposed ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Framepay"]}," object to initialize it."]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["If you do not have a sandbox API key, ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/api-keys#create-an-api-key"},"children":["create one"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Include the following line in the JS of your checkout page, and replace the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["publishableKey"]}," value with your API key:"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"Framepay.initialize({\n // Use your own publishable key:\n publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',\n});\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You must replace the key ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs"]}," with your own."," ","Start with a sandbox key."," ","To create a publishable key, ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/api-keys"},"children":["check API keys section"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"5-mount-the-bank-account-elements","__idx":9},"children":["5. Mount the bank account elements"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["After initializing, FramePay will emit a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ready"]}," event."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Framepay.on"]}," to listen to the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ready"]}," event and determine when to mount the bank account elements with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Framepay.bban.mount"]},":"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"Framepay.on('ready', function () {\n // bank-account-type, bank-account-number and bank-routing-number are the unique ids\n // of the divs that you added in the previous step\n Framepay.bban.mount('#bank-account-type', 'accountType');\n Framepay.bban.mount('#bank-account-number', 'accountNumber');\n Framepay.bban.mount('#bank-routing-number', 'routingNumber');\n});\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"6-create-the-payment-token","__idx":10},"children":["6. Create the payment token"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Once you have mounted your bank account elements, your customer will be able to complete the form."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To send the form data to FramePay, call ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Framepay.createToken"]},"."]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["If the collected form data is valid, you will receive a successful result with a new payment token."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["If the collected form data is not valid, you will receive an error explaining why."]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"// create a token from the fields within a form\ntry {\n const paymentToken = await Framepay.createToken(form);\n // Use this paymentToken in your subsequent Rebilly API calls to complete your checkout process\n console.log(paymentToken);\n} catch (error) {\n // Inspect this error to understand why the token creation failed\n console.log('❌ Create token error:', error);\n}\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"7-use-the-token","__idx":11},"children":["7. Use the token"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use the generated token to complete the integration."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"interactive-example","__idx":12},"children":["Interactive example"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["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."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"/examples/framepay/setup-bank-method.html","target":"_blank"},"children":["View console.log messages, and open a new window."]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"border":"0","frameBorder":"0","scrolling":"no","style":{"height":"650px","width":"100%"},"src":"/examples/framepay/setup-bank-method.html"},"children":[]}]},"headings":[{"value":"Tokenize payments made using a bank account","id":"tokenize-payments-made-using-a-bank-account","depth":1},{"value":"1. Obtain IDs and a publishable API key","id":"1-obtain-ids-and-a-publishable-api-key","depth":2},{"value":"2. Include FramePay","id":"2-include-framepay","depth":2},{"value":"2.1 Include FramePay script","id":"21-include-framepay-script","depth":3},{"value":"2.2 Optionally, include default CSS styles","id":"22-optionally-include-default-css-styles","depth":3},{"value":"3. Create your checkout form","id":"3-create-your-checkout-form","depth":2},{"value":"3.1 Add customer information inputs to your form","id":"31-add-customer-information-inputs-to-your-form","depth":3},{"value":"3.2 Add mounting points to your form","id":"32-add-mounting-points-to-your-form","depth":2},{"value":"4. Initialize FramePay","id":"4-initialize-framepay","depth":2},{"value":"5. Mount the bank account elements","id":"5-mount-the-bank-account-elements","depth":2},{"value":"6. Create the payment token","id":"6-create-the-payment-token","depth":2},{"value":"7. Use the token","id":"7-use-the-token","depth":2},{"value":"Interactive example","id":"interactive-example","depth":2}],"frontmatter":{"seo":{"title":"Tokenize payments made using a bank account","description":"Learn how to use the FramePay JavaScript library to tokenize payments made using a bank account.","keywords":"Developer docs, FramePay","lang":"en-US"},"redirects":{"/docs/content/dev-docs/tutorial/setup-bank-method/":{},"/docs/content/concepts-and-features/tutorial/setup-bank-method/":{},"/docs/concepts-and-features/tutorial/setup-bank-method/":{},"/docs/content/billing/concept/bank-account-method/":{}},"excludeFromSearch":true},"lastModified":"2026-01-12T11:16:51.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/docs/dev-docs/setup-bank-method","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}