{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-js/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["code-walkthrough","step"]},"type":"markdown"},"seo":{"title":"Finix.PaymentForm | Finix.js Reference","description":"API reference for Finix.PaymentForm — creates and renders a secure embedded payment form for collecting card and bank account details.","siteUrl":"https://docs.finix.com/","llmstxt":{"hide":false,"sections":[{"title":"Getting Started","includeFiles":["guides/getting-started/**/*.md"],"excludeFiles":[]},{"title":"Online Payments","includeFiles":["guides/online-payments/**/*.md"],"excludeFiles":["guides/online-payments/payment-features/fsa-hsa-non-healthcare-mcc.md"]},{"title":"In-Person Payments","includeFiles":["guides/in-person-payments/**/*.md"],"excludeFiles":[]},{"title":"Subscriptions","includeFiles":["guides/subscriptions/**/*.md"],"excludeFiles":[]},{"title":"After the Payment","includeFiles":["guides/after-the-payment/**/*.md"],"excludeFiles":[]},{"title":"Managing Operations","includeFiles":["guides/managing-operations/**/*.md"],"excludeFiles":[]},{"title":"Platform Payments","includeFiles":["guides/platform-payments/**/*.md"],"excludeFiles":[]},{"title":"Payouts","includeFiles":["guides/payouts/**/*.md"],"excludeFiles":[]},{"title":"Low-Code / No-Code","includeFiles":["low-code-no-code/**/*.md"],"excludeFiles":[]},{"title":"Developers","includeFiles":["additional-resources/developers/**/*.md"],"excludeFiles":[]},{"title":"Plugins","includeFiles":["additional-resources/plugins/**/*.md"],"excludeFiles":[]},{"title":"Industry Considerations","includeFiles":["guides/industry-considerations/**/*.md"],"excludeFiles":[]},{"title":"Regional Considerations","includeFiles":["guides/regional-considerations/**/*.md"],"excludeFiles":[]},{"title":"Release Notes","includeFiles":["release-notes/**/*.md"],"excludeFiles":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeWalkthrough","attributes":{"__idx":1,"filters":{},"filesets":[{"files":[{"path":"js/_filesets/payment-form.js","content":[{"start":0,"condition":{"steps":["signature"]},"children":["const form = Finix.PaymentForm(element, environment, application, options);"]},"",{"start":4,"condition":{"steps":["param-element"]},"children":["// Pass an element ID string:","const form = Finix.PaymentForm(\"payment-form\", environment, application, options);","","// Or pass an HTMLElement reference:","const el = document.getElementById(\"payment-form\");","const form = Finix.PaymentForm(el, environment, application, options);"]},"",{"start":13,"condition":{"steps":["param-environment"]},"children":["// Sandbox","const form = Finix.PaymentForm(\"payment-form\", \"sandbox\", application, options);","","// Production","const form = Finix.PaymentForm(\"payment-form\", \"prod\", application, options);"]},"",{"start":21,"condition":{"steps":["param-application"]},"children":["const form = Finix.PaymentForm(","  \"payment-form\",","  \"sandbox\",","  \"APgPDQrLD52TYvqazjHJJchM\",","  options",");"]},"",{"start":30,"condition":{"steps":["full-example"]},"children":["const form = Finix.PaymentForm(","  \"payment-form\",","  \"sandbox\",","  \"APgPDQrLD52TYvqazjHJJchM\",","  {","    paymentMethods: [\"card\", \"bank\"],","    showAddress: true,","    onSubmit: function (error, response) {","      if (error) {","        console.error(\"Tokenization error:\", error);","        return;","      }","      const tokenData = response.data || {};","      console.log(\"Token ID:\", tokenData.id);","    },","  }",");"]},"",""],"metadata":{"steps":["signature","param-element","param-environment","param-application","full-example"]},"basename":"payment-form.js","language":"javascript"}],"downloadAssociatedFiles":[]}],"steps":[{"id":"signature","heading":"Function signature"},{"id":"param-element","heading":"element"},{"id":"param-environment","heading":"environment"},{"id":"param-application","heading":"application"},{"id":"full-example","heading":"Full example"}],"inputs":{},"toggles":{}},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"finixpaymentform","__idx":0},"children":["Finix.PaymentForm"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Creates a Payment Form instance and renders it into a specified DOM element. Returns a ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/js/form-instance"},"children":["Form Instance"]}," you can use to interact with the form programmatically."]},{"$$mdtype":"Tag","name":"CodeStep","attributes":{"id":"signature","heading":"Function signature"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"text","header":{"controls":{"copy":{}}},"source":"Finix.PaymentForm(element, environment, application, options)\n","lang":"text"},"children":[]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Parameter"},"children":["Parameter"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Type"},"children":["Type"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Required"},"children":["Required"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["element"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["string | HTMLElement"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Yes"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["DOM target for the form"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["environment"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Yes"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Finix environment (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["sandbox"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["prod"]},")"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["application"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Yes"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Your Finix Application ID"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["options"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["object"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["No"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Configuration — see ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/js/options"},"children":["Options"]}]}]}]}]}]}]},{"$$mdtype":"Tag","name":"CodeStep","attributes":{"id":"param-element","heading":"element"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The DOM location where the payment form renders. Pass either:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["A ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["string"]}," with the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["id"]}," attribute of the target element — class names are not supported"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["An ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["HTMLElement"]}," reference"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<div id=\"payment-form\"></div>\n","lang":"html"},"children":[]}]},{"$$mdtype":"Tag","name":"CodeStep","attributes":{"id":"param-environment","heading":"environment"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Finix environment to connect to. Must match the environment your Application ID belongs to."]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Value"},"children":["Value"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Environment"},"children":["Environment"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"sandbox\""]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Sandbox"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"prod\""]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Production"]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Your Application ID must belong to the same environment. A sandbox ID used with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"prod\""]}," (or vice versa) will fail."]}]},{"$$mdtype":"Tag","name":"CodeStep","attributes":{"id":"param-application","heading":"application"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Your Finix Application ID, assigned when you create your account. Application IDs can exist in both Sandbox and Prod environments — use the one that matches your chosen ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["environment"]},"."]}]},{"$$mdtype":"Tag","name":"CodeStep","attributes":{"id":"full-example","heading":"Full example"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Pass an ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["options"]}," object to configure payment methods, address fields, and callbacks. Providing ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onSubmit"]}," automatically renders a submit button inside the form."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["See ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/js/options"},"children":["Options"]}," for all configuration properties, and ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/js/callbacks"},"children":["Callbacks"]}," for the full callback API."]}]}]}]},"headings":[{"value":"Finix.PaymentForm","id":"finixpaymentform","depth":1}],"frontmatter":{"seo":{"title":"Finix.PaymentForm | Finix.js Reference","description":"API reference for Finix.PaymentForm — creates and renders a secure embedded payment form for collecting card and bank account details."},"markdown":{"toc":{"hide":true}},"footer":{"hide":true}},"lastModified":"2026-04-07T17:00:18.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/js/payment-form","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}