清除心脏地带iFrame输入而不重新加载iFrames

Question

我正在使用心脏地带支付网关JavaScript SDK在我的POS网络应用程序的信用卡支付。POS使用户能够将支付分成不同的信用卡支付。为此，我将在引导模式弹出中打开心脏区域Iframe表单。但是由于Chrome中的CORS错误，当添加付款时，我无法使用JavaScript清除表单字段。此外，我搜索了心脏API文档，除了一个也不起作用的setText()函数之外，什么也没有发现。作为一种解决办法，我正在重新初始化表单，但这并不能给用户提供良好的体验，因为它会重新加载Iframe。

以下是代码：

​

(function (document, Heartland) {
  var state = {
    cardNumberValid: false,
    cardCvvValid: false,
    cardExpirationValid: false
  };
    // Create a new `HPS` object with the necessary configuration
    var hps = new Heartland.HPS({
      publicKey: 'pkapi_cert_jKc1FtuyAydZhZfbB3',
      type:      'iframe',
      // Configure the iframe fields to tell the library where
      // the iframe should be inserted into the DOM and some
      // basic options
      fields: {
        cardNumber: {
          target:      'iframesCardNumber',
          placeholder: '•••• •••• •••• ••••'
        },
        cardExpiration: {
          target:      'iframesCardExpiration',
          placeholder: 'MM / YYYY'
        },
        cardCvv: {
          target:      'iframesCardCvv',
          placeholder: 'CVV'
        },
        submit: {
            value: 'Pay $10.00',
            target:       'iframesSubmit'
        }
      },
      // Collection of CSS to inject into the iframes.
      // These properties can match the site's styles
      // to create a seamless experience.
      style: {
        'input': {
          'background': '#fff',
          'border': '1px solid',
          'border-color': '#bbb3b9 #c7c1c6 #c7c1c6',
          'box-sizing': 'border-box',
          'font-family': 'serif',
          'font-size': '16px',
          'line-height': '1',
          'margin': '0 .5em 0 0',
          'max-width': '100%',
          'outline': '0',
          'padding': '0.5278em',
          'vertical-align': 'baseline',
          'height' : '50px',
          'width' : '100% !important'
        },
        '#heartland-field': {
          'font-family':'sans-serif',
          'box-sizing':'border-box',
          'display': 'block',
          'height': '50px',
          'padding': '6px 12px',
          'font-size': '14px',
          'line-height': '1.42857143',
          'color': '#555',
          'background-color': '#fff',
          'border': '1px solid #ccc',
          'border-radius': '0px',
          '-webkit-box-shadow': 'inset 0 1px 1px rgba(0,0,0,.075)',
          'box-shadow': 'inset 0 1px 1px rgba(0,0,0,.075)',
          '-webkit-transition': 'border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s',
          '-o-transition': 'border-color ease-in-out .15s,box-shadow ease-in-out .15s',
          'transition': 'border-color ease-in-out .15s,box-shadow ease-in-out .15s',
          'width' : '100%'
        },  
        '#heartland-field[name=submit]': {   
          'background-color':'#36b46e',
          'font-family':'sans-serif',
          'text-transform':'uppercase',
          'color':'#ffffff',
          'border':'0px solid transparent'
        } ,
        '#heartland-field[name=submit]:focus': {   
          'color':'#ffffff',
          'background-color':'#258851',
          'outline':'none'
        } , 
        '#heartland-field[name=submit]:hover': {   
          'background-color':'#258851'
        } ,          
        '#heartland-field-wrapper #heartland-field:focus' : {
          'border':'1px solid #3989e3',
          'outline':'none',
          'box-shadow':'none',
          'height':'50px'
        },
        'heartland-field-wrapper #heartland-field' : {
          'height':'50px'
        },
        'input[type=submit]' : {
          'box-sizing':'border-box',
          'display': 'inline-block',
          'padding': '6px 12px',
          'margin-bottom': '0',
          'font-size': '14px',
          'font-weight': '400',
          'line-height': '1.42857143',
          'text-align': 'center',
          'white-space': 'nowrap',
          'vertical-align': 'middle',
          '-ms-touch-action': 'manipulation',
          'touch-action': 'manipulation',
          'cursor': 'pointer',
          '-webkit-user-select': 'none',
          '-moz-user-select': 'none',
          '-ms-user-select': 'none',
          'user-select': 'none',
          'background-image': 'none',
          'border': '1px solid transparent',
          'border-radius': '4px',
          'color': '#fff',
          'background-color': '#337ab7',
          'border-color': '#2e6da4'
        },
        '#heartland-field[placeholder]' :{
          'letter-spacing':'3px'
        },
        '#heartland-field[name=cardCvv]' :{
          'background':'transparent url(https://github.com/hps/heartland-php/blob/master/examples/end-to-end/assets/images/cvv1.png?raw=true) no-repeat right',
          'background-size' :'63px 40px',
        },
        'input#heartland-field[name=cardNumber]' : {
          'background':'transparent url(https://github.com/hps/heartland-php/blob/master/examples/end-to-end/assets/images/ss-inputcard-blank@2x.png?raw=true) no-repeat right',
          'background-size' :'55px 35px'},
        '#heartland-field.invalid.card-type-visa' :{
          'background':'transparent url(https://github.com/hps/heartland-php/blob/master/examples/end-to-end/assets/images/ss-saved-visa@2x.png?raw=true) no-repeat right',
          'background-size' :'83px 88px',
          'background-position-y':'-44px'
        },
        '#heartland-field.valid.card-type-visa' :{
          'background':'transparent url(https://github.com/hps/heartland-php/blob/master/examples/end-to-end/assets/images/ss-saved-visa@2x.png?raw=true) no-repeat right top',
          'background-size' :'82px 86px'
        },
        '#heartland-field.invalid.card-type-discover' :{
          'background':'transparent url(https://github.com/hps/heartland-php/blob/master/examples/end-to-end/assets/images/ss-saved-discover@2x.png?raw=true) no-repeat right',
          'background-size' :'85px 90px',
          'background-position-y' : '-44px'
        },
        '#heartland-field.valid.card-type-discover' :{
          'background':'transparent url(https://github.com/hps/heartland-php/blob/master/examples/end-to-end/assets/images/ss-saved-discover@2x.png?raw=true) no-repeat right',
          'background-size' :'85px 90px',
          'background-position-y' : '1px'
        },
        '#heartland-field.invalid.card-type-amex' :{
          'background':'transparent url(https://github.com/hps/heartland-php/blob/master/examples/end-to-end/assets/images/ss-savedcards-amex@2x.png?raw=true) no-repeat right',
          'background-size' :'50px 90px',
          'background-position-y':'-44px'
        },
        '#heartland-field.valid.card-type-amex' :{
          'background':'transparent url(https://github.com/hps/heartland-php/blob/master/examples/end-to-end/assets/images/ss-savedcards-amex@2x.png?raw=true) no-repeat right top',
          'background-size' :'50px 90px'
        },
        '#heartland-field.invalid.card-type-mastercard' :{
          'background':'transparent url(https://github.com/hps/heartland-php/blob/master/examples/end-to-end/assets/images/ss-saved-mastercard.png?raw=true) no-repeat right',
          'background-size' :'62px 105px',
          'background-position-y':'-52px'
        },
        '#heartland-field.valid.card-type-mastercard' :{
          'background':'transparent url(https://github.com/hps/heartland-php/blob/master/examples/end-to-end/assets/images/ss-saved-mastercard.png?raw=true) no-repeat right',
          'background-size' :'62px 105px',
          'background-position-y':'-1px'
        },
        '#heartland-field.invalid.card-type-jcb' :{
          'background':'transparent url(https://github.com/hps/heartland-php/blob/master/examples/end-to-end/assets/images/ss-saved-jcb@2x.png?raw=true) no-repeat right',
          'background-size' :'55px 94px',
          'background-position-y':'-44px'
        },
        '#heartland-field.valid.card-type-jcb' :{
          'background':'transparent url(https://github.com/hps/heartland-php/blob/master/examples/end-to-end/assets/images/ss-saved-jcb@2x.png?raw=true) no-repeat right top',
          'background-size' :'55px 94px',
          'background-position-y':'2px'
        },
        'input#heartland-field[name=cardNumber]::-ms-clear' : {
          'display':'none'
        }
      },
      // Callback when a token is received from the service
      onTokenSuccess: function (resp) {
        if (state.cardNumberValid && state.cardCvvValid && state.cardExpirationValid) {
            alert('Here is a single-use token: ' + resp.token_value);
        } else {
            alert('Invalid Expiration Date or CVV.');
        }
      },
      // Callback when an error is received from the service
      onTokenError: function (resp) {
        alert('There was an error: ' + resp.error.message);
      },
      // Callback when an event is fired within an iFrame
    onEvent: function (event) {
      state[event.source + 'Valid'] = event.classes.indexOf('valid') !== -1;
      console.log(state);
    }
    });

    // Attach a handler to interrupt the form submission
    Heartland.Events.addHandler(document.getElementById('iframes'), 'submit', function (e) {
      // Prevent the form from continuing to the `action` address
      e.preventDefault();
      // Tell the iframes to tokenize the data
      hps.Messages.post(
        {
          accumulateData: true,
          action: 'tokenize',
          message: 'pkapi_cert_jKc1FtuyAydZhZfbB3'
        },
        'cardNumber'
      );
    });
  }(document, Heartland));

