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

TL;DR

Without the explicit init, the drop-in checkout fails because there is no instance to register against.

Steps

1. 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.

When to use

You are seeing this: When you load chargebee.js asynchronously, call Chargebee.init with your site name before registerAgain(). Use this skill when you run into "Chargebee drop-in fails in React when chargebee.js loads async: call init before registerAgain".

When not to use

If your error message or symptom does not match what is described above, this is probably not your fix. Search for your exact error text instead of forcing this one to fit.

Versions

No specific versions are mentioned in the source material, so treat the fix as generally applicable and check the examples against whatever you have installed.

Why this happens

The original report does not dig into a root cause. It documents the symptom and the fix that resolved it.

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