# Form Instance

The object returned by [Finix.PaymentForm()](https://docs.finix.com/js/payment-form). 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)
```

| Parameter | Type | Required | Description |
| --- | --- | --- | --- |
| `callback` | `function(error, response)` | Yes | Receives 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-instance.js

Download

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