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

TL;DR

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.

Steps

1. 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.

When to use

You are seeing this: Chargebee's drop-in only binds elements from the initial HTML, so links rendered later by a SPA framework stay dead. Use this skill when you run into "Chargebee drop-in links dead in Angular: the library only binds initial page HTML".

When not to use

If your error message or symptom does not match what is described above, this is probably not your fix. Search for your exact error text instead of forcing this one to fit.

Versions

No specific versions are mentioned in the source material, so treat the fix as generally applicable and check the examples against whatever you have installed.

Why this happens

The original report does not dig into a root cause. It documents the symptom and the fix that resolved it.

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