logo标签列表

触发 PayPal 结账按钮的点击

paypalpaypal-sandbox
22
如何触发PayPal Checkout按钮的点击？ 我们的网站除了信用卡支付外，还将接受PayPal付款，我决定为客户放置单选按钮，以选择客户支付方式，并提供PayPal Checkout按钮： enter image description here PayPal Checkout按钮本身会打开PayPal安全窗口，其余部分都正常工作。当客户点击第一个单选按钮时，我想再次打开PayPal安全窗口，即触发PayPal Checkout按钮上的点击事件。 如果按钮本身出现在iframe中，我无法跨域触发该按钮的点击事件。是否有任何方法可以触发Checkout按钮的点击事件？
以下是HTML代码：
<html>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="https://www.paypalobjects.com/api/checkout.js"></script>
    <script type="text/javascript" src="paypal.js">

    </script>
    <body>
        <div>
        <span style="vertical-align: 50%"><input id="rd" name="aaa" type="radio"/></span>
        <div id="paypal-button-container" style="display: inline-block"></div><hr/>
        <input id="rd1" name="aaa" type="radio"/>
        </div>
    </body>
</html>

以及Javascript代码：

// paypal.js
// Render the PayPal button
$(function(){
    paypal.Button.render({

        // Set your environment

        //TODO: Dynamically provide sandbox or production
        env: 'sandbox', // sandbox | production

        // PayPal Client IDs - replace with your own
        // Create a PayPal app: https://developer.paypal.com/developer/applications/create

        //TODO: Dynamically provide clientID
        client: {
            sandbox:    'ZZZZZZ',
            production: '//TODO: Provide this later'
        },

        // Wait for the PayPal button to be clicked

        payment: function() {

            // Make a client-side call to the REST api to create the payment

            return paypal.rest.payment.create(this.props.env, this.props.client, {
                transactions: [
                    {
                        amount: { total: '13.10', currency: 'USD' }
                    }
                ]
            });
        },

        // Wait for the payment to be authorized by the customer

        onAuthorize: function(data, actions) {

            return actions.payment.get().then(function(paymentData) {

                $('#paypal-button-container').style.display = 'none'; //hide button

                //TODO: Show user payment details
                //TODO: Create input hidden fields and set payerID, paymentID, etc..for later authoriza/capture
            });
        },

        onClick: function(){
            $('#rd').trigger('click');
        },

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

编辑：作为一个工作示例，我建议使用这个网站，但这与我需要的略有不同 https://developer.paypal.com/demo/checkout/#/pattern/mark

4个回答
15

目前 PayPal 按钮不支持此功能。官方政策是，仅在按钮本身上单击应打开结账窗口。

谢谢。还有其他方法可以实现吗？这个PayPal Javascript API没有提供任何其他注册事件处理程序的方式吗？或者有没有其他最佳实践使用Paypal结账按钮来保持用户友好性？ - Arsen Alexanyan
我选择这个作为正确答案，因为没有其他建议。 - Arsen Alexanyan
考虑到这是所有JS和HTML，说它不受支持是不正确的。你可以说它没有得到官方支持，因为PayPal想要强制植入其间谍软件和品牌，但是考虑到用户托管网站并控制JS，这是可能的，只是你不想帮助实现它。 - Ryan Hamilton
5
直译：这是不被支持的，你无法通过编程的方式向iframe（在本例中为PayPal按钮）发送消息并使其打开弹出窗口，因为这会使 window.open 异步执行（不会立即在按钮点击时执行），从而导致浏览器的弹出窗口拦截程序阻止它。为什么要使用iframe呢？除了允许我们呈现完美的按钮外，它还解决了一个恶心的问题，在IE中你几乎不能在不同域之间的父窗口和弹出窗口之间发送消息。因此，它最终成为了确保一切无缝工作的最少hacky的方式。 - bluepnume
7

我可能有点晚了，但我希望这篇文章能够帮到像我一样遇到这个问题的人。

你可以将 PayPal 按钮的不透明度设置为 0，并将其放置在自己的结账按钮上方。然后，根据单选按钮的值，您可以将其显示设置为“none”或“block”。

你能添加一个代码片段以增加清晰度吗？ - Mattia Rasulo
1
在我的情况下，我只想出于空间原因使用完全自定义的按钮。最终，我隐藏了Paypal按钮，直到它在鼠标悬停时包裹在一个overflow:hidden div中。看起来还不错 - 就像一个没有左/右填充的正方形Paypal按钮。
背景：Paypal当前的快速结账文档指出他们仅支持80px最小尺寸的按钮，但通过CSS调整发现，在桌面上真正的最小宽度大约为120px。
0

首先需要明确你正在使用什么。

  • 结账 js 然后使用 checkout.js 进行结账。有效期至 2019 年 2 月之前。

  • JavaScript sdk，然而 PayPal 没有官方公告，如果有人进行反向工程，则可能会实现。 这是不被支持的。您无法以编程方式单击 PayPal 按钮。

    请 访问以下链接以获取更多澄清：https://github.com/paypal/paypal-checkout-components/issues/512

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接