如何解决条带禁用“付款”按钮和微调器不起作用
我正在尝试根据此处的官方文档实施Stripe:https://stripe.com/docs/payments/integration-builder
我设法使付款表格正常工作,除了在没有输入信用卡的情况下应禁用“付款”按钮,并且在字段中有抄送并按“付款”时,微调框也应接管。下面的代码:
<form id="payment-form">
<div id="card-element" class="">
<!-- Elements will create input elements here -->
</div>
<button id="submit" data-secret="<%= @intent.client_secret %>" class="stripe-custom">
<div class="spinner hidden" id="spinner"></div>
<span id="button-text">Pay Now</span>
</button>
<p id="card-error" role="alert"></p>
<p class="result-message bold hidden">
Payment Successful!
</form>
<script>
// Set up Stripe.js and Elements to use in checkout form
var style = {
base: {
color: "#32325d",fontSmoothing: "antialiased",}
};
var card = elements.create("card",{ style: style });
card.mount("#card-element");
card.on("change",function (event) {
// Disable the Pay button if there are no card details in the Element
document.querySelector("button").disabled = event.empty;
document.querySelector("#card-error").textContent = event.error ? event.error.message : "";
});
</script>
<script>
// Show a spinner on payment submission
var loading = function(isLoading) {
if (isLoading) {
// Disable the button and show a spinner
document.querySelector("button").disabled = true;
document.querySelector("#spinner").classList.remove("hidden");
document.querySelector("#button-text").classList.add("hidden");
} else {
document.querySelector("button").disabled = false;
document.querySelector("#spinner").classList.add("hidden");
document.querySelector("#button-text").classList.remove("hidden");
}
};
</script>
运行以上命令时,控制台日志中没有看到任何错误。有任何想法吗? TIA!
解决方法
在要提交的事件侦听器中,您必须调用由“ var loading = function(isLoading)”定义的loading函数。像这样:
var form = document.getElementById('payment-form');
form.addEventListener('submit',function(event) {
loading(true);
});
我相信类似的方法应该对您有用。
,当按钮收到 'click' 事件时,您可以调用该方法: 加载(真);
//创建函数加载
const loading = function(isLoading) {
if (isLoading) {
// Disable the button and show a spinner
document.querySelector("button").disabled = true;
document.querySelector("#spinner").classList.remove("hidden");
document.querySelector("#button-text").classList.add("hidden");
} else {
document.querySelector("button").disabled = false;
document.querySelector("#spinner").classList.add("hidden");
document.querySelector("#button-text").classList.remove("hidden");
}
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。