Paypal Express Checkout 窗口不断加载

Posted 2023-02-22

【中文标题】Paypal Express Checkout 窗口不断加载

【英文标题】：Paypal Express Checkout window keeps loading

【发布时间】：2018-05-06 19:15:48

【问题描述】：

我正在尝试集成 PayPal 按钮，以便对我刚刚创建的新 Paypal 帐户执行简单的付款。 按照指南，我渲染了按钮，但是当我单击它并显示新窗口时，什么也没有发生。 “加载锁”一直在旋转，但新窗口和我的页面中都没有显示错误。不执行对“onError()”函数的调用。我不知道怎么了！我听从了导游的指示！

在浏览其他网站时，我看到在新窗口中，在加载（以及“加载锁”旋转）时，一些 get/post 被执行，在我的情况下没有执行任何操作。

这是我的 html 和相关的 .js 文件（嗯，是其中的一部分）

//THIS FUNCTION IS CALLED TO DISPLAY A NEW ELEMENT CONTAINING THE BUTTON 
function payment(todelete) 

    destroy(todelete);
    $("#pay").delay(timeFade).fadeIn(timeFade);
    
    paypal.Button.render(
        env: 'sandbox',
        client: 
            sandbox:    'MYKEY',
            production: 'MYKEY'
        ,

        commit: true,

        payment: function(data, actions) 
            fetch("/getOldAmount").then(function(res)
                return (res.json());
            ).then(function(data)

                var old_amount = data[0].Donation;
                var amount_tot = $("#amount").val();
                //BUILDING A RANDOM TEST JSON, NOT RELATED TO MY CODE
                var payment_json = 
                        transactions: [
                            
                                amount: 
                                    total:    '1.00',
                                    currency: 'USD'
                                
                            
                        ]
                    ;
                if(amount_tot > old_amount)
                //WHEN CLICKING PAYPAL BUTTON I CAN SEE THIS LOG, SO EVERYTHING IS FINE HERE
                    console.log("EXECUTING PAYPAL POST");
                    return actions.payment.create(payment_json);
                 else 
                    console.log("Amount too low to execute transaction");
                

            );
        ,

        onAuthorize: function(data, actions) 
            return actions.payment.execute().then(function(payment) 
                console.log("AUTHORIZED");
            );
        ,
        onError: function(data, actions)
            console.log("ERRORRRRRR");
            console.log(data);
        

    , '#paypal-button');
    

<div class="container pagination-centered" style="display: block">
            <div class="form-group">
                <label class="richest_header" for="amount">ENTER AMOUNT</label>
                <input type="text" class="form-control amount-field" id="amount" placeholder="Amount..." name="amountField">
            </div>
            <div id="paypal-button"></div>
</div>

<!-- HEADER -->
    [...]
<script src="https://www.paypalobjects.com/api/checkout.js">
    <script type="text/javascript" src="assets/script/myscript.js"></script>
    [...]

我需要做更多的事情吗？ 我需要添加代码吗？ 难道我做错了什么？ 为什么 paypal 的文档这么差？

【问题讨论】：

but no errors are shown in the new window, nor in my page - 这是指浏览器 developer 工具控制台吗？即那里没有错误？您尝试过多种浏览器（Firefox、Chrome、IE、Edge 等）？所有行为都一样吗？除了在onAuthorize 中解析为未定义的承诺之外，您是否需要返回其他内容？

您是从 localhost 启动文件还是仅从 file:/// 启动文件？

抱歉信息太少了。我指的是每个页面的控制台、我设置按钮的页面以及 PayPal 为启动付款而创建的新窗口。我之所以指定这个是因为当我做错事（例如构建一个格式不正确的 json）时，按钮执行的调用会返回一个错误（例如 "Bad Request" ），但现在什么也没有发生。我已经尝试了所有浏览器，Firefox、Edge、Chrome 和 Internet Explorer。每次都是同样的老故事。

【参考方案1】：

你需要将promise返回给payment() -- return fetch("/getOldAmount").then(...

【讨论】：

...这就是他们看到加载微调器的确切原因。他们没有兑现承诺，因此弹出窗口不知道何时显示结帐体验。

感谢您的回答！我会尝试这样做，如果这是问题，我会告诉你;)

非常感谢！有效！！！！你能解释一下出了什么问题吗？为什么？

当然！所以payment() 函数需要你回传一个承诺——这就是它最终获得在 iframe 中启动 url 所需的付款 ID 的方式。在您的情况下，由于没有返回承诺，payment() 函数刚刚得到undefined，这意味着它没有足够的上下文来正确启动结帐流程。

感谢您的解释！