Setting up Payment Method Tokenization

<script>
vindicia.setup({
 // Options
 formId: "mainForm", // dom element of form
 vindiciaAuthId: "aXdjbF9vbmVfdGltZV9sb2dpbjpBTG5JWnRjZA==", 
// Authorization: Basic header"
 vindiciaServer: "secure.qa.vindicia.com", 
// Server to load the iframes from
 vindiciaRestServer: "api.qa.vindicia.com", 
// REST server to which to submit JSON
useCardinal3ds: false, 
// optional, if true (using cardinal 3DS) then loads songbird.js, default is false
useCardinalStaging: false, 
//optional, true means Cardinal Staging environment, default is false, which means use Cardinal Production environment
 hostedFields: {
 cardNumber: {
 selector: "#vin_credit_card_account",
 placeholder: "Enter Credit Card Number", // optional field
 autocomplete: "cc-number", // optional field
 formatinput: true, // optional field
 maskinput: false // optional field, show asterisks
 },
 expirationDate: {
 selector: "#vin_credit_card_expiration_date",
 placeholder: "Expiration Date MM/YY", // optional field
 format: "MM/YY", // optional, default is MM/YY. 
 Supported formats are: 
 MM/YY, MM-YY, MMYY, YY/MM, YY-MM, YYMM, YYYY/MM, YYYY-MM, YYYYMM, MM/YYYY, MM-YYYY, MMYYYY
 formatinput: true, // optional field
 autocomplete: "cc-exp" // optional field
 },
 cvn: { 
 selector: "#vin_credit_card_cvn",
 placeholder: "Enter CVV", // optional field
 autocomplete: "cc-csc", // optional field
 maskinput: false // optional field, show asterisks 
 },
 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",
 },
 ":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(myform) {
 return merchantValidate(myform); 
 // this method is for your use to interact with the user when the user 
    presses the Submit button. 
    It’s for when you want to validate the fields for yourself.
 },
 onSubmitCompleteEvent: function(data) {
 $('#message').html('submitted OK, vid ' + data.detail.vid);
 return;
 },
 onSubmitCompleteFailedEvent: function(data) {
 console.log(data.detail.status);
 if (data.detail.error) {
 console.log(data.detail.error);
 }
 return true; 
 // this method is for your use to interact with the user when the user 
    presses the Submit button and the payment method is not created.
 },
 onVindiciaFieldEvent: function(event) { // optional
 if (event.detail.fieldType == 'cardNumber') {
 setCardImage(event.detail.cardType); 
 // bright or dim the card logo. 
    This function is just an example of what you can do with this event. 
 }
 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'); 
 } 
 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>

vindicia.setup(options);

onVindiciaFieldEvent: function(event) {
 if (event.detail.fieldType == 'cardNumber') {
 setCardImage(event.detail.cardType); // bright or dim the card logo
 }
 if (event.detail.fieldType == 'expirationDate') {
 if (!event.detail.isValid)
 {
 alert('vindiciaFieldEvent expirationDate not valid');
 }
 }
 if (event.detail.fieldType == 'cvn') {
 if (!event.detail.isValid && event.detail.dataLength > 0)
 {
 alert('vindiciaFieldEvent cvn not valid');
 }
 }
 }

 hostedFields: {
 onSubmitEvent: function(event) {
 return merchantValidate();
 },
},

function merchantValidate(theform)
{
 if (!vindicia.isValid('vin_account_holder'))
 {
 alert('Please enter card holders name before submitting');
 return false;
 }
 if (!vindicia.isValid('vin_credit_card_account'))
 {
 alert('Please enter a valid credit card before submitting');
 return false;
 }
 else
 {
 if (!vindicia.isValid('vin_credit_card_expiration_date'))
 {
 alert('Please enter a valid expiration date YYYYMM before submitting');
 return false;
 }
 }

 if (theform.vin_account_holder.value.length == 0)
 {
 // non sensitive field
 alert('Please enter the Account Name');
 return false;
 }

 if (vindicia.cardType == "amex" && vindicia.dataLength('vin_credit_card_cvn') != 4)
 {
 alert("American Express CVV must be 4 digits");
 return false
 }
 return true;
}

Accessing onblur events with vindicia.setup()
onVindiciaFieldEvent: function(event) {
 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('vindiciaFieldEvent expirationDate not valid');
 }
 }
 },

<input name="vin_validate" value="0" type="hidden" />

policy: {
 validate: 0
}

onSubmitCompleteEvent: function(data) {
 $('#message').html('submitted OK, vid ' + data.detail.vid);
 return;
},

var newOTL = getNewOTL();
$('#vin_session_id').value = newOTL.unsignedValue;
$('#vin_session_hash').value = newOTL.signedValue;
vindicia.clearData();

<script>
 var otl_hmac_key = "A39485F85039D394059B948390";
 var vin_session_id = "CC403930495";
 var vin_session_hash = CryptoJS.HmacSHA512(vin_session_id + "#POST#/payment_methods", otl_hmac_key);
</script>

vindicia.setup({
 formId: "mainForm",
 vindiciaAuthId: "cWEtZ1RsLTIwMTgtcTJfc19hcDpaR2FqNUl0azAwWHM2dVBJTEVoSGRqYVMzMHJjYWtLdQ==", // Authorization: Basic header"

 onSubmitCompleteFailedEvent: function(data) {
 $('#message').html('submitted Failed');
 console.log(data.detail.status); // server return code
 if (data.detail.error) {
 console.log(data.detail.error);
 }return true;
 },