Start a new topic

Drop-in checkout + React error

hi,


I'm trying to add the drop-in checkout to a react SPA, following https://www.chargebee.com/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()`.


```

componentDidMount() {

 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.com/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)

```


1 Comment

Could you try creating the dynamic subscribe button and then calling the registerAgain() ?

registerAgain() should be called after the creation of dynamic subscribe button. Here, you had called the function after the script creation and before the button creation. This is a possible  reason why the error had occurred

Login or Signup to post a comment