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)

```



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

Hi, was there a resolution for this issue?

I'm facing the same error in a Vue app.


 

  mounted () {
    const el = document.createElement('script')
    el.onload = () => {
      window.Chargebee.registerAgain()
      const instance = window.Chargebee.getInstance()
      instance.setCheckoutCallbacks(this.handlePayment)
    }
    el.setAttribute('data-cb-site', 'test')
    el.setAttribute('src', '//js.chargebee.com/v2/chargebee.js')
    document.body.appendChild(el)
  }

 

Aneesh said that the script creation was called before the button creation, but for both Vue and React, the mounted() and componentDidMount() lifecycle hooks mean that the buttons are available in the DOM.

I'm going a bit mad trying to solve the same issue in React. Any help would be greatly appreciated. 


1 person likes this
Login or Signup to post a comment