Skip to content

Form Instance

The object returned by Finix.PaymentForm(). Exposes methods for interacting with the rendered payment form.

const form = Finix.PaymentForm(element, environment, application, options);

form.submit()

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 onSubmit.

form.submit(callback)
ParameterTypeRequiredDescription
callbackfunction(error, response)YesReceives the same parameters as onSubmit

Custom submit button pattern

Use onUpdate to track validation state and enable or disable your button, then call form.submit() on click.

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.

form.submit(function (error, response) {
  if (error) {
    console.error("Tokenization error:", error);
    return;
  }
  const tokenData = response.data || {};
  console.log("Token ID:", tokenData.id);
});

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
  });
});