Setting Up Hosted Fields

If you are already using HOA with Subscribe and want to implement Hosted Fields (and satisfy the minimum audit burden of SAQ-A (Self-Assessment Questionnaire—version A) requirements when accepting payment information from your customers), begin here and continue through Allowed Styles. When your customer’s web browser loads your checkout page, some or all of the input boxes in the checkout form become iframes. These iframes load their HTML and JavaScript from Vindicia.com. Note: When using HOA with Hosted Fields, the vindicia.js JavaScript library uses its own namespace, rather than the global namespace. This section describes how to modify your current HOA checkout page to incorporate Hosted Fields. The focus in these sections is on Step 3.

Change Tags to <div> Tags in your form. For sensitive data, such as the credit card number, expiration date and CVN number, use a div tag instead of an input field in your form. For example, change the following:

<input type="text" id="vin_PaymentMethod_creditCard_account"
name="vin_PaymentMethod_creditCard_account" 
placeholder="Enter Credit Card Number" />

to this:


<div id="vin_PaymentMethod_creditCard_account"></div>

Include vindicia.js on your checkout page.
<script src="https://cdn2.vindicia.com/ws/vindicia.js"></script>
There is no JQuery or other JavaScript framework requirement, but Vindicia recommends that you include vindicia.js after you include the framework file.This will instantiate an object called vindicia.
Call vindicia.setup() with options. Call the vindicia.setup() method to initialize the Hosted Fields on your checkout form. Thevindicia.setup()call will take over the submit event in your form. To do validation you must pass in some options to the setup() method.
<script> vindicia.setup(options); </script>

These three steps will cause a redirect to a Success or Error page after form submission. If you want full Ajax control over this form, see the section Using Hosted Fields with Ajax onSubmitCompleteEvent.

Example: Initializing Hosted Fields

This JavaScript example uses all the optional features of the vindicia.setup() method for HOA with browser redirect. It initializes the Hosted Fields on the checkout form. The Using Hosted Fields with Ajax onSubmitCompleteEvent provides a complete Ajax solution.

<script>
vindicia.setup({
 // Options
 formId: "mainForm", // dom element of form
 vindiciaServer: "secure.vindicia.com", 
 hostedFields: {
 cardNumber: {
 selector: "#vin_PaymentMethod_creditCard_account",
 placeholder: "Enter Credit Card Number" // optional field
 },
 expirationDate: { // required field or use expirationMonth and expirationYear
 selector: "#vin_PaymentMethod_creditCard_expirationDate",
 placeholder: "Expiration Date MM/YY", // optional field
 format: "MM/YY" // optional, default is MM/YY 
 },
 cvn: {
 selector: "#vin_PaymentMethod_nameValues_cvn",
 placeholder: "Enter CVV" // optional field
 },
 styles: { // optional
 "input": {
 "width": "100%",
 "font-family": "'Helvetica Neue',Helvetica,Arial,sans-serif",
 "font-size": "14px",
 "color": "#555",
 "height": "34px",
 "padding": "6px 12px",
 "margin": "5px 0px",
 "line-height": "1.42857",
 "border": "1px solid #ccc",
 "border-radius": "4px",
 "box-shadow": "0px 1px 1px rgba(0,0,0,0.075) inset",
 "-webkit-transition": "border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s",
 "transition": "border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s",
 },
 "select": {
 "width": "100%",
 "font-family": "'Helvetica Neue',Helvetica,Arial,sans-serif",
 "font-size": "14px",
 "color": "#555",
 "height": "34px",
 "padding": "6px 12px",
 "margin": "5px 0px",
 "line-height": "1.42857",
 "border": "1px solid #ccc",
 "border-radius": "4px",
 "box-shadow": "0px 1px 1px rgba(0,0,0,0.075) inset",
 "-webkit-transition": "border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s",
 "transition": "border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s",
 },
 ":focus": { // optional
 "border-color": "#66afe9",
 "outline": "0",
 "-webkit-box-shadow": "inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6)",
 "box-shadow": "inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6)"
 },
 ".valid": { // optional
 "border-color": "#228B22",
 },
 ".notValid": { // optional
 "border-color": "#ff0000",
 },
 // custom width
 "@media (min-width: 600px) and (max-width: 800px)": {
 "input": {
 "font-size": "16pt"
 }
 }
 },
 },
 iframeHeightPadding: 2, // optional
 onSubmitEvent: function(theForm) {
 return merchantValidate(theForm); 
 },
 onVindiciaFieldEvent: function(event) { // optional 
 if (event.detail.fieldType == 'cardNumber') {
 setCardImage(event.detail.cardType); // bright or dim the card logo 
 }
 if (event.detail.fieldType == 'expirationDate') {
 if (!event.detail.isValid)
 {
 console.log('vindiciaEvent expirationDate not valid');
 }
 }
 if (event.detail.fieldType == 'cvn') {
 if (!event.detail.isValid)
 {
 console.log('vindiciaEvent cvn not valid');
 }
 console.log('cvn length ' + event.detail.dataLength);
 }
 }
});

// optional function shown being used above
function setCardImage(type)
{
 // use a sprite to display one credit card logo brightly with JQuery
 if (type == 'visa' || type == 'visa_electron') {
 $('#ccTypeImage').css('background-position', '0 -23px');
 }jhk
+nnbb
 else if (type == 'mastercard' || type == 'maestro') {
 $('#ccTypeImage').css('background-position', '0 -46px');
 }
 else if (type == 'amex') {
 $('#ccTypeImage').css('background-position', '0 -69px');
 }
 else if (type == 'discover') {
 $('#ccTypeImage').css('background-position', '0 -92px');
 }
 else {
 $('#ccTypeImage').css('background-position', '0 0');
 }
}

</script>

The function merchantValidate(theForm) is a custom function, to be written by you. Parent topic:Implementing HOA with Hosted Fields

Home

Guides

APIs

Example: Initializing Hosted Fields

​Example: Initializing Hosted Fields

Example: Initializing Hosted Fields