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.

Answer 2

Stripe seems to have type definitions now so alongside

npm install --save stripe

you can also run the following to get TypeScript definitions:

npm install --save @types/stripe

you should then be able to so something like:

import { Stripe } from 'stripe'

The above is psudo code as Ive not tested it but will will be something similar.

More info here: https://www.npmjs.com/package/@types/stripe

Answer 3

The stripe.js library is intended for the server, requires the child_process module, and creates a server of its own. There is not a good way of importing this library directly to a browser environment.