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: { selector: "#vin_PaymentMethod_creditCard_account", placeholder: "Enter Credit Card Number" // optional field },`
`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: { selector: "#vin_PaymentMethod_creditCard_expirationDate", placeholder: "Expiration Date MM/YY", // optional field format: "MM/YY" // defaults to MM/YY },`
`expirationMonth`	Required: object Not required if using expirationDate. Creates a dropdown box for entering the month. `expirationMonth: { selector: "#vin_PaymentMethod_creditCard_expirationDate_month", format: "N - A" },` 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: { selector: "#vin_PaymentMethod_creditCard_expirationDate_year", format: "YY" },` Default format: `"YYYY"`
`cvn`	Optional: object `cvn: { selector: "#vin_PaymentMethod_nameValues_cvn", placeholder: "Enter CVV" // optional field },`
`styles`	Optional: object `styles: { "input": { "width": "100%", "font-family": "'Helvetica Neue',Helvetica,Arial,sans-serif", "font-size": "14px" } }` Besides basic CSS styles, there are two special classes: valid, notValid. If they are provided, they will be applied during validation. `".valid": { // optional "border-color": "#228B22", }, ".notValid": { // optional "border-color": "#ff0000", },`
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

Home

Guides

APIs

formID

VindiciaServer

hostedFields

iframeHeightPadding

onSubmitEvent

onSubmitCompleteEvent

onVindiciaEvent

​formID

​VindiciaServer

​hostedFields

​iframeHeightPadding

​onSubmitEvent

​onSubmitCompleteEvent

​onVindiciaEvent

formID

VindiciaServer

hostedFields

iframeHeightPadding

onSubmitEvent

onSubmitCompleteEvent

onVindiciaEvent