PayPal Checkout update cart totals dynamically after ajax - ajax

Question

I have a shopping site which I'm converting to Ajax. It has a list of cart items.
On page load the PayPal button is set up correctly with the cart totals passed in. However, now that I have an Ajax cart I need to update the cart totals when the cart changes.
If I call the paypal.Button.render function again I get another button.
So I need to either delete the old button and rebuild or call something to update the totals.
Can anyone point me in the right direction?
This is my code that sets up the button.
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

Well this works but it's ugly. Surely there must be a better way.
After updating the cart. I remove the PayButton button from the DOM and put the HTML back how it was. Then I call the routine to reconfigure the button.
$("#PayPalSection").remove();
$("#paypalButtonContainer").append('<div id="PayPalSection"><div class= "col-8 offset-2"><div id="paypal-button-container"></div></div></div>');
ConfigurePayPalButton();
This does a round trip to the DB unfortunately but I will try and write something that doesn't require that step.