body {
    font-family: sans-serif;
}

label[for=iframesCardNumber], label[for=iframesCardExpiration], label[for=iframesCardCvv] {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 13px;
    color: #555;
    line-height: 1.5;
}

#ss-banner {
    background: transparent url(https://github.com/hps/heartland-php/blob/master/examples/end-to-end/assets/images/ss-shield@2x.png?raw=true) no-repeat left center;
    height: 40px;
    background-size: 280px 34px;
    margin-bottom: 7px;
}

user agent stylesheet
div {
    display: block;
}

.form-row {
  margin-top: 10px;
}

.form-wrapper {
  display: block;
  width: 300px;
  margin: 10px auto;
}

<script src="http://hps.github.io/token/2.1/securesubmit.js"></script>
<!-- The Payment Form -->

<div class="form-wrapper">

  <form id="iframes" action="" method="GET">
  <div id="ss-banner"></div>

    <div class="form-row">
      <label for="iframesCardNumber">Card Number:</label>
      <div id="iframesCardNumber"></div>
    </div>

    <div class="form-row">
      <label for="iframesCardExpiration">Card Expiration:</label>
      <div id="iframesCardExpiration"></div>
    </div>

    <div class="form-row">
      <label for="iframesCardCvv">Card CVV:</label>
      <div id="iframesCardCvv"></div>
    </div>

    <br />
    <div id="iframesSubmit"></div>
  </form>

</div>

​

Answer 1

不幸的是，我也遇到了同样的问题，无法找到不需要重新加载的解决方案。我所做的是：

var iframes = document.getElementById('newCreditCardForm').getElementsByTagName('iframe');
    $.each(iframes, function (index, iframe) {
        var src = iframe.src;
        iframe.src = '';
        setTimeout(function () { iframe.src = src; }, 100);
    });

基本上，我隐藏了表单，并强制每个字段的iframe单独重新加载。100 if的超时是必要的，因为如果src被立即更改，Chrome不会重新加载iframe。