{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":[]},"redocly_category":"Documentation","type":"markdown"},"seo":{"title":"Form set up","description":"Learn how to set up a FramePay form.","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":"form-set-up","__idx":0},"children":["Form set up"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/basic-setup"},"children":["Get started guides"]}," describe how FramePay gathers data from your checkout form when you pass it to the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Framepay.createToken()"]}," method."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You need to use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["data-rebilly"]}," attributes on the input fields of your checkout form."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"customer-data-attributes","__idx":1},"children":["Customer data attributes"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"required-attributes","__idx":2},"children":["Required attributes"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Payment methods, such as: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["payment card"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bank account"]},", and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Plaid"]}," require customer information."," ","For these methods, the minimum required data is the name of your customer."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Choose between the following options:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fullName"]}," in one input:"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"...\n<input data-rebilly=\"fullName\">\n...\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["firstName"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["lastName"]}," in two different inputs:"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"...\n<input data-rebilly=\"firstName\">\n<input data-rebilly=\"lastName\">\n...\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"optional-attributes","__idx":3},"children":["Optional attributes"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Optionally, add the following ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["data-rebilly"]}," attributes to your inputs:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["organization"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["address"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["address2"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["city"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["region"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["country"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["postalCode"]}," ",{"$$mdtype":"Tag","name":"small","attributes":{},"children":["(optional: add a custom label using the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["data-rebilly-label"]}," attribute)"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["phoneNumbers"]}," ",{"$$mdtype":"Tag","name":"small","attributes":{},"children":["(optional: add a custom label using the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["data-rebilly-label"]}," attribute)"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["emails"]}," ",{"$$mdtype":"Tag","name":"small","attributes":{},"children":["(optional: add a custom label using the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["data-rebilly-label"]}," attribute)"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bic"]}," ",{"$$mdtype":"Tag","name":"small","attributes":{},"children":["(exclusive to the ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/framepay-global-reference#framepaybbanmount"},"children":["BBAN"]}," methods) "]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bankName"]}," ",{"$$mdtype":"Tag","name":"small","attributes":{},"children":["(exclusive to the ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/framepay-global-reference#framepayibanmount"},"children":["IBAN"]}," methods) "]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"inject-token-data","__idx":4},"children":["Inject token data"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["FramePay can inject the newly created token into your payment form."," ","This is useful for sending the token ID or payment instrument details directly to your own backend, as part of the payment form submission."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This is achieved with the use of hidden input fields, that have specific ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["data-rebilly"]}," attributes."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Here are the two supported attributes:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["token"]}," ",{"$$mdtype":"Tag","name":"small","attributes":{},"children":["The token ID."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["payment-instrument"]}," ",{"$$mdtype":"Tag","name":"small","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/catalog/all/payment-tokens/posttoken"},"children":["payment instrument"]}," details as a stringified object."]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The token data is sent directly to your backend when the form is posted."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"example","__idx":5},"children":["Example"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This is an example of a checkout form with visible and hidden customer inputs:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<form>\n  <fieldset>\n    <div class=\"field\">\n      <!-- FramePay will automatically gather this input field's value. -->\n      <input data-rebilly=\"firstName\" placeholder=\"First Name\" />\n    </div>\n    <div class=\"field\">\n      <!-- FramePay will automatically gather this input field's value. -->\n      <input data-rebilly=\"lastName\" placeholder=\"Last Name\" />\n    </div>\n    <div class=\"field\">\n      <!-- FramePay will automatically gather this input field's value. -->\n      <input data-rebilly=\"emails\" placeholder=\"Email\" />\n    </div>\n    <div class=\"field\">\n      <!-- FramePay will automatically gather this input field's value. -->\n      <input data-rebilly=\"phoneNumbers\" data-rebilly-label=\"Custom label\" placeholder=\"Phone\" />\n    </div>\n\n    <!-- The following fields are not visible to the end user.\n             Instead, FramePay will populate those fields with token data. -->\n    <input type=\"hidden\" data-rebilly=\"token\" name=\"rebilly-token\" />\n    <input type=\"hidden\" data-rebilly=\"payment-instrument\" name=\"rebilly-payment-instrument\" />\n  </fieldset>\n  <button>Pay</button>\n</form>\n","lang":"html"},"children":[]}]},"headings":[{"value":"Form set up","id":"form-set-up","depth":1},{"value":"Customer data attributes","id":"customer-data-attributes","depth":2},{"value":"Required attributes","id":"required-attributes","depth":3},{"value":"Optional attributes","id":"optional-attributes","depth":3},{"value":"Inject token data","id":"inject-token-data","depth":2},{"value":"Example","id":"example","depth":2}],"frontmatter":{"seo":{"title":"Form set up","description":"Learn how to set up a FramePay form.","keywords":"Developer docs, FramePay","lang":"en-US"},"redirects":{"/docs/developer-docs/framepay/form-setup/":{},"/docs/content/dev-docs/concept/form-setup/":{},"/docs/content/concepts-and-features/concept/form-setup/":{},"/docs/concepts-and-features/concept/form-setup/":{}},"excludeFromSearch":true},"lastModified":"2026-01-12T11:16:51.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/docs/dev-docs/form-setup","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}