ajax - Paypal 结帐在ajax之后动态更新购物车总数

Question

我有一个购物网站，我正在将其转换为 Ajax。它有一个购物车项目列表。

在页面加载时，PayPal 按钮已正确设置并传入了购物车总数。但是，现在我有一个 Ajax 购物车，我需要在购物车更改时更新购物车总数。

如果我再次调用 paypal.Button.render 函数，我会得到另一个按钮。

所以我需要删除旧按钮并重建或调用一些东西来更新总数。

谁能指出我正确的方向？

这是我设置按钮的代码。

function PayPalButton(authResult) {

   // console.log(authResult);

    // Render the PayPal button
    paypal.Button.render({

        // Set your environment
        env: authResult.PayPalEnvironment, // sandbox | production

        // Specify the style of the button
        style: {
            label: 'generic',
            size: 'responsive',    // small | medium | large | responsive
            shape: 'rect',     // pill | rect
            color: 'blue',     // gold | blue | silver | black
            tagline: false
        },

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

        client: {
            sandbox: authResult.PayPalClientId,
            production: authResult.PayPalClientId
        },

        payment: function (data, actions) {
            // recover transaction value here

            var carttotal = authResult.cart.FTotal - (authResult.VATApplies ? 0 : authResult.cart.VAT);
            var paymentGuid = authResult.cart.PaymentGuid;

            //alert(paymentGuid);

            return actions.payment.create({
                payment: {
                    transactions: [{
                        amount: {
                                    total: carttotal.toString(), currency: 'GBP'
                                },
                        custom: paymentGuid.toString()
                        }]
                }
            });
        },

        onAuthorize: function (data, actions) {

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

                return actions.payment.execute().then(function () {
                    processPayPal(data);
                });
            });
        }

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

};

Answer 1

这很好，但它很丑。肯定有更好的方法。

更新购物车后。我从 DOM 中删除了 PayButton 按钮，并将 HTML 恢复原状。然后我调用例程来重新配置按钮。

$("#PayPalSection").remove();
$("#paypalButtonContainer").append('<div id="PayPalSection"><div class= "col-8 offset-2"><div id="paypal-button-container"></div></div></div>');
ConfigurePayPalButton();

不幸的是，这会往返于数据库，但我会尝试编写一些不需要该步骤的东西。