在Paypal iFrame (跨域)中捕获点击Pay Now按钮

Question

我有一个支付系统使用贝宝的支付流程，他们给我一个iFrame来渲染。我想要捕获“立即支付”按钮已被点击，以便我可以隐藏在我的页面上的“取消”按钮，而交易正在处理。

我已经尝试了常用的jQuery：

$("#iFrame .button").click(function(){});

和

$("#iFrame").contents().find("input[type='button']")

但是什么都不起作用。我得到了错误：

未捕获DOMException:未能从“”HTMLIFrameElement“”读取“”contentDocument“”属性:阻止源为"http://localhost“的帧访问跨域帧”“

关于如何捕捉点击有什么建议吗？

Answer 1

您不能从托管站点访问任何事件或与iFrame的内容进行交互。

但是，您可以判断用户是否在iFrame内部进行了单击。所以，你能做的最好的事情就是为点击iFrame设置一个监听器，然后假设他们会继续下订单并隐藏你的按钮。如下所示：

focus();
var listener = addEventListener('blur', function() {
    if(document.activeElement === document.getElementById('iframe')) {
        // clicked
    }
    removeEventListener(listener);
});

Answer 2

PayPal不会传播它的点击，所以当PayPal按钮为clicked.If时，监听添加的元素当单击PayPal Pay now按钮时，您想做些什么，最好的解决方法是：

注意：' paypal -checkout-sandbox‘类也是paypal使用的类名，即使在生产中也是如此。JQUERY：

$(document).on('DOMNodeInserted', function(e) {
    if($(e.target).hasClass('paypal-checkout-sandbox')){
        //DO SOMETHING.
    }
});

Answer 3

好的，我一直在使用@JCue的答案来捕获PayPal按钮点击，直到我使用的是不推荐使用的Checkout.JS PayPal版本。现在我们正在迁移到最新的SDK版本，它提供了开箱即用的onClick功能。

<script>
 paypal.Buttons({
  // onClick is called when the button is clicked
  onClick: function(data, actions) {
   Your Code Here
  }
  ...
 })
</script>

请参阅此处- https://developer.paypal.com/docs/checkout/integration-features/validation/