Search code examples
angularchargebee

ChargeBee + Angular2+ Drop-in checkout not working


Problem: I'm trying to integrate ChargeBee into an Angular2+ website following their simple instructions: https://jsdocs.chargebee.com/#/drop-in-checkout.

I have added within the sites tags:

<script src="https://js.chargebee.com/v2/chargebee.js" data-cb-site="XXXX"></script>

And added this to a test component:

<a href="javascript:void(0)" data-cb-type="portal">MANAGE ACCOUNT</a>

But when you click on the link, no errors or anything - just nothing happens..

I've checked that the library is in the header and accessible - it is. I've also tested the same code on a plain HTML page and of course it works fine. So I'm guessing it's probably something between ChargeBee's library and Angular?

I've had a look around and haven't found anything particularly useful so any clarity on this would be really appreciated. Thanks :)


Solution

  • Your problem is that the library has no idea when your component gets rendered, so your link does nothing. Looks like normally this library only react on the initial html on the page.

    Try adding it in index.html instead of the component and make it hidden. After adding it to index.html you can trigger .click() on that anchor tag from any component which should normally trigger the library's functionality