{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["code-walkthrough","admonition","step"]},"redocly_category":"Documentation","type":"markdown"},"seo":{"title":"Tokenize payment data from multiple payment methods","description":"Learn how to use the FramePay JavaScript library to tokenize payment data from multiple methods in one checkout 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":"CodeWalkthrough","attributes":{"__idx":1,"preview":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This is an interactive example of a basic checkout form that uses the FramePay library to tokenize payment data from multiple methods. ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/examples/framepay/setup-multiple-payment-methods.html","target":"_blank"},"children":["View console.log messages in a new window"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Complete the payment flow using this test card number: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["4111 1111 1111 1111"]},"."," ","Use any future expiration date and any 3 digits for the CVC number."," ","For more test cards, see ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/tutorials/test-payment-cards"},"children":["Test cards, IBANs, and ACH details"]},"."]},{"$$mdtype":"Tag","name":"iframe","attributes":{"border":"0","frameBorder":"0","scrolling":"no","style":{"height":"800px","width":"100%"},"src":"/examples/framepay/setup-multiple-payment-methods.html"},"children":[]}],"filters":{},"filesets":[{"files":[{"path":"docs/dev-docs/_code-samples/setup-multiple-payment-methods/example.html","content":["","",{"start":2,"condition":{"steps":["include-framepay-stylesheet"]},"children":[" "," "]},{"start":6,"condition":{"steps":["include-framepay-script"]},"children":[" "]}," ",{"start":10,"condition":{"steps":["add-css-for-checkout-form"]},"children":[" "]}," ",""," ","
"," ","",""],"metadata":{"steps":["include-framepay-stylesheet","include-framepay-script","add-css-for-checkout-form","add-mounting-points","create-checkout-form","add-mounting-points","add-mounting-points","add-mounting-points","add-mounting-points"]},"basename":"example.html","language":"html"}],"downloadAssociatedFiles":[]},{"files":[{"path":"docs/dev-docs/_code-samples/setup-multiple-payment-methods/client.js","content":["let mountedFrames = [];","",{"start":2,"condition":{"steps":["initialize"]},"children":["// Initialize FramePay","Framepay.initialize({",{"start":5,"condition":{"steps":["rebilly-data"]},"children":[" publishableKey: \"pk_sandbox_7FB1AJwXpG7qOrQukcKcBV_jBJ5622bGmTlknWH\","," organizationId: \"97f171a4-55a7-4f9d-a5b3-4da67cb5ee06\","," websiteId: \"rebilly.com\","]},{"start":10,"condition":{"steps":["transaction-data"]},"children":[" transactionData: {"," currency: \"USD\","," amount: 10,"," },"]},{"start":16,"condition":{"steps":["style-framepay-inputs"]},"children":[" style: {"," buttons: {"," base: {"," color: \"#363636\","," background: \"#ffffff\","," fontSize: \"14px\","," borderColor: \"#dbdbdb\","," height: \"36px\","," \":hover\": {"," background: \"#ffffff\","," borderColor: \"#b5b5b5\","," },"," },"," focus: {"," background: \"#ffffff\","," borderColor: \"#000000\","," },"," active: {"," background: \"#209cee\","," borderColor: \"#209cee\","," },"," },"," },"]},"});"]},"",{"start":44,"condition":{"steps":["mount-pre-selected-payment-method"]},"children":["Framepay.on(\"ready\", function () {"," // Mount any express methods"," Framepay.paypal.mount(\"#paypal-mount\");",""," // Mount card payment and cache its element instance"," const card = Framepay.card.mount(\"#mounting-point\");"," mountedFrames.push(card);","});"]},"","function getSelectedMethod() {"," return document.querySelector('input[name=\"paymentMethod\"]:checked').value;","}","",{"start":59,"condition":{"steps":["handle-change-when-customer-selects-different-payment-method"]},"children":["document.querySelectorAll('input[name=\"paymentMethod\"]').forEach((radio) => {"," radio.addEventListener(\"change\", function resetFramepay() {"," const method = getSelectedMethod();"," mountedFrames.forEach((item) => item.destroy());"," mountedFrames = [];",""," if (method === \"ach\") {"," const type = Framepay.bankAccount.mount(\"#bank-account-type\", \"bankAccountType\");"," const number = Framepay.bankAccount.mount(\"#bank-account-number\", \"bankAccountNumber\");"," const routing = Framepay.bankAccount.mount(\"#bank-routing-number\", \"bankRoutingNumber\");"," mountedFrames.push(type, number, routing);"," }",""," if (method === \"payment-card\") {"," const card = Framepay.card.mount(\"#mounting-point\");"," mountedFrames.push(card);"," }"," });","});"]},"",{"start":81,"condition":{"steps":["express-methods"]},"children":["Framepay.on(\"token-ready\", (token) => {"," alert(JSON.stringify(token, null, 2));","});"]},"",{"start":87,"condition":{"steps":["non-express-methods"]},"children":["// Add form submit event handler","const form = document.getElementById(\"payment-form\");","form.addEventListener(\"submit\", async (e) => {"," e.preventDefault();"," e.stopPropagation();",""," const extraData = {"," method: getSelectedMethod(),"," };",""," try {"," const token = await Framepay.createToken(form, extraData);"," alert(JSON.stringify(token, null, 2));"," } catch (error) {"," alert(JSON.stringify(error, null, 2));"," }","});"]},""],"metadata":{"steps":["initialize","rebilly-data","transaction-data","style-framepay-inputs","mount-pre-selected-payment-method","handle-change-when-customer-selects-different-payment-method","express-methods","non-express-methods"]},"basename":"client.js","language":"javascript"}],"downloadAssociatedFiles":[]},{"files":[{"path":"docs/dev-docs/_code-samples/setup-multiple-payment-methods/style.css","content":[{"start":0,"condition":{"steps":["add-css-for-checkout-form","style-framepay-inputs"]},"children":[":root {"," --color-text: #2c3e50;"," --color-text-grey: #999;"," --color-body-bg: #ecf0f1;","}","html {"," font:"," 16px -apple-system,"," Helvetica,"," sans-serif;"," color: var(--color-text);"," background: var(--color-body-bg);","}","body {"," margin: 0;"," padding: 0;","}",".container {"," max-width: 500px;"," width: 100%;"," padding: 20px;"," margin: 0 auto;"," box-sizing: border-box;","}","","/* Form elements */",".mm-example .payment-methods {"," margin-top: 1.5rem;","}",".mm-example #paypal-mount {"," margin-top: 1rem;","}",".mm-example .field + .field {"," margin-top: 0.75rem;","}",".mm-example .label {"," display: block;"," font-weight: bold;"," font-size: 0.875rem;"," margin-bottom: 0.5rem;","}","",".mm-example input,",".mm-example button {"," -webkit-appearance: none;"," -moz-appearance: none;"," appearance: none;"," outline: none;"," border-style: none;","}",".mm-example input {"," border: 1px solid #dbdbdb;"," border-radius: 4px;"," padding: 10px;"," width: 100%;"," box-sizing: border-box;"," background-color: #ffffff;"," color: #8a97a0;"," box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);"," transition: all 0.4s;","}",".mm-example input:focus {"," border-color: #3273dc;"," box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);"," color: #363636;","}",".mm-example button {"," position: relative;"," display: block;"," padding: 15px;"," color: #fff;"," margin-top: 1rem;"," border-radius: 4px;"," background: #23d160;"," font-size: 1.125rem;"," text-align: center;"," font-style: normal;"," width: 100%;"," transition: all 0.4s;","}",".mm-example button:hover {"," background: #20bc56;"," cursor: pointer;","}","","/* Accordion styles */","/* CSS-only (no-js) accordion */",".tabs {"," border-radius: 8px;"," overflow: hidden;"," box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5);"," margin-top: 1rem;","}",".tab {"," width: 100%;"," overflow: hidden;","}",".tab > input[type=\"radio\"] {"," position: absolute;"," opacity: 0;"," z-index: -1;"," width: 1px;"," height: 1px;","}",".tab-label {"," display: flex;"," justify-content: space-between;"," padding: 15px;"," color: #fff;"," background: var(--color-text);"," font-weight: bold;"," cursor: pointer;","}",".tab-label:hover {"," background: #1a252f;","}",".tab-label::after {"," content: \"\\276F\";"," width: 1em;"," height: 1em;"," text-align: center;"," transition: all 0.35s;","}",".tab-content {"," max-height: 0;"," padding: 0 1em;"," background: white;"," transition: all 0.35s;","}","input:checked + .tab-label {"," background: #1a252f;","}","input:checked + .tab-label::after {"," transform: rotate(90deg);","}","input:checked ~ .tab-content {"," max-height: 100vh;"," padding: 1em;","}","","/* FramePay-specific styling */",".rebilly-framepay.rebilly-input {"," background: #ffffff;"," height: 40px;"," border: 1px solid #dbdbdb;"," padding: 0 10px;"," box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);"," transition: all 0.4s;","}",".rebilly-framepay.rebilly-input.rebilly-framepay-focus {"," border-color: #3273dc;"," box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);","}",".rebilly-framepay.rebilly-framepay-buttons {"," border: none;"," box-shadow: none;"," padding: 0;","}","","/* Helpers */",".flex {"," display: flex;","}",".align-items-center {"," align-items: center;","}",".text-grey {"," color: var(--color-text-grey);","}","","/* Divider */",".divider {"," position: relative;"," text-align: center;"," margin: 1.25rem 0;","}",".divider::before {"," content: \"\";"," position: absolute;"," left: 0;"," top: 50%;"," height: 1px;"," background: #ccc;"," width: 100%;"," z-index: -1;","}",".divider::after {"," content: \"OR\";"," font-size: 0.8125rem;"," display: inline-block;"," padding: 0 0.875rem;"," background: var(--color-body-bg);"," color: var(--color-text-grey);","}"]},""],"metadata":{"steps":["add-css-for-checkout-form","style-framepay-inputs"]},"basename":"style.css","language":"css"}],"downloadAssociatedFiles":[]}],"steps":[{"id":"include-framepay-stylesheet","heading":"Include the FramePay stylesheet"},{"id":"include-framepay-script","heading":"Include the FramePay script"},{"id":"add-css-for-checkout-form","heading":"Add CSS for your checkout form"},{"id":"create-checkout-form","heading":"Create your checkout form"},{"id":"add-mounting-points","heading":"Add mounting points to your form"},{"id":"initialize","heading":"Initialize"},{"id":"rebilly-data","heading":"Rebilly data"},{"id":"transaction-data","heading":"Transaction data"},{"id":"style-framepay-inputs","heading":"Optional: Style FramePay inputs"},{"id":"mount-pre-selected-payment-method","heading":"Mount the pre-selected payment method"},{"id":"manage-payment-method-switching","heading":"Manage payment method switching"},{"id":"express-methods","heading":"Express methods"},{"id":"non-express-methods","heading":"Non-express methods"}],"inputs":{},"toggles":{}},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"tokenize-payment-data-from-multiple-payment-methods","__idx":0},"children":["Tokenize payment data from multiple payment methods"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This topic describes how to use the FramePay JavaScript library to tokenize payment data from the following methods in one checkout form:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Express method."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Payment card (requires input mounting)."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Bank account (requires input mounting)."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Any other alternative payment method (does not require input mounting)."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The payment card and bank account payment methods require inputs to be mounted in your checkout form."," ","For all other payment methods, you only provide the method name when creating the token."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"warning"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If this is your first time using the FramePay library, add FramePay to a form with one payment method in isolation before completing this tutorial."," ","For more information, see ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/basic-setup"},"children":["Get started with FramePay"]},"."]}]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["Prerequisites"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To complete this guide, you must have an organization ID, a website ID, and a publishable API key."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You must also have a payment gateway configured in your Rebilly account."," ","For sandbox testing, the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["TestProcessor"]}," gateway is pre-configured."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If you already have your IDs and API key, continue to ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"#step-1-initial-set-up"},"children":["Step 1: Initial set up"]},"."," ","If you do not, see ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/set-up-environment"},"children":["Set up your environment"]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-1-initial-set-up","__idx":1},"children":["Step 1: Initial set up"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Set up the library and provide the HTML."]},{"$$mdtype":"Tag","name":"CodeStep","attributes":{"id":"include-framepay-stylesheet","heading":"Include the FramePay stylesheet"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add the default styles for the FramePay library elements on the page."]}]},{"$$mdtype":"Tag","name":"CodeStep","attributes":{"id":"include-framepay-script","heading":"Include the FramePay script"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Expose the FramePay library in the global JS scope as ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Framepay"]},"."]}]},{"$$mdtype":"Tag","name":"CodeStep","attributes":{"id":"add-css-for-checkout-form","heading":"Add CSS for your checkout form"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add CSS styles for your checkout form."]}]},{"$$mdtype":"Tag","name":"CodeStep","attributes":{"id":"create-checkout-form","heading":"Create your checkout form"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Create a checkout form on your page."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Define the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["data-rebilly"]}," attributes on your input fields."," ","This instructs the FramePay library to automatically gather data from your checkout form."]}]},{"$$mdtype":"Tag","name":"CodeStep","attributes":{"id":"add-mounting-points","heading":"Add mounting points to your form"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Specify an empty placeholder ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["div"]}," with a unique ID. This is where the FramePay library mounts:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Express methods (Paypal in this example)."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Methods that require input elements (payment card and bank account in this example)."]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-2-configure-framepay","__idx":2},"children":["Step 2: Configure FramePay"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Configure the FramePay library with your credentials and transaction data, then mount the payment method elements to your form."]},{"$$mdtype":"Tag","name":"CodeStep","attributes":{"id":"initialize","heading":"Initialize"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Create a configuration object and initialize the FramePay library with it."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more information, see ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/framepay-configuration-reference/"},"children":["FramePay configuration reference"]},"."]}]},{"$$mdtype":"Tag","name":"CodeStep","attributes":{"id":"rebilly-data","heading":"Rebilly data"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Provide your publishable API key, organization ID, and website ID to connect with the Rebilly API."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more information, see ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/setup-multiple-payment-methods#prerequisites"},"children":["Prerequisites"]},"."]}]},{"$$mdtype":"Tag","name":"CodeStep","attributes":{"id":"transaction-data","heading":"Transaction data"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Provide the transaction data in your configuration object."]}]},{"$$mdtype":"Tag","name":"CodeStep","attributes":{"id":"style-framepay-inputs","heading":"Optional: Style FramePay inputs"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Customize the card payment and bank account fields to match the look and feel of the rest of your form."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To customize, add the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style"]}," property to your configuration object."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For all available properties, see ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/framepay-configuration-reference/#style"},"children":["Style"]},"."]}]},{"$$mdtype":"Tag","name":"CodeStep","attributes":{"id":"mount-pre-selected-payment-method","heading":"Mount the pre-selected payment method"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Mount the pre-selected payment method (either card payment or bank account) in its container."," ","Store references to the current element instances in a cache."," ","This example uses a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["mountedFrames"]}," array as a cache."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Also mount the express methods element in its container."]}]},{"$$mdtype":"Tag","name":"CodeStep","attributes":{"id":"manage-payment-method-switching","heading":"Manage payment method switching"},"children":[{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This step is not necessary for express methods."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When a customer selects another payment method, destroy the element instances by invoking the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".destroy()"]}," method and re-mount the FramePay library element for the selected payment method."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"step-3-get-the-payment-token","__idx":3},"children":["Step 3: Get the payment token"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Generate a payment token using the FramePay library."]},{"$$mdtype":"Tag","name":"CodeStep","attributes":{"id":"express-methods","heading":"Express methods"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For express methods, when a customer completes the flow, the FramePay library creates a payment token."," ","Listen to the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["token-ready"]}," event to retrieve it."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more information, see ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/events/#token-ready"},"children":["Framepay.on('token-ready', ...)"]},"."]}]},{"$$mdtype":"Tag","name":"CodeStep","attributes":{"id":"non-express-methods","heading":"Non-express methods"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For non-express methods, send the form data to the FramePay library and specify the selected payment method."]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["Send form data"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To send the form data to the FramePay library, call ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Framepay.createToken()"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If the collected form data is valid, the FramePay library returns a successful result with a new payment token."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If the collected form data is not valid, the FramePay library returns an error explaining why."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more information, see ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/framepay-global-reference/#framepaycreatetoken"},"children":["Framepay.createToken(form)"]},"."]}]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["Specify selected payment methods"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To specify the payment method selected by the customer, when creating the payment token, pass its value as the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["method"]}," property in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["extraData"]},". This example includes:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["method: 'payment-card'"]}," for card payment."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["method: 'ach'"]}," for bank account."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["method: 'China UnionPay'"]}," for China UnionPay."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For a full list of supported methods, see the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["method"]}," payload of the ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/api/payment-tokens/posttoken/"},"children":["Create payment token"]}," operation."]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"related-topics","__idx":4},"children":["Related topics"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/framepay-global-reference/"},"children":["FramePay reference"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/end-to-end-framepay-example/"},"children":["End-to-end FramePay integration"]}]}]}]},"headings":[{"value":"Tokenize payment data from multiple payment methods","id":"tokenize-payment-data-from-multiple-payment-methods","depth":1},{"value":"Step 1: Initial set up","id":"step-1-initial-set-up","depth":2},{"value":"Step 2: Configure FramePay","id":"step-2-configure-framepay","depth":2},{"value":"Step 3: Get the payment token","id":"step-3-get-the-payment-token","depth":2},{"value":"Related topics","id":"related-topics","depth":2}],"frontmatter":{"seo":{"title":"Tokenize payment data from multiple payment methods","description":"Learn how to use the FramePay JavaScript library to tokenize payment data from multiple methods in one checkout form.","keywords":"Developer docs, FramePay","lang":"en-US"},"redirects":{"/docs/content/dev-docs/tutorial/setup-multiple-payment-methods/":{},"/docs/developer-docs/framepay/setup-multiple-payment-methods/":{},"/docs/content/concepts-and-features/tutorial/setup-multiple-payment-methods/":{},"/docs/concepts-and-features/tutorial/setup-multiple-payment-methods/":{},"/docs/developer-docs/framepay/multiple-payment-methods/":{}},"excludeFromSearch":true,"markdown":{"toc":{"hide":true}},"footer":{"hide":true}},"lastModified":"2026-03-24T10:16:15.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/docs/dev-docs/setup-multiple-payment-methods","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}