Import Stripe using Angular2 and stripe.js

Question

I am using Angular2, Ionic2 and Stripe.js for payment processing. This thread here ionic2 with stripe payment gateway is using the plugin https://github.com/Telerik-Verified-Plugins/Stripe/blob/master/doc/index.md but it's not safe because you have to embed the Secret key inside the app. Even the page is telling people not to use this plugin.

I tried to use the node.js version here:

https://www.npmjs.com/package/stripe

However, I cannot figure out how to do the var stripe = require('stripe')(' your stripe API key '); when in TypeScript, you have to use import.

Finally, I did put <script type="text/javascript" src="https://js.stripe.com/v2/"></script> in index.html and the stripe variable shows globally inside each Component. However, I don't feel like this is the proper way to do it as the stripe object may not be ready by the time I use it inside each Component or Page.

What's the proper way to use Angular2 and Stripe.js? Ionic2 specifically would be nice but optional.

Thanks

UPDATE 1

I tried npm install stripe and then used import '../../node_modules/stripe/lib/stripe.js'; but still got error:

TypeScript error: /Users/username/Documents/StripePayment/app/pages/home/home.ts(16,23): Error TS2304: Cannot find name 'Stripe'.
Error: Cannot find module '../../node_modules/stripe/lib/stripe.js' from '/Users/username/Documents/StripePayment/app/pages/home'

Here is my VS Code screenshot with directory structure:

Answer 1

Add the scripttag in the index.html and then put a declaration after the imports in home.ts

declare var Stripe: any; I believe this is the correct way to import external libs in ng2

Src: Nic Raboy There are a some more info there; the better way to install an external lib is to download the typedefs from DefinitelyTyped and install with $ typings install Then you should be able to import as usual

This is, of course, if there are typedefs in the DefinitelyTyped repo. There does not seem to exist typedefs for the Stripe library, though.