How To Properly Load Global Variable With Async Values(reactjs)?

I'm trying to solve this problem that I can't seem to solve with stripe's API's So when creating a charge with their new version API they say that in the front end we should call

Solution 1:

Generally, you'd want to have this account ID available in your app. But if you need to retrieve it, that's fine, but make sure the stripePromise is what you think it is. For example, I can make this work here with a simulated fetch call here: https://codesandbox.io/s/stripe-connect-w-resolve-wts34

Note that I'm managing the Promise explicitly:

const stripePromise = newPromise((resolve, reject) => {
  fetch(...)
  .then(data => data.json())
  .then(result => {
    resolve(
      loadStripe(STRIPE_PUBKEY, { stripeAccount: "acct_xxx" })
    );
  });
});

The fact that you describe this breaking with navigation suggests you might be routing incorrectly. If this is a single page app, the navigation shouldn't cause the App component to re-render.