I'm trying to add the drop-in checkout to a react SPA, following .html#implementation. I'm dynamically adding chargebee.js after the rest of the view gets rendered, and then call registerAgain().

ponentDidMount() {
    const el = document.createElement('script');
    el.onload = () => {
        window.Chargebee.registerAgain();
        // this.setState({ chargebeeReady: true });
    };
    el.setAttribute('data-cb-site', 'derp-test');
    el.setAttribute('src', '.js');
    document.body.appendChild(el);
}

render() {
    // [...]
    <a
        href="javascript:void(0)"
        data-cb-type="checkout"
        data-cb-plan-id="asdf-test"
    >
        Subscribe
    </a>
    // [...]
}

when clicking subscribe I get an error:

Uncaught TypeError: Cannot read property 'getCart' of null
    at t.a (event-binding.ts:24)
    at Function.value (chargebee.ts:46)
    at HTMLScriptElement.el.onload (Subscribe.js:23)

I'm trying to add the drop-in checkout to a react SPA, following https://www.chargebee./checkout-portal-docs/drop-in-tutorial.html#implementation. I'm dynamically adding chargebee.js after the rest of the view gets rendered, and then call registerAgain().

ponentDidMount() {
    const el = document.createElement('script');
    el.onload = () => {
        window.Chargebee.registerAgain();
        // this.setState({ chargebeeReady: true });
    };
    el.setAttribute('data-cb-site', 'derp-test');
    el.setAttribute('src', 'https://js.chargebee./v2/chargebee.js');
    document.body.appendChild(el);
}

render() {
    // [...]
    <a
        href="javascript:void(0)"
        data-cb-type="checkout"
        data-cb-plan-id="asdf-test"
    >
        Subscribe
    </a>
    // [...]
}

when clicking subscribe I get an error:

Uncaught TypeError: Cannot read property 'getCart' of null
    at t.a (event-binding.ts:24)
    at Function.value (chargebee.ts:46)
    at HTMLScriptElement.el.onload (Subscribe.js:23)

• javascript
• reactjs
• chargebee

Share Improve this question Follow edited Sep 27, 2023 at 3:59 Bharathvaj Ganesan 3,20411 gold badge2121 silver badges3535 bronze badges asked Jul 12, 2018 at 9:10 kindoflikekindoflike 48766 silver badges2222 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

Chargebee instance will be created when DOMContentLoaded event is triggered.Since, you are loading it asynchronously, instance is not getting created. So you can create the instance using Chargebee.init().

ponentDidMount() {
    const el = document.createElement('script');
    el.onload = () => {
      window.Chargebee.init({
        "site": "derp-test"
      });
      window.Chargebee.registerAgain();
      // this.setState({ chargebeeReady: true });
    };
    el.setAttribute('src', 'https://js.chargebee./v2/chargebee.js');
    document.body.appendChild(el);
}

<script src="https://js.chargebee./v2/chargebee.js"></script>

<script>
      window.addEventListener('load', function () {
     Chargebee.init({
          site: "site_name", // your test site
          publishableKey: "test_"
          })
      Chargebee.registerAgain();

})
    
</script>