Chargebee drop-in links dead in Angular: the library only binds initial page HTML

Chargebee's drop-in only binds elements from the initial HTML, so links rendered later by a SPA framework stay dead. Put the anchor tag in index.html instead of the component template, keep it hidden if needed, and trigger a click on it from your component when the user should open the portal or checkout. That gives the library an element it saw at load time while your framework controls when it fires.

Context: Stack Overflow #50285568 (accepted answer, 3 votes): The reporter added the Chargebee drop-in script tag and a data-cb-type portal link inside an Angular component, and clicking the link did nothing with no errors. The script was loading fine; the problem was that the Chargebee library only wires up elements present in the initial page HTML, and Angular renders the component's link after that scan.

Source: Stack Overflow #50285568 (accepted answer, 3 votes): The reporter added the Chargebee drop-in script tag and a data-cb-type portal link inside an Angular component, and clicking the link did nothing with no errors. The script was loading fine; the problem was that the Chargebee library only wires up elements present in the initial page HTML, and Angular renders the component's link after that scan.

Verified resolution: Chargebee's drop-in only binds elements from the initial HTML, so links rendered later by a SPA framework stay dead. Put the anchor tag in index.html instead of the component template, keep it hidden if needed, and trigger a click on it from your component when the user should open the portal or checkout. That gives the library an element it saw at load time while your framework controls when it fires.

Source URL: https://stackoverflow.com/questions/50285568