> ## Documentation Index
> Fetch the complete documentation index at: https://docs.slm.m1amdocs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Hosted Fields options

The `vindici.setup()` method takes one argument, `options`:

```

vindicia.setup(options);
```

Setup options include the following:

## formID

**Required**: string

This is the ID of the form as shown below in this sample HTML:

```

<form id=”mainform”>
```

and would look like this:

```

formId: “mainform”,
```

## VindiciaServer

**Optional**: string

Defaults to `“secure.vindicia.com”`

```

vindiciaServer: “sercure.vindicia.com”,
```

Use this if you want to point to Staging or QA.

## hostedFields

**Required**: string

This option has many sub objects, one for each input field that you want protected, and a “styles” sub object.

| `cardNumber` | **Required**: object `cardNumber: &#123; selector: "#vin_PaymentMethod_creditCard_account", placeholder: "Enter Credit Card Number" // optional field &#125;,` |
| - | - |
| `expirationDate` | **Required**: object Not required if using expirationMonth/expirationYear pair. Creates an input box. Supported formats: 'MM/YY' (the default), 'MM-YY', 'MMYY', 'YY/MM', 'YY-MM', 'YYMM', 'YYYY/MM', 'YYYY-MM', 'YYYYMM', 'MM/YYYY', 'MM-YYYY', 'MMYYYY' `expirationDate: &#123; selector: "#vin_PaymentMethod_creditCard_expirationDate", placeholder: "Expiration Date MM/YY", // optional field format: "MM/YY" // defaults to MM/YY &#125;,` |
| `expirationMonth` | **Required**: object Not required if using expirationDate. Creates a dropdown box for entering the month. `expirationMonth: &#123; selector: "#vin_PaymentMethod_creditCard_expirationDate_month", format: "N - A" &#125;,` Default format: `"N"`. Allowed: `"N", "A", "N A", "N-A", "N - A"` |
| `expirationYear` | **Required**: object Not required if using expirationDate. Creates a dropdown box for entering the year. The supported formats are `YY` and `YYYY`. `expirationYear: &#123; selector: "#vin_PaymentMethod_creditCard_expirationDate_year", format: "YY" &#125;,` Default format: `"YYYY"` |
| `cvn` | **Optional**: object `cvn: &#123; selector: "#vin_PaymentMethod_nameValues_cvn", placeholder: "Enter CVV" // optional field &#125;,` |
| `styles` | **Optional**: object `styles: &#123; "input": &#123; "width": "100%", "font-family": "'Helvetica Neue',Helvetica,Arial,sans-serif", "font-size": "14px" &#125; &#125;` Besides basic CSS styles, there are two special classes: valid, notValid. If they are provided, they will be applied during validation. `".valid": &#123; // optional "border-color": "#228B22", &#125;, ".notValid": &#123; // optional "border-color": "#ff0000", &#125;,` |
| Use either `expirationDate` or the pair `expirationMonth` and `expirationYear` but not both. | |

View the list of allowed expiration date formats.

View the list of allowed styles.

## iframeHeightPadding

**Optional**: integer

During `vindicia.setup()` the iframe height is adjusted to be the size of the input field inside of it. If any styles require some extra padding around the input box, this is the way to do that. It defaults to zero px.

```
.iframeHeightPadding: 3,
```

## onSubmitEvent

**Optional**: integer

This is where you will define a function to be executed when the submit button is pressed. It can be anonymous or a call to an existing function.

```

onSubmitEvent:
function(myform) {
return merchantValidate(myform);
},
```

## onSubmitCompleteEvent

**Optional**: function

If you do not want the browser to redirect to the success or error page, use this function. This allows you to perform a purely AJAX interaction. When the submit event to Vindicia is complete, this function will be called. It can be anonymous or a call to an existing function.

```

onSubmitCompleteEvent:
function(event) {
return doAjaxCompletion(event.details.url);
},
```

## onVindiciaEvent

**Optional**: function

To have access to realtime validation of iframe blur events, use this optional handler:

```

onVindiciaEvent: function(event) { // optional
   if (event.detail.fieldType == 'expirationDate') {
      if (!event.detail.isValid)
   {   
      console.log('vindiciaEvent expirationDate not valid');
      } 
   }
}
```

**Parent topic:**[Implementing HOA with Hosted Fields](../topics/Implementing_HOA_with_Ho)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.