如何在 React 中使用自定义处理程序而不是 PayPal 按钮？

Question

我有一个包含多种付款方式的网站。我可以在它们之间切换，然后我有一个带有“继续结帐”标签的按钮，当您单击该按钮时，它会根据所选的付款方式执行某些操作。处理函数看起来像这样：

const handlePayment = (method) => {
   if(method === paymentMethods.STRIPE){
       // do something
   }

   if(method === paymentMethods.PAYPAL){
       // do something else
   }
}

问题是我查看了 the docs，它总是显示一个 PayPal 按钮，我不想要一个 PayPal 按钮，我想直接从我的按钮打开 PayPal 表单，当一个方法是已选中。

所以我的意思是，我想以编程方式进行。有什么办法吗？我不想做一个隐藏按钮或触发点击或一些奇怪的事情的 hacky 解决方案...

React PayPal 组件只是 JS SDK.

的包装器

我的 UI 看起来像这样：我想在单击“付款”时打开 PayPal 付款表单，前提是选择了 PayPal。

Answer 1

如果使用PayPal JS SDK打开结帐，则必须使用它的按钮，用户必须自己点击它。 PayPal 有意这样做，以便显示的按钮使用他们一致的品牌。

如果您想要一个替代方案，您可以在没有 JS SDK 的情况下进行集成（仅限 REST API）并拥有自己的按钮，该按钮会重定向到 PayPal 页面以供批准，然后 return你的网站。这是旧的集成模式，适用于旧网站，不推荐。

尽管您有疑虑并且不想使用它，但 JS SDK 及其在容器中的按钮根据您的要求大小实际上是最好的可用解决方案。

根据显示的 UI，您可能会选择隐藏“支付”按钮，并在选择该方法时将其替换为显示“使用 PayPal 支付”的按钮，它可能看起来像这个（大小适合您的容器）：这是 HTML/JS 的示例，您可以从 react-paypal-js 执行相同的操作：

    <script src="https://www.paypal.com/sdk/js?client-id=test&currency=USD"></script>

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

    <script>
        paypal.Buttons({
            fundingSource: paypal.FUNDING.PAYPAL,
            style: {
                color: "blue",
                label: "pay"
            },

            // Set up the transaction
            createOrder: function(data, actions) {

                return actions.order.create({
                    purchase_units: [{
                        amount: {
                            value: '88.44'
                        }
                    }]
                });
            },

            // Finalize the transaction
            onApprove: function(data, actions) {
                return actions.order.capture().then(function(orderData) {
                    // Successful capture! For demo purposes:
                    console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
                    var transaction = orderData.purchase_units[0].payments.captures[0];
                    alert('Transaction '+ transaction.status + ': ' + transaction.id + '\n\nSee console for all available details');

                    // Replace the above to show a success message within this page, e.g.
                    // const element = document.getElementById('paypal-button-container');
                    // element.innerHTML = '';
                    // element.innerHTML = '<h3>Thank you for your payment!</h3>';
                    // Or go to another URL:  actions.redirect('thank_you.html');
                });
            }


        }).render('#paypal-button-container');
    </script>

如何在 React 中使用自定义处理程序而不是 PayPal 按钮？

How to have a custom handler instead of a PayPal button in React?

javascript

paypal

reactjs