# Finix.PaymentForm

Creates a Payment Form instance and renders it into a specified DOM element. Returns a [Form Instance](https://docs.finix.com/js/form-instance) you can use to interact with the form programmatically.

## Function signature

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

| Parameter      | Type                   | Required | Description                                                                  |
|----------------|------------------------|----------|------------------------------------------------------------------------------|
| `element`      | `string | HTMLElement` | Yes      | DOM target for the form                                                    |
| `environment`  | `string`               | Yes      | Finix environment (`sandbox` or `prod`)                                   |
| `application`  | `string`               | Yes      | Your Finix Application ID                                                  |
| `options`      | `object`               | No       | Configuration — see [Options](https://docs.finix.com/js/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.

| Value        | Environment |
|--------------|-------------|
| `"sandbox"` | Sandbox     |
| `"prod"`    | Production  |

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](https://docs.finix.com/js/options) for all configuration properties, and [Callbacks](https://docs.finix.com/js/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);
    },
  }
);
```