我的页面上有一个Stripe付款表单，但我只想在用户按下按钮显示表单时加载它。
我在没有动态加载的情况下使用了这段代码并且它可以100％运行，但是在动态加载的情况下，它似乎没有做任何事情，据我所知..
我将我的代码放入JSFiddle，因为StackOverflow的代码段无法正常工作.. https://jsfiddle.net/4zc1uuas/
这是我的JS代码：
我正在使用LOWER_CAMEL_CASE函数加载loadFiles文件，然后在500毫秒后加载示例中的stripe.js代码。
Stripe有没有人知道我如何动态加载Stripe代码，因为在var oLink = document.getElementById('showBtn');
oLink.addEventListener('click', loadFiles);
function loadFiles() {
document.getElementById("payment").style.display = "block";
loadScript('https://js.stripe.com/v3/');
setTimeout(function() {
loadStripe();
}, 500);
}
function loadScript(url, type, charset) {
if (type === undefined) type = 'text/javascript';
if (url) {
var script = document.querySelector("script[src*='" + url + "']");
if (!script) {
var heads = document.getElementsByTagName("head");
if (heads && heads.length) {
var head = heads[0];
if (head) {
script = document.createElement('script');
script.setAttribute('src', url);
script.setAttribute('type', type);
if (charset) script.setAttribute('charset', charset);
head.appendChild(script);
}
}
}
return script;
}
};
loadStripe = function() {
var stripe = Stripe('pk_test_rWG7KN6nzFjUj5D0EkbdevdS');
var elements = stripe.elements();
var card = elements.create('card', {
style: {
base: {
iconColor: '#666EE8',
color: '#31325F',
lineHeight: '40px',
fontWeight: 400,
fontFamily: '"Proxima Nova", "Montserrat", Arial, sans-serif',
fontSize: '15px',
'::placeholder': {
color: '#CFD7E0',
},
},
}
});
card.mount('#card-element');
function setOutcome(result) {
var successElement = document.querySelector('.success');
var errorElement = document.querySelector('.error');
successElement.classList.remove('visible');
errorElement.classList.remove('visible');
if (result.token) {
// Use the token to create a charge or a customer
// https://stripe.com/docs/charges
successElement.querySelector('.token').textContent = result.token.id;
successElement.classList.add('visible');
self.confetti();
} else if (result.error) {
errorElement.textContent = result.error.message;
errorElement.classList.add('visible');
}
}
card.on('change', function(event) {
setOutcome(event);
});
document.querySelector('form').addEventListener('submit', function(e) {
e.preventDefault();
var form = document.querySelector('form');
var extraDetails = {
name: form.querySelector('input[name=cardholder-name]').value,
};
stripe.createToken(card, extraDetails).then(setOutcome);
});
}
内没有html v3的情况下加载form脚本会返回错误。
完整示例请查看jsfiddle！
任何帮助都会很棒！