Skip to content

Finix.js Reference

Finix.js is a client-side JavaScript library for securely collecting and tokenizing payment details. It renders an embedded payment form inside an iframe, keeping sensitive card and bank data out of your application and ensuring PCI compliance.

Finix.js example

This form is rendered by Finix.js in the Sandbox environment — the same library you embed in your site. Submit test card details to see the Token Response your onSubmit callback receives.

Loading payment form…

Finix.PaymentForm("payment-form", "sandbox", "APgPDQrLD52TYvqazjHJJchM", {
  theme: "finix",
  paymentMethods: ["card", "bank"],
  showAddress: false,
  defaultValues: { address_country: "USA" },
  onSubmit: function (error, response) { /* ... */ },
});

Quick start

<!-- 1. Include the script -->
<script src="https://js.finix.com/v/2/finix.js"></script>

<!-- 2. Add a mount point -->
<div id="payment-form"></div>

<script>
  <!-- 3. Initialize the form -->
  Finix.PaymentForm(
    "payment-form",
    "sandbox",
    "APgPDQrLD52TYvqazjHJJchM",
    {
      onSubmit: function (error, response) {
        if (error) {
          console.error("Error:", error);
          return;
        }
        const tokenData = response.data || {};

        // Send the token to your backend
        fetch("/your/backend", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            token: tokenData.id,
          }),
        });
      },
    }
  );
</script>

Including Finix.js

Always load the library directly from https://js.finix.com. Never self-host or bundle Finix.js — doing so breaks PCI compliance.

<script src="https://js.finix.com/v/2/finix.js"></script>

Global API

MethodDescription
Finix.PaymentForm()Create and render a secure payment form for collecting card and bank details.