Webflow 上具有雙重功能的按鈕 - 提交表單並重定向到付款

Question

我正在 webflow 中建立一個網站——其中大部分都沒有代碼。 但是，我的網站上需要一個按鈕才能具有雙重功能。 一種是提交表格，另一種是提交付款。 我有我將在下面粘貼的自定義代碼，但是當我按下提交時，付款不會通過 go。 任何人都知道我該如何解決這個問題？

我也嘗試重定向到條帶鏈接，但后來我不知道該按鈕如何具有雙重功能。 理想情況下，在點擊提交按鈕后，我希望按鈕提交表單然后重定向到條帶支付鏈接 - 有人可以幫忙嗎？

<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

    });

});