Import Stripe using Angular2 and stripe.js - javascript

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:

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.

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

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.

Related

Errors when try to use pdf2json with typescript

when i try to import pdf2json (3.0.1) in my node project (typescript) iam getting this error
Could not find a declaration file for module 'pdf2json'
Also i try to install #types/pdf2json for typescript and there is not available.
How i can solve this
install #types/pdf2json for typescript and there is not available.
Looks like you're right that there are currently no types available, but that's a work in progress and they may exist soon: https://github.com/modesty/pdf2json/pull/278

Could not find a declaration file for module while importing a node module using ES6

I have setup loopback 4 and trying to write a new controller for my Braintree API payments. I have installed the Braintree npm module and using
import {braintree} from 'braintree';
to import into a controller and use in an endpoint. But it is throwing me following error:
*src/controllers/braintree.controller.ts:23:25 - error TS7016: Could not find a declaration file for module 'braintree'. '/home/oem/Learning/learn-loopback/my-todo-app/node_modules/braintree/index.js' implicitly has an 'any' type.
Try `npm install #types/braintree` if it exists or add a new declaration (.d.ts) file containing `declare module 'braintree';*`
When I try the es5 way of importing it is working fine.
Not sure how to fix this.
The braintree type does not seem to exist yet. So here you have 2 possibilities:
You create a type file as suggested in the error, but you need to have a good knowledge of the braintree library.
Replace import {braintree} from 'braintree'; with const braintree = require('braintree'); but you won't have access to all the typescript magic, so be careful when manipulating this library.

Importing Node Modules With JavaScript

I apologize for the simple question, but I'm pretty new to web development and JavaScript.
I want to import a package I've installed using npm, specifically shopify-buy following the guide here: https://shopify.github.io/js-buy-sdk/
The package is in my node_modules folder and I'm trying to import it into a JavaScript document using import Client from 'shopify-buy';
When I try to load everything up in Chrome, I get an error on the import line
Uncaught SyntaxError: Unexpected identifier
The Firefox error is a bit different: import declarations may only appear at top level
What am I doing wrong?
Edit:
The import line is the first line in my JavaScript file. And my HTML file is properly linked to the JS file (I think).
shopify.js
// Functions for SHOPIFY
import Client from 'shopify-buy';
const client = Client.buildClient({
domain: 'xxxxx.myshopify.com',
storefrontAccessToken: 'xxxxx'
});
index.html
<script src="javascript/shopify.js"></script>
If you want to use npm modules via the syntax, like import sth from "something" for browsers, you'd need to set up a module bundler and ES6 compiler, such as Webpack and Babel. You'd need to google them and find tutorials for setting up them accordingly.
An easy way to use the SDK seems to be using the CDN, since it's already been built for browsers to understand. Something like:
index.html
<script src="http://sdks.shopifycdn.com/js-buy-sdk/v1/latest/index.umd.min.js"></script>
<script src="javascript/shopify.js"></script>
shopify.js
const client = ShopifyBuy.buildClient({
domain: 'your-shop-name.myshopify.com',
storefrontAccessToken: 'your-storefront-access-token'
});
console.log(client);
JavaScript Modules can only be run in module-mode scripts. Change your HTML to the following:
<script type="module" src="javascript/shopify.js"></script>

How to import NPM package in JSFiddle?

I would like to use valid-url to validate some URLs using JSFiddle so that I can share it later. I tried adding a link to the index.js file from Github (https://raw.githubusercontent.com/ogt/valid-url/master/index.js) but Fiddle says:
Github is not a CDN, using it as such will cause issues with loading the file. Do you still with to it?
And obviously when I try to use it, an error is thrown:
Refused to execute script from [...] because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.
So, is there any way to use npm packages in a JSFiddle? Or any workaround to achieve this?
Use unpkg.com. They allow you to load any npm module from the browser like a CDN.
Using UNPKG you can load any file from any package following this pattern
https://unpkg.com/:package#:version/:file
So, if you add
https://unpkg.com/valid-url#1.0.9/
Then you'll get this (as shown in the next image)
If you specify the index.js file
https://unpkg.com/valid-url#1.0.9/index.js
Then you'll get this (as shown in the next image)
You'll then be able to use it in your fiddles by adding the Resources you want to.
If you want to import something from npm on the frontend, you can use https://www.skypack.dev/ which converts npm modules to ES Modules, example:
<script type="module">
// Use 'https://cdn.skypack.dev/' + 'npm package name' + '#version its optional'
import random from 'https://cdn.skypack.dev/canvas-sketch-util#1.10.0/random'
console.log('A random number: ', random.range(1,10))
</script>
Here's a JSFiddle using SkyDev to load an npm module.
There are many cases that https://unpkg.com/ wouldn't handle that https://www.skypack.dev/ can, so I recommend using it whenever it's on the front-end
I wrote a slightly more complete answer here about this:
How can I use a CommonJS module on JSFiddle?

Angular 1.x ES6 Webpack include 3rd party libraries

I am developing an app using starter project : https://github.com/shprink/angular1.4-ES6-material-webpack-boilerplate.
I am stuck when I need to use 3rd party library.
I want to use js-yaml https://github.com/nodeca/js-yaml
I try to add it in my angular service:
import jsyaml from '../../node_modules/js-yaml/bin/js-yaml.js';
But I get error:
bundle-0d6476.js:75756 Uncaught Error: Cannot find module "../../node_modules/js-yaml/bin/js-yaml.js"
How do I solve this?
Check the docs on resolving modules. To import modules from node_modules, specify the path omitting everything up to and including node_modules. Thus, import jsyaml from 'js-yaml/bin/js-yaml.js' should work.

Categories