Chargebee drop-in fails in React when chargebee.js loads async: call init before registerAgain

When you load chargebee.js asynchronously, call Chargebee.init with your site name before registerAgain(). The init call creates the instance that DOMContentLoaded would normally have created. So the onload handler should do Chargebee.init({site: your-site-name}) and then Chargebee.registerAgain(). Without the explicit init, the drop-in checkout fails because there is no instance to register against.

Context: Stack Overflow #51301563 (top answer, 10 votes): The reporter loaded chargebee.js asynchronously in a React SPA and called registerAgain() on load, but the drop-in checkout threw an error. The Chargebee instance is normally created on the DOMContentLoaded event, which had already fired long before the async script arrived, so registerAgain() ran against a nonexistent instance.

Source: Stack Overflow #51301563 (top answer, 10 votes): The reporter loaded chargebee.js asynchronously in a React SPA and called registerAgain() on load, but the drop-in checkout threw an error. The Chargebee instance is normally created on the DOMContentLoaded event, which had already fired long before the async script arrived, so registerAgain() ran against a nonexistent instance.

Verified resolution: When you load chargebee.js asynchronously, call Chargebee.init with your site name before registerAgain(). The init call creates the instance that DOMContentLoaded would normally have created. So the onload handler should do Chargebee.init({site: your-site-name}) and then Chargebee.registerAgain(). Without the explicit init, the drop-in checkout fails because there is no instance to register against.

Source URL: https://stackoverflow.com/questions/51301563