Finix.PaymentForm

Creates a Payment Form instance and renders it into a specified DOM element. Returns a Form Instance you can use to interact with the form programmatically.

Function signature

Finix.PaymentForm(element, environment, application, options)

element

The DOM location where the payment form renders. Pass either:

• A string with the id attribute of the target element — class names are not supported
• An HTMLElement reference

<div id="payment-form"></div>

environment

The Finix environment to connect to. Must match the environment your Application ID belongs to.

Your Application ID must belong to the same environment. A sandbox ID used with "prod" (or vice versa) will fail.

application

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

Full example

Pass an options object to configure payment methods, address fields, and callbacks. Providing onSubmit automatically renders a submit button inside the form.

See Options for all configuration properties, and Callbacks for the full callback API.

payment-form.js

Download

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

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

// Sandbox
const form = Finix.PaymentForm("payment-form", "sandbox", application, options);

// Production
const form = Finix.PaymentForm("payment-form", "prod", application, options);

const form = Finix.PaymentForm(
  "payment-form",
  "sandbox",
  "APgPDQrLD52TYvqazjHJJchM",
  options
);

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