Paypal-checkout-components: Can no longer change currency

[jaynetics]

Now that currency is passed as a param to the script tag, it is no longer possible to set it dynamically.

There seem to be only two workarounds, both of which are bad:

• reload the page
  
  
  
  • not acceptable if you have form data on the page
  
  
• add another script tag with the correct currency on demand
  
  
  
  • fails with "Can not register multiple components" errors
  
  
  • deleting the appropriate zoid objects from window seems like a brittle fix
  
  

We need to set the currency dynamically because we provide international donation forms where donors can choose the currency for paypal and other payment methods.

We are also not the only ones with this problem, see https://stackoverflow.com/questions/56142863/paypal-sdk-how-to-change-currency-dynamically-without-reinjecting-and-reinitial

[richardscarrott]

It'd be great to know if PayPal plans to support SPAs in the future?

[CollinHerber]

Why the hell do we have to sacrifice so much, and create horrible UX just to integrate PayPal SDK? Do they seriously not care? For the love of god why is this unnoticed.

[lukasondrej]

Has there been any progress on this? It's very inconvenient to not be able to dynamically set the currency. I'm facing the same situation and reinjecting the script seems like an awful way to do it.

[bluepnume]

Hi all,

The currency is required in the script tag to allow the SDK to return the correct buttons for your page. Recommend reloading the script tag if it needs to change. Thanks.

[oscargare]

I'm trying to reinjecting the script, but, it's a horrible solution.

[magma1447]

I also found this issue today. Doesn't really feel modern to have to reload pages.

My current workaround is to delete the dom where the current button is, load the script again, with the new currency. Wait 100 ms, and then create a new button.

There are several issues here:

• I don't know how long time it takes for the new paypal object to be created. I sleep 100 ms, it seems to work most of the time, at least on my computer. Real customers might run into issues.
• It creates errors in the console when destroying the old button when its animations hasn't finished.
• It feels like a major hack. I am not comfortable with such hacks in my payment solutions.

Please provide a proper solution. Personally I don't understand why the currency needs to be known when creating the buttons. I accept three currencies, and the buttons look the same with those three. In my case, just removing the check of button-currency vs order-currency would be enough. But if that's not something you find reasonable, please implement a proper way to create new smart buttons with the new currency.

[jaynetics]

There is a solution for React now. Use @paypal/react-paypal-js as described in its README and here.

[KristofHorvath]

The React module does not solve the problem but makes the workaround easier.

The design is fundamentally bad. Selecting currency should be able without reloading the SDK. By the way, why have to select the currency at loading at all? As @magma1447 commented, there isn't any obvious reason for it.

@bluepnume Please, compare the number of thumb ups of jaynetics's original comment and the thumb downs / confused ones at your comment, as well as the number of people who commented and agreed with @jaynetics. We hope you'll consider a better design.

[marshall86]

I also found this issue today. Doesn't really feel modern to have to reload pages.

My current workaround is to delete the dom where the current button is, load the script again, with the new currency. Wait 100 ms, and then create a new button.

There are several issues here:

• I don't know how long time it takes for the new paypal object to be created. I sleep 100 ms, it seems to work most of the time, at least on my computer. Real customers might run into issues.
• It creates errors in the console when destroying the old button when its animations hasn't finished.
• It feels like a major hack. I am not comfortable with such hacks in my payment solutions.

Please provide a proper solution. Personally I don't understand why the currency needs to be known when creating the buttons. I accept three currencies, and the buttons look the same with those three. In my case, just removing the check of button-currency vs order-currency would be enough. But if that's not something you find reasonable, please implement a proper way to create new smart buttons with the new currency.

i'm facing the same issue.. i was thinking to use the same approach but that's sad.. How the hell Paypal doesn't care at all to improve the sdk, i'm speechless

[mdwt]

I'm using script.onload which at least removes the need to force a delay and draws the button only when the script has finished loading. The buttons are always visible - i.e. you don't see anything change on the UI which is better than what I saw when using a delay.

So call loadPayPal(currency) on page load & whenever the currency value changes.

function loadPayPal(currency){

$('#paypal-script')?.remove();
const url = `https://www.paypal.com/sdk/js?client-id....currency=${currency}`;
const script = document.createElement('script');
    script.id = "paypal-script"
    script.src = url;
    script.onload = script.onreadystatechange = function () {
      initPaypal();                                                                         <---------     initialise the buttons here
    }
    head.appendChild(script);
}

where initPaypal has the normal paypal.Buttons implementation

 function initPaypal() {
    paypal.Buttons({
      onClick: function (data, actions) ....
      .....
   });
}

[marshall86]

In the meantime, I had another Idea :) it looks to be working. I might create a github repo when I have time.

Basically you need to check if window.paypal exists, if yes, you remove it and you recreate the button and in this way it's fine