How it works...

The addition of the Stripe Pay with Card button is done by manipulating the DOM of the component using Angular's Renderer2 core library. This library is necessary because Angular, by default, strips out any script tags from component templates, which would prevent simply including the script from functioning. However, when we use Renderer2, we can actually dynamically generate and insert the script tag and necessary data attributes needed by Stripe to properly initialize this UI.

Since it's a routable component, when we leave this page, it will tear down all its template views, including its Stripe button configuration and script tag, leaving no mess for us to clean up afterward. If we had appended the button to the body of ...

Get MEAN Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.