在Stripe Payment

Question

我在我的网站上使用Stripe支付API，效果很好。但是，一旦付款完成，客户仍然在结账页面上，直到加载订单确认/收据页面。我不希望用户离开页面，直到收据页面加载。加载需要一段时间，因为订单表正在更新并且正在发送电子邮件。

由于付款发生在Strip模式中，并且付款成功后模式关闭，我不确定如何在页面重定向到收据页面之前实施加载程序。

我需要在调用Stripe之前调用加载器，在条纹按钮上按下吗？任何输入都会有所帮助。如果需要，我可以提供我的网站名称。

Answer 1

您需要使用Checkout "custom integration"，因此您可以定义自己的token回调函数。

在回调中，您可以在AJAX请求中将令牌发送到后端，并在等待服务器回复时向客户显示某种等待状态指示。

以下是与AJAX请求进行自定义集成的基本示例：https://jsfiddle.net/ywain/ym0k4t9f/

Answer 2

在没有自定义灌输的情况下，请使用onbeforeunload

window.onbeforeunload = function(e) {
  $('.loader').show();
}

Answer 3

更容易。

取决于 iframe 是否存在...付款后转到提交页面...< 当按钮加载时，iframe 存在。之后……iframe 消失了……在重定向之前的那一刻，我们显示了 css 加载器。

 var clickeado = "no";
  $(document).ready(function()
  {
    $('#stripeform .stripe-button-el').on('click', function()
        {
          clickeado = "yes";    
          ckeckCountIframe();       
    }); 
    function ckeckCountIframe()
        {
            const interval = setInterval(() =>
            {

              if(!$('.stripe_checkout_app').is(":visible"))
              {
                //console.log("Stripe modal is hidden");
                //document.getElementsByClassName("stripe-button-el")[0].disabled=false;
                if (clickeado == "yes")
                {

                  if ($('.stripe_checkout_app').length > 0)
                  {
                    console.log('iframe exists');
                    console.log("GoBack");
                    document.getElementsByClassName("stripe-button-el")[0].disabled=true;
                    window.location = "../store_checkout.php";
                    clearInterval(interval);
                  }
                  else
                  {
                    console.log('iframe no exists');
                    console.log("Loader ON");
                    clearInterval(interval);
                  }

                }
              }

            }, 1000)
          }
 });