清除Heartland iFrame输入而不重新加载iFrame

Question

我在我的POS web应用程序上使用Heartland Payment Gateway JavaScript SDK进行信用卡支付。POS允许用户将支付分成不同的信用卡支付。为此，我在一个引导模式弹出框中打开Heartland Iframe表单。但是由于Chrome中的CORS错误，当添加支付时，我无法使用JavaScript清除表单字段。此外，我搜索了Heartland 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/[e-mail]?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/[e-mail]?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/[e-mail]?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/[e-mail]?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/[e-mail]?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/[e-mail]?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/[e-mail]?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/[e-mail]?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/[e-mail]?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/[e-mail]?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毫秒的超时是必要的，因为如果src被立即更改回来，Chrome将不会重新加载iframe。