Stripe PaymentIntent 信用卡支付表单刷新页面而不是处理

如何解决Stripe PaymentIntent 信用卡支付表单刷新页面而不是处理

我非常感谢您的帮助。每次我点击 Stripe 信用卡表单上的提交表单时，它都会刷新页面并将 Stripe 令牌和卡字段附加到 URL 上，而不是处理付款。我查看了 Stripe 仪表板，付款没有通过。

付款意图项目在模型中被捕获，但付款状态为无，大概是因为表单什么都不做。

以前它没有重定向到任何地方（这很好，我有一个修复计划），但付款是在 Stripe 上进行的。在我修复了 form.submit() 问题（必须更改按钮 id）之后，现在表单只是自我刷新。

表单html

<section class="hero py-5">
<div class="container">
    <div class='col-10 col-md-6 mx-auto'>
        <form id="payment-form">
          <div id="card-element" class="form-control"><!--Stripe.js injects the Card Element--></div>
          <button class="btn btn-success" id="stripe-submit">
            <div class="spinner visible" id="spinner"></div>
            <span id="button-text">Pay Now</span>
          </button>
          <p id="card-error" role="alert"></p>
          <p class="result-message hidden">
            Payment succeeded,see the result in your
            <a href="" target="_blank">Stripe dashboard.</a> Refresh the page to pay again.
          </p>
        </form>
</div>
</div>
</section>

Javascript：

<script src="https://js.stripe.com/v3/"></script>
    
<script type="text/javascript">
var stripe = Stripe(XXXXX);
    
var elements = stripe.elements();
    
var card = elements.create('card',{
      style: {
        base: {
          iconColor: '#666EE8',color: '#31325F',lineHeight: '40px',fontWeight: 300,fontFamily: '"Helvetica Neue",Helvetica,sans-serif',fontSize: '15px','::placeholder': {
            color: '#CFD7E0',},}
      });
    
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 : "";
            });
      
card.addEventListener('change',function(event) {
            var displayError = document.getElementById('card-error');
            if (event.error) {
              displayError.textContent = event.error.message;
            } else {
              displayError.textContent = '';
            }
          });

var form = document.getElementById('payment-form');
    
form.addEventListener('submit',handleSubmit);
    
function handleSubmit(event) {
        event.preventDefault();
    
        payWithCard(stripe,card,'{{client_secret}}');
       
        stripe.createtoken(card).then(function(result) {
          if (result.error) {
            // Inform the user if there was an error
            var errorElement = document.getElementById('card-error');
            errorElement.textContent = result.error.message;
          } 
    

          stripetokenHandler(result.token);
          form.removeEventListener('submit',handleSubmit);
          form.submit();
    
        });
    
        };
    
      
var payWithCard = function(stripe,clientSecret) {
          loading(true);
          stripe
            .confirmCardPayment(clientSecret,{
              payment_method: {
                card: card
              }
          
        })
        .then(function(result) {
          if (result.error) {
            
            showError(result.error.message);
          } else {
            
            orderComplete(result.paymentIntent.id);
          }
        });
      };
     
function addCardField(form,token,field) {
              let hiddenInput = document.createElement('input');
              hiddenInput.setAttribute('type','hidden');
              hiddenInput.setAttribute('name',"user[card_" + field + "]");
              hiddenInput.setAttribute('value',token.card[field]);
              form.appendChild(hiddenInput);
            }

function stripetokenHandler(token) {
    
          var form = document.getElementById('payment-form');
          var hiddenInput = document.createElement('input');
          hiddenInput.setAttribute('type','hidden');
          hiddenInput.setAttribute('name','stripetoken');
          hiddenInput.setAttribute('value',token.id);
          form.appendChild(hiddenInput);
    
    
          ["type","exp_month","exp_year","last4"].forEach(function(field) {
             addCardField(form,field);
    
          });
    }
    
    var orderComplete = function(paymentIntentId) {
      loading(true);
      document
        .querySelector(".result-message a")
        .setAttribute(
          "href","https://www.milkfish.art/cart/card-paymentverify/" + paymentIntentId
        );
      document.querySelector(".result-message").classList.remove("hidden");
      document.querySelector("button").disabled = true;
    };
    
    
    var showError = function(errorMsgText) {
      loading(false);
      var errorMsg = document.querySelector("#card-error");
      errorMsg.textContent = errorMsgText;
      setTimeout(function() {
        errorMsg.textContent = "";
      },4000);
    };
    
    
     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>