Webflow上具有双重功能的按钮-提交表单并重定向到付款

Question

我正在webflow中建立一个网站-大部分是没有代码的。然而，我需要一个按钮在我的网站上有双重功能。一个是提交表格，另一个是提交付款。我有自定义代码，我将粘贴在下面，但是，当我按提交付款不会通过。有人知道我该怎么补救吗?

我也试过重定向到一个条带链接，但后来我在如何按钮可以有双重功能的损失。理想情况下，点击提交按钮后，我想按钮提交一个表单，然后重定向到条纹支付链接-谁能协助?

<script>
function selectOnlyThis(id) {
for (var i = 1;i <= 3; i++){
if ("Check" + i === id && document.getElementById("Check" + i).checked === true){
document.getElementById("Check" + i).checked = true;
} else {
document.getElementById("Check" + i).checked = false;
}
}  
}
$(function() {
let submitted = false;
$('#Sell-form').submit(function (e) {
if (submitted) {
return true;
}
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
const amount = $('#cc-amount')
const cardName = $('#cc-name')
const cardNumber = $('#cc-number')
const cardExpir = $('#cc-exp')
const cardCv2 = $('#cc-cv2')
const frame = document.querySelector('#frame')
frame.contentDocument.write(
`
<form action="https://www.usaepay.com/gate.php" method="POST" id="inner-form">
<input type="hidden" name="UMkey" value="API_KEY">
<input type="hidden" name="UMredirDeclined" value="https://gownshadchan.com/failure">
<input type="hidden" name="UMredirApproved" value="https://gownshadchan.com/success">
<input type="hidden" name="UMname" value="${cardName.val()}">
<input type="hidden" name="UMcard" value="${cardNumber.val()}">
<input type="hidden" name="UMexpir" value="${cardExpir.val()}">
<input type="hidden" name="UMamount" value="${amount.val()}">
<input type="hidden" name="UMcvv2" value="${cardCv2.val()}">
`
)
function success() {
cardNumber.val('****' + cardNumber.val().slice(-4))
cardExpir.remove()
cardCv2.remove()
submitted = true;
$('#Sell-form').submit()
}
function failure() {
submitted = false;
$('#submission-error-message').show()
}
frame.onload = function () {
const content = frame.contentWindow.document.body.innerHTML.trim()
if (content.includes('success')) {
success()
} else {
failure()
}
}
let doc = (frame.contentWindow || frame.contentDocument);
if (doc.document) doc = doc.document;
doc.getElementById("inner-form").submit();
})
});
</script>

Answer 1

首先，您确实不希望这些信用卡详细信息通过您的客户端代码传递。这种方法存在许多不受欢迎的隐私、安全和PCI遵从性问题。

一个更好的方法是提交表单数据，然后将它们重定向到第三方托管的支付页面。让他们来处理PCI合规性要求。

对于你的核心问题，你的代码很接近。

在表单提交上执行多个操作的方法是拦截它，防止默认，然后使用.post()将表单数据直接发送给它的处理程序。

在你的例子中，它看起来像;

$('#Sell-form').submit(function (e) {
if (submitted) {
return true;
}
const form = $(this);
e.preventDefault();
$.post( 
form.attr("action"),
form.serialize(),
function (data, status, xhr) {
// handle success conditions
// e.g. the redirect to the hosted payment page 
}.bind(handler))
.fail(function (jqxhr, settings, ex) {
// handle failure conditions
});
});