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.
@Aneesh would really like some attention from Chargebee on this.
Hi there!
You can use the below code for single page react app,
<template>
<a id="subscribe" href="#">Subscribe</a>
</template>
<script>
export default {
mounted() {
const el = document.createElement('script')
el.onload = () => {
var chargebeeInstance = Chargebee.init({
site: "hpv3-test"
});
let cbInstance = window.Chargebee.getInstance()
let cart = cbInstance.getCart();
let product = cbInstance.initializeProduct("cbdemo_grow");
cart.replaceProduct(product);
document.getElementById("subscribe").addEventListener("click", function(){
cart.proceedToCheckout();
});
}
el.setAttribute('src', 'https://js.chargebee.com/v2/chargebee.js')
document.body.appendChild(el)
}
}
</script>Here is more info on the same. I hope this helps!
How about anguarjs solution?
Roffel Lollinger
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)
```