javascript - Paypal 按钮 - 在弹出窗口打开之前添加操作

标签 javascript paypal alert sandbox disable

<分区>

我正在将 Paypal 按钮添加到我的站点。但是,我想做一些用户需要在按钮起作用之前填写某些信息(地址框)的事情。如果用户填写了信息,当点击Paypal按钮时,提示用户登录Paypal(正常流程)。否则,用户会收到一个提醒:alert('Please choose a delivery address');

我一直在尝试做如下的事情:

$('.paypal-button').on( "click", function() {
  alert('Please choose a delivery address');
});

甚至尝试禁用该按钮(虽然这不太理想),但发现它不会基于 this other answer 工作:

$('.paypal-button').prop("disabled",true);

这是 Paypal 沙盒代码(你需要一个真正的沙盒凭证):

<!DOCTYPE html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://www.paypalobjects.com/api/checkout.js"></script>
</head>

<body>
    <div id="paypal-button-container"></div>

    <script>
        paypal.Button.render({

            env: 'sandbox', // sandbox | production

            // PayPal Client IDs - replace with your own
            // Create a PayPal app: https://developer.paypal.com/developer/applications/create
            client: {
                sandbox:    'ABCDEcFpQtjWTOUtWKbyN_bDt4OgqatestlewfBP4-33iV8e1GWU6liB2XYZ',
                production: '<insert production client id>'
            },

            // Show the buyer a 'Pay Now' button in the checkout flow
            commit: true,

            // payment() is called when the button is clicked
            payment: function(data, actions) {

                // Make a call to the REST api to create the payment
                return actions.payment.create({
                    payment: {
                        transactions: [
                            {
                                amount: { total: '0.01', currency: 'USD' }
                            }
                        ]
                    }
                });
            },

            // onAuthorize() is called when the buyer approves the payment
            onAuthorize: function(data, actions) {

                // Make a call to the REST api to execute the payment
                return actions.payment.execute().then(function() {
                    window.alert('Payment Complete!');
                });
            }

        }, '#paypal-button-container');

    </script>
</body>

最佳答案

new docs提供 onInitonClick 选项,但是正如所讨论的 here您不能通过脚本触发弹出窗口,因为它会被阻止。因此,异步方法存在错误,因为它会在验证失败时短暂显示弹出窗口。 我以这种方式实现了同步验证:

onInit: function(data, actions) {
  // Disable the buttons
  actions.disable();
  // Listen for changes
  $("input[aria-required=true]").change(function() {
      var valid=true;
      $("input[aria-required=true]").each(function(){
          if($(this).val()=="") valid=false;
      });
      if (valid==true) {
        actions.enable();
      } else {
        actions.disable();
      }

  });       
}

我试图通过监听器使用验证(wp cf7 的内置),但似乎没有办法。

关于javascript - Paypal 按钮 - 在弹出窗口打开之前添加操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51776022/

上一篇:javascript - PayPal Checkout JS 错误处理

下一篇:c# - 如何验证 Paypal 付款是否真实 C#

相关文章:

javascript - 想要重定向到特定部分 id 上的下一页,而不在 url 中显示 #id

javascript - 如何在单击事件期间淡入元素?

java - 如何在任务栏中制作 JFrame 警报?

javascript - 如何从 L.Routing.control 获取距离和时间?

javascript - 想要添加两个 float ,并将其连接为字符串

paypal - opencart 1.5 Paypal 标准问题

ruby-on-rails-3.2 - 具有定期付款选项的最佳印度支付网关

php - 成功后未从 paypal 获取 txn_id

elasticsearch - 使用 Kibana3 的警报/通知?

android - (Android) 在对话框中列出只有一个带有复选框的项目