javascript - 如何重新加载/刷新 Stripe Checkout 按钮?
问题描述
我正在通过 AJAX 提交我的 Stripe Checkout 表单(捕获表单提交事件),因为我有一个复杂的多窗格 HTML 表单,并且希望显示来自 Stripe 的付款错误,而无需重新加载页面并重新生成表单或让用户重新- 输入大量信息。
这一切都很好,除非在禁用条纹结帐按钮后使用它。在预订表单页面上显示错误消息后,我需要用户能够再次单击 Stripe 按钮并尝试不同的付款信息。如何重新激活 Stripe 按钮?我是否需要从 DOM 中删除整个 Stripe 按钮脚本(我正在使用 jQuery)并重新插入它(或类似的代码)?
我的标准结帐按钮代码:
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="my_stripe_key"
data-image="mylogo.png"
data-name="My Booking Form"
data-zip-code="true"
data-locale="auto"
data-email=""
data-description="Payment for this booking"
data-currency="gbp"
data-amount=""
data-label="Pay and book!">
</script>
如果相关,我的 AJAX 表单提交代码:
$('#booking-form').get(0).submit = function() {
var formdata = $(this).serialize();
$.ajax({
headers: {
'X-CSRF-TOKEN': $('#booking-form > input[name="_token"]').val()
},
type: 'POST',
url: 'book',
dataType: 'json',
data: formdata,
success: function(data) {
if (data.response == 'ok') // Payment went through OK
{
// Redirect to booking confirmation page:
window.location.replace(data.url);
} else // Payment failed, alert user to try again
{
$('#erroralert').text('Sorry, payment failed, please try again').removeClass('nodisplay');
}
},
error: function(data) // Server error
{
console.log('Error:', data.responseText);
}
});
// Prevent form submit.
return false;
}
解决方案
提交表单后,您有一个属性disabled="true"
设置为提交按钮元素。您只需要删除此属性 : $('button[type="submit"]').get(0).removeAttr("disabled");
。
有效的例子:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="booking" action="your-server-side-code" method="POST">
<script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-key="pk_test_TYooMQauvdEDq54NiTphI7jx" data-amount="999" data-name="Stripe.com" data-description="Widget" data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
data-locale="auto" data-zip-code="true">
</script>
</form>
<script>
$('#booking').get(0).submit = function() {
$('button[type="submit"]').get(0).removeAttr("disabled");
return false;
}
</script>
要使用您的示例,您应该执行以下操作:
$('#booking-form').get(0).submit = function() {
var formdata = $(this).serialize();
$.ajax({
headers: {
'X-CSRF-TOKEN': $('#booking-form > input[name="_token"]').val()
},
type: 'POST',
url: 'book',
dataType: 'json',
data: formdata,
success: function(data) {
if (data.response == 'ok') // Payment went through OK
{
// Redirect to booking confirmation page:
window.location.replace(data.url);
} else // Payment failed, alert user to try again
{
$('#erroralert').text('Sorry, payment failed, please try again').removeClass('nodisplay');
$('button[type="submit"]').get(0).removeAttr("disabled");
}
},
error: function(data) // Server error
{
console.log('Error:', data.responseText);
}
});
// Prevent form submit.
return false;
}
推荐阅读
- docker - 在不受控制的 CI 环境中连接到不安全的本地 docker 注册表
- ssas - 将 sql rank 转换为 mdx rank
- python - 无法使用原始 base64 表单和 python xmlrpc 客户端加载种子文件
- amazon-cloudformation - 一个 CloudFormation 堆栈还是使用 Export & ImportValue 分成多个堆栈?
- excel - 计算两条线的交叉点的正确公式是什么,而只有与线相关的点?
- javascript - 在同一个 HTML 页面上输入多条记录
- java - 如何使用“Gradle 应用程序插件”停止应用程序运行?
- sql - R 与 SQL Server 连接
- java - 如何通过java在android中制作动画
- java - Java Casting 泛型集合