{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-js/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["code-walkthrough","step"]},"type":"markdown"},"seo":{"title":"Form Instance | Finix.js Reference","description":"API reference for the Finix.js Form Instance — methods for submitting a payment form.","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/subscriptions/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":"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":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeWalkthrough","attributes":{"__idx":1,"filters":{},"filesets":[{"files":[{"path":"js/_filesets/form-instance.js","content":[{"start":0,"condition":{"steps":["submit-method"]},"children":["form.submit(function (error, response) {","  if (error) {","    console.error(\"Tokenization error:\", error);","    return;","  }","  const tokenData = response.data || {};","  console.log(\"Token ID:\", tokenData.id);","});"]},"",{"start":11,"condition":{"steps":["submit-custom-button"]},"children":["const submitButton = document.getElementById(\"submit\");","","const form = Finix.PaymentForm(","  \"form-element\",","  \"sandbox\",","  \"APgPDQrLD52TYvqazjHJJchM\",","  {","    onUpdate: function (state, binInformation, hasErrors) {","      submitButton.disabled = hasErrors;","    },","  }",");","","submitButton.addEventListener(\"click\", function () {","  form.submit(function (error, response) {","    if (error) {","      console.error(\"Tokenization error:\", error);","      return;","    }","    const tokenData = response.data || {};","    const token = tokenData.id;","    // Use the token to create a payment instrument","  });","});"]},""],"metadata":{"steps":["submit-method","submit-custom-button"]},"basename":"form-instance.js","language":"javascript"}],"downloadAssociatedFiles":[]}],"steps":[{"id":"submit-method","heading":"form.submit()"},{"id":"submit-custom-button","heading":"Custom submit button pattern"}],"inputs":{},"toggles":{}},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"form-instance","__idx":0},"children":["Form Instance"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The object returned by ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/js/payment-form"},"children":["Finix.PaymentForm()"]},". Exposes methods for interacting with the rendered payment form."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"const form = Finix.PaymentForm(element, environment, application, options);\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"CodeStep","attributes":{"id":"submit-method","heading":"form.submit()"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Manually triggers form submission and tokenization. Use this when you want a custom submit button outside the iframe instead of the auto-rendered button provided by ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onSubmit"]},"."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"text","header":{"controls":{"copy":{}}},"source":"form.submit(callback)\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":["callback"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["function(error, response)"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Yes"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Receives the same parameters as ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onSubmit"]}]}]}]}]}]}]},{"$$mdtype":"Tag","name":"CodeStep","attributes":{"id":"submit-custom-button","heading":"Custom submit button pattern"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onUpdate"]}," to track validation state and enable or disable your button, then call ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["form.submit()"]}," on click."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This pattern lets you keep your submit button in your own DOM with your own styles, while still getting real-time validation feedback from the form."]}]}]}]},"headings":[{"value":"Form Instance","id":"form-instance","depth":1}],"frontmatter":{"seo":{"title":"Form Instance | Finix.js Reference","description":"API reference for the Finix.js Form Instance — methods for submitting a payment form."},"markdown":{"toc":{"hide":true}},"footer":{"hide":true}},"lastModified":"2026-04-07T17:00:18.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/js/form-instance","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}