使用客户端 REST api 在 Laravel 中不显示 PayPal 按钮

Posted 2023-02-22

【中文标题】使用客户端 REST api 在 Laravel 中不显示 PayPal 按钮

【英文标题】：PayPal button is not displayed in Laravel using client side REST api

【发布时间】：2018-04-10 19:10:39

【问题描述】：

我已将 PayPal 付款选项添加到我的网站。我已经集成了 PayPal 支付的代码如下：

<div class="col-md-6 col-xs-12">
 <script src="https://www.paypalobjects.com/api/checkout.js"></script>
                        <div class="sec_pay_hd">
                            Payment Method
                        </div>
                        <div id="paypal-button-container"></div>
                        <div id="confirm" class="hidden">
                                    <div>Ship to:</div>
                                    <div><span id="recipient"></span>, <span id="line1"></span>, <span id="city"></span></div>
                                    <div><span id="state"></span>, <span id="zip"></span>, <span id="country"></span></div>

                                    <button id="confirmButton">Complete Payment</button>
                                </div>
                                <div id="thanks" class="hidden">
                                            Thanks, <span id="thanksname"></span>!
                                        </div>
                        <!-- <div class="pay_mode_img1 visa_imgsasa"> -->
                        <!-- </div> -->
                        <script>
                                    paypal.Button.render(

                                        env: 'sandbox', // sandbox | production

                                        client: 
                                            sandbox:    'AZDxjDScFpQtjWTOUtWKbyN_bDt4OgqaF4eYXlewfBP4-8aqX3PiV8e1GWU6liB2CUXlkA59kJXE7M6R',
                                            production: '<insert production client id>'
                                        ,

                                        payment: function(data, actions) 
                                            return actions.payment.create(
                                                payment: 
                                                    transactions: [
                                                        
                                                            amount:  total: '0.01', currency: 'USD' 
                                                        
                                                    ]
                                                
                                            );
                                        ,

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

                                        onAuthorize: function(data, actions) 

                                            // Get the payment details

                                            return actions.payment.get().then(function(data) 

                                                // Display the payment details and a confirmation button

                                                var shipping = data.payer.payer_info.shipping_address;

                                                document.querySelector('#recipient').innerText = shipping.recipient_name;
                                                document.querySelector('#line1').innerText     = shipping.line1;
                                                document.querySelector('#city').innerText      = shipping.city;
                                                document.querySelector('#state').innerText     = shipping.state;
                                                document.querySelector('#zip').innerText       = shipping.postal_code;
                                                document.querySelector('#country').innerText   = shipping.country_code;

                                                document.querySelector('#paypal-button-container').style.display = 'none';
                                                document.querySelector('#confirm').style.display = 'block';

                                                // Listen for click on confirm button

                                                document.querySelector('#confirmButton').addEventListener('click', function() 

                                                    // Disable the button and show a loading message

                                                    document.querySelector('#confirm').innerText = 'Loading...';
                                                    document.querySelector('#confirm').disabled = true;

                                                    // Execute the payment

                                                    return actions.payment.execute().then(function() 

                                                        // Show a thank-you note

                                                        document.querySelector('#thanksname').innerText = shipping.recipient_name;

                                                        document.querySelector('#confirm').style.display = 'none';
                                                        document.querySelector('#thanks').style.display = 'block';
                                                    );
                                                );
                                            );
                                        

                                    , '#paypal-button-container');

                                </script>

                        <div class="visa_imgsasa">
                            <img src="asset('assets/resources/images/visa-image.png')" >
                        </div>

我在页面顶部添加了 paypal 脚本。但是现在我反复收到此错误

感谢任何形式的帮助，我已在网络上搜索此错误但找不到任何帮助。这是来自贝宝网站演示的示例代码。但这在我的本地服务器上也不起作用。

【问题讨论】：

我很乐意帮助调试（我维护 checkout.js）——是否有可以重现此错误的实时页面？

删除了包含网站链接的评论。 _/_

【参考方案1】：

$('nav#menu').mmenu();

^ 从您的页面中删除它可以解决问题。我的猜测是从 DOM 中删除 iframe，然后重新添加它，这会导致 iframe 的内部窗口关闭。

【讨论】：

非常感谢，现在可以正常使用了。 mmenu 是一个第三方脚本来管理移动菜单，向右滑动。不知何故，这干扰了贝宝代码，我正在努力解决这个问题。但这是一种解脱。非常感谢！！