{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["admonition","framepay-toast"]},"redocly_category":"Documentation","type":"markdown"},"seo":{"title":"Examples","description":"FramePay examples.","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":"examples","__idx":0},"children":["Examples"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["FramePay can be customized to match the look and feel of your existing forms."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"payment-cards","__idx":1},"children":["Payment cards"]},{"$$mdtype":"Tag","name":"iframe","attributes":{"style":{"marginBottom":"8px","height":"500px","width":"100%"},"border":"0","frameBorder":"0","scrolling":"no","src":"/examples/framepay-example-card.html"},"children":[]},{"$$mdtype":"Tag","name":"a","attributes":{"target":"_blank","href":"/examples/framepay-example-card.html"},"children":["View example"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"additional-examples","__idx":2},"children":["Additional examples"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"target":"_blank","href":"/examples/framepay-example-card-fullname.html"},"children":["Card with a full-name field"]}," ",{"$$mdtype":"Tag","name":"small","attributes":{},"children":["Card with one input ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fullName"]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"target":"_blank","href":"/examples/framepay-example-expiration-dropbown.html"},"children":["Expiration dropdown"]}," ",{"$$mdtype":"Tag","name":"small","attributes":{},"children":["Card with expiration year and month dropdown fields"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"target":"_blank","href":"/examples/framepay-example-card-styled.html"},"children":["Styled example"]}," ",{"$$mdtype":"Tag","name":"small","attributes":{},"children":["Styled card element"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"target":"_blank","href":"/examples/framepay-example-card-separate-fields.html"},"children":["Separate fields"]}," ",{"$$mdtype":"Tag","name":"small","attributes":{},"children":["Card with separate fields for ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardNumber"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardExpiration"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardCvv"]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"target":"_blank","href":"/examples/framepay-example-card-separated-partial.html"},"children":["Separate fields with partial information"]}," ",{"$$mdtype":"Tag","name":"small","attributes":{},"children":["Card with separate fields for ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardExpiration"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardCvv"]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"target":"_blank","href":"/examples/framepay-example-disabled-submit.html"},"children":["Card with disabled submit"]}," ",{"$$mdtype":"Tag","name":"small","attributes":{},"children":["Card example with submit button that only becomes enabled when all fields are valid"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"target":"_blank","href":"/examples/framepay-example-disabled-submit-separated.html"},"children":["Separate card fields with disabled submit"]}," ",{"$$mdtype":"Tag","name":"small","attributes":{},"children":["Separate card inputs with disabled submit button"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"target":"_blank","href":"/examples/framepay-example-card-separete-dropdown.html"},"children":["Separate fields and expiration dropdown"]}," ",{"$$mdtype":"Tag","name":"small","attributes":{},"children":["Separate card with expiration dropdown"]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"digital-wallets","__idx":3},"children":["Digital wallets"]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["These methods do not require any additional payment form fields, only the button is required to create a payment token. ",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"google-pay","__idx":4},"children":["Google Pay"]},{"$$mdtype":"Tag","name":"iframe","attributes":{"style":{"marginBottom":"8px","height":"200px","width":"100%"},"border":"0","frameBorder":"0","scrolling":"no","src":"/examples/framepay-example-google-pay.html"},"children":[]},{"$$mdtype":"Tag","name":"a","attributes":{"target":"_blank","href":"/examples/framepay-example-google-pay.html"},"children":["View example"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"apple-pay","__idx":5},"children":["Apple Pay"]},{"$$mdtype":"Tag","name":"iframe","attributes":{"style":{"marginBottom":"8px","height":"675px","width":"100%"},"border":"0","frameBorder":"0","scrolling":"no","src":"/examples/framepay-example-apple-pay.html"},"children":[]},{"$$mdtype":"Tag","name":"a","attributes":{"target":"_blank","href":"/examples/framepay-example-apple-pay.html"},"children":["View example"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"samsung-pay","__idx":6},"children":["Samsung Pay"]},{"$$mdtype":"Tag","name":"iframe","attributes":{"style":{"marginBottom":"8px","height":"200px","width":"100%"},"border":"0","frameBorder":"0","scrolling":"no","src":"/examples/framepay-example-samsung-pay.html"},"children":[]},{"$$mdtype":"Tag","name":"a","attributes":{"target":"_blank","href":"/examples/framepay-example-samsung-pay.html"},"children":["View example"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"paypal","__idx":7},"children":["PayPal"]},{"$$mdtype":"Tag","name":"iframe","attributes":{"style":{"marginBottom":"8px","height":"200px","width":"100%"},"border":"0","frameBorder":"0","scrolling":"no","src":"/examples/framepay-example-paypal.html"},"children":[]},{"$$mdtype":"Tag","name":"a","attributes":{"target":"_blank","href":"/examples/framepay-example-paypal.html"},"children":["View example"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"bank-accounts","__idx":8},"children":["Bank accounts"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"bank-account-base","__idx":9},"children":["Bank account base"]},{"$$mdtype":"Tag","name":"iframe","attributes":{"style":{"marginBottom":"8px","height":"680px","width":"100%"},"frameBorder":"0","scrolling":"no","src":"/examples/framepay-example-bank-account-base.html"},"children":[]},{"$$mdtype":"Tag","name":"a","attributes":{"target":"_blank","href":"/examples/framepay-example-bank-account-base.html"},"children":["View example"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"bank-account-styled-buttons","__idx":10},"children":["Bank account styled buttons"]},{"$$mdtype":"Tag","name":"iframe","attributes":{"style":{"marginBottom":"8px","height":"680px","width":"100%"},"frameBorder":"0","scrolling":"no","src":"/examples/framepay-example-bank-account-styled.html"},"children":[]},{"$$mdtype":"Tag","name":"a","attributes":{"target":"_blank","href":"/examples/framepay-example-bank-account-styled.html"},"children":["View example"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"iban","__idx":11},"children":["IBAN"]},{"$$mdtype":"Tag","name":"iframe","attributes":{"style":{"marginBottom":"8px","height":"680px","width":"100%"},"frameBorder":"0","scrolling":"no","src":"/examples/framepay-example-iban.html"},"children":[]},{"$$mdtype":"Tag","name":"a","attributes":{"target":"_blank","href":"/examples/framepay-example-iban.html"},"children":["View example"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"other-payment-methods","__idx":12},"children":["Other Payment Methods"]},{"$$mdtype":"Tag","name":"iframe","attributes":{"style":{"marginBottom":"8px","height":"620px","width":"100%"},"frameBorder":"0","scrolling":"no","src":"/examples/framepay-example-other.html"},"children":[]},{"$$mdtype":"Tag","name":"a","attributes":{"target":"_blank","href":"/examples/framepay-example-other.html"},"children":["View example"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"multiple-payment-methods","__idx":13},"children":["Multiple Payment Methods"]},{"$$mdtype":"Tag","name":"iframe","attributes":{"style":{"marginBottom":"8px","height":"1080px","width":"100%"},"frameBorder":"0","scrolling":"no","src":"/examples/framepay-example-8-multiple.html"},"children":[]},{"$$mdtype":"Tag","name":"a","attributes":{"target":"_blank","href":"/examples/framepay-example-8-multiple.html"},"children":["View example"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"errors","__idx":14},"children":["Errors"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"card-base-errors","__idx":15},"children":["Card base errors"]},{"$$mdtype":"Tag","name":"iframe","attributes":{"style":{"marginBottom":"8px","height":"500px","width":"100%"},"frameBorder":"0","scrolling":"no","src":"/examples/framepay-example-card-base.html"},"children":[]},{"$$mdtype":"Tag","name":"a","attributes":{"target":"_blank","href":"/examples/framepay-example-card-base.html"},"children":["View example"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"card-separated-fields-errors","__idx":16},"children":["Card separated fields errors"]},{"$$mdtype":"Tag","name":"iframe","attributes":{"style":{"marginBottom":"8px","height":"600px","width":"100%"},"frameBorder":"0","scrolling":"no","src":"/examples/framepay-example-card-separated.html"},"children":[]},{"$$mdtype":"Tag","name":"a","attributes":{"target":"_blank","href":"/examples/framepay-example-card-separated.html"},"children":["View example"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"card-expiration-dropdowns-errors","__idx":17},"children":["Card expiration dropdowns errors"]},{"$$mdtype":"Tag","name":"iframe","attributes":{"style":{"marginBottom":"8px","height":"600px","width":"100%"},"frameBorder":"0","scrolling":"no","src":"/examples/framepay-example-card-expiration.html"},"children":[]},{"$$mdtype":"Tag","name":"a","attributes":{"target":"_blank","href":"/examples/framepay-example-card-expiration.html"},"children":["View example"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"bank-accounts-errors","__idx":18},"children":["Bank accounts errors"]},{"$$mdtype":"Tag","name":"iframe","attributes":{"style":{"marginBottom":"8px","height":"880px","width":"100%"},"frameBorder":"0","scrolling":"no","src":"/examples/framepay-example-bban-errors.html"},"children":[]},{"$$mdtype":"Tag","name":"a","attributes":{"target":"_blank","href":"/examples/framepay-example-bban-errors.html"},"children":["View example"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"iban-errors","__idx":19},"children":["IBAN errors"]},{"$$mdtype":"Tag","name":"iframe","attributes":{"style":{"marginBottom":"8px","height":"680px","width":"100%"},"frameBorder":"0","scrolling":"no","src":"/examples/framepay-example-iban-errors.html"},"children":[]},{"$$mdtype":"Tag","name":"a","attributes":{"target":"_blank","href":"/examples/framepay-example-iban-errors.html"},"children":["View example"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"events","__idx":20},"children":["Events"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"card","__idx":21},"children":["Card"]},{"$$mdtype":"Tag","name":"blockquote","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["See browser console"]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"style":{"marginBottom":"8px","height":"680px","width":"100%"},"frameBorder":"0","scrolling":"no","src":"/examples/framepay-example-events.html"},"children":[]},{"$$mdtype":"Tag","name":"a","attributes":{"target":"_blank","href":"/examples/framepay-example-events.html"},"children":["View example"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"card-expiration-dropdown","__idx":22},"children":["Card expiration dropdown"]},{"$$mdtype":"Tag","name":"blockquote","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["See browser console"]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"style":{"marginBottom":"8px","height":"680px","width":"100%"},"frameBorder":"0","scrolling":"no","src":"/examples/framepay-example-events-dropdown.html"},"children":[]},{"$$mdtype":"Tag","name":"a","attributes":{"target":"_blank","href":"/examples/framepay-example-events-dropdown.html"},"children":["View example"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"card-separated","__idx":23},"children":["Card separated"]},{"$$mdtype":"Tag","name":"blockquote","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["See browser console"]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"style":{"marginBottom":"8px","height":"680px","width":"100%"},"frameBorder":"0","scrolling":"no","src":"/examples/framepay-example-events-separated.html"},"children":[]},{"$$mdtype":"Tag","name":"a","attributes":{"target":"_blank","href":"/examples/framepay-example-events-separated.html"},"children":["View example"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"card-separated-dropdown","__idx":24},"children":["Card separated dropdown"]},{"$$mdtype":"Tag","name":"blockquote","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["See browser console"]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"style":{"marginBottom":"8px","height":"680px","width":"100%"},"frameBorder":"0","scrolling":"no","src":"/examples/framepay-example-events-separated-dropdowns.html"},"children":[]},{"$$mdtype":"Tag","name":"a","attributes":{"target":"_blank","href":"/examples/framepay-example-events-separated-dropdowns.html"},"children":["View example"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"extra-data","__idx":25},"children":["Extra data"]},{"$$mdtype":"Tag","name":"iframe","attributes":{"style":{"marginBottom":"8px","height":"680px","width":"100%"},"frameBorder":"0","scrolling":"no","src":"/examples/framepay-example-extra-data.html"},"children":[]},{"$$mdtype":"Tag","name":"a","attributes":{"target":"_blank","href":"/examples/framepay-example-extra-data.html"},"children":["View example"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"using-with-reactjs","__idx":26},"children":["Using with ReactJS"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Supported versions: 14,15,16+"," ","We offer an easy-to-use wrapper component for ReactJS, called ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://www.npmjs.com/package/@rebilly/framepay-react"},"children":["framepay-react"]},"."]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For a quick and easy integration, use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["framepay-react"]}," to integrate FramePay into your React project."," ","To use FramePay directly, see the ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://codesandbox.io/s/framepay-preact-direct-integration-irbi4"},"children":["framepay-preact-direct-integration"]}," example."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"using-with-vuejs","__idx":27},"children":["Using with VueJS"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["We offer an easy-to-use wrapper component for VueJS, called ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://www.npmjs.com/package/@rebilly/framepay-vue"},"children":["framepay-vue"]},"."]},{"$$mdtype":"Tag","name":"FramepayToast","attributes":{},"children":[]}]},"headings":[{"value":"Examples","id":"examples","depth":1},{"value":"Payment cards","id":"payment-cards","depth":2},{"value":"Additional examples","id":"additional-examples","depth":3},{"value":"Digital wallets","id":"digital-wallets","depth":2},{"value":"Google Pay","id":"google-pay","depth":3},{"value":"Apple Pay","id":"apple-pay","depth":3},{"value":"Samsung Pay","id":"samsung-pay","depth":3},{"value":"PayPal","id":"paypal","depth":3},{"value":"Bank accounts","id":"bank-accounts","depth":2},{"value":"Bank account base","id":"bank-account-base","depth":3},{"value":"Bank account styled buttons","id":"bank-account-styled-buttons","depth":3},{"value":"IBAN","id":"iban","depth":2},{"value":"Other Payment Methods","id":"other-payment-methods","depth":2},{"value":"Multiple Payment Methods","id":"multiple-payment-methods","depth":2},{"value":"Errors","id":"errors","depth":2},{"value":"Card base errors","id":"card-base-errors","depth":3},{"value":"Card separated fields errors","id":"card-separated-fields-errors","depth":3},{"value":"Card expiration dropdowns errors","id":"card-expiration-dropdowns-errors","depth":3},{"value":"Bank accounts errors","id":"bank-accounts-errors","depth":3},{"value":"IBAN errors","id":"iban-errors","depth":3},{"value":"Events","id":"events","depth":2},{"value":"Card","id":"card","depth":3},{"value":"Card expiration dropdown","id":"card-expiration-dropdown","depth":3},{"value":"Card separated","id":"card-separated","depth":3},{"value":"Card separated dropdown","id":"card-separated-dropdown","depth":3},{"value":"Extra data","id":"extra-data","depth":2},{"value":"Using with ReactJS","id":"using-with-reactjs","depth":2},{"value":"Using with VueJS","id":"using-with-vuejs","depth":2}],"frontmatter":{"seo":{"title":"Examples","description":"FramePay examples.","keywords":"Developer docs, FramePay","lang":"en-US"},"redirects":{"/docs/developer-docs/framepay/examples/":{},"/docs/content/dev-docs/concept/examples/":{},"/docs/content/concepts-and-features/concept/examples/":{},"/docs/concepts-and-features/concept/examples/":{}},"excludeFromSearch":true},"lastModified":"2026-01-12T11:16:51.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/docs/dev-docs/examples","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}