jQuery 加载器直到在 Stripe Payment 之后重定向答案

【问题标题】：jQuery loader until redirect after Stripe PaymentjQuery 加载器直到在 Stripe Payment 之后重定向
【发布时间】：2018-03-28 14:44:33
【问题描述】：

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

由于付款发生在 Strip 模式中，并且一旦付款成功，模式就会关闭，我不确定如何在页面重定向到收据页面之前实现加载器。

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

【问题讨论】：

标签： php jquery stripe-payments

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

如果没有自定义欢迎使用 onbeforeunload

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

【讨论】：

【解决方案3】：

更容易。

取决于 iframe 是否存在...在付款后转到提交页面...

 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)
          }
 });

【讨论】：