Restyle credit card field using alterFormDefinition

Apply custom styling to the credit card iframe fields

var nvtag_callbacks = window.nvtag_callbacks = window.nvtag_callbacks || {};
nvtag_callbacks.alterFormDefinition= nvtag_callbacks.alterFormDefinition|| [];
nvtag_callbacks.alterFormDefinition.push(function (args) {
  if(args && args.form_definition && args.form_definition.form_elements) {
    var paymentInfo;
    for(var i = 0; i < args.form_definition.form_elements.length; i++){
      var topLevel = args.form_definition.form_elements[i];
      if(topLevel && topLevel.name === 'PaymentInformation'){
        paymentInfo = topLevel;
        break;
      }
    }
    if(paymentInfo && paymentInfo.children){
      var account, cvv, exp;
      for(var j = 0; j < paymentInfo.children.length; j++){
        var child = paymentInfo.children[j];
        if(child && child.name === 'Account'){
          account = child;
        } else if(child && child.name === 'SecurityCode'){
          cvv = child;
        } else if(child && child.name === 'ExpirationMonth') {
          exp = child;
        }
      }

      if(account){
        console.log('updating Account styling');
        account.styles = { color: 'red' }; // add style overrides
      }
      if(cvv){
        console.log('updating SecurityCode styling');
        cvv.styles = { color: 'green' }; // add style overrides
      }
      if(exp){
        console.log('updating Expiration Date styling');
        exp.styles = { color: 'yellow' }; // add style overrides
      }
    }
  }
console.log('alterFormDef', args);
return args;
});