Using mrgalaxy:stripe vs. npm stripe

zwan · February 22, 2019, 9:24pm

Really sorry if this is a super dumb question but I can’t decide which to use.

I’m on the latest version of Meteor (1.8). Is there a difference between these? Is one more up-to-date than the other? There also seems to be some sort of client side checkout that needs to be installed as well… The examples I’m finding all seem to be completely different.

Wow… adding stripe to my app is WAY more complex than I anticipated.

Thank you.

vooteles · February 22, 2019, 9:53pm

Not familiar with either of these, but in general whenever you have an option to use a widely adopted npm package instead of a Meteor specific galaxy package, you should favor npm. Especially for packages like this. The galaxy one here is probably just a wrapper for some npm ones and very much outdated as well.

zwan · February 22, 2019, 10:38pm

I haven’t felt this lost since I first started learning to code four years ago. What an absolute mess…

pmogollon · February 22, 2019, 10:48pm

Packages like mrgalaxy:stripe where used a lot before it was easy to use npm packages directly with meteor and as stated by @vooteles is better to pick the npm version as the atmosphere package might be just a wrapper and most probbably will be very outdated, like this one that is almost 2 or 3 years old.

zwan · February 23, 2019, 1:23am

I’ll take the advice given here and opt for the npm package (I’ve already been trying to avoid atmosphere packages when possible). However, I’m left wondering how to get Stripe.js working with Meteor. Based on the research I’ve done these past three days, it seems that with Stripe you can go with either Stripe Checkout or Stripe.js (in addition to the API library I referenced above).

Stripe Checkout: Easiest and quickest to setup initially as the UI is done for you. Load up something like react-stripe-checkout and you’re good to go.
Stripe.js: The most flexible in terms of customization. Gives you the most control and options when setting up your payment flow. Harder than the above to integrate.

For my purposes, I’ll be opting for the latter, as I’d prefer to have complete control over my UI. That being said, I’m still a bit unclear as to how I should go about adding Stripe.js to my project. I mean, it can’t be a matter of just dropping their script tag into my intex.html…?

So far, the resources I’ve found all reference Stripe Checkout. I’m having difficulty locating recent (i.e. not outdated) information on using Stripe.js with Meteor.

Suggestions very welcome!

zwan · February 23, 2019, 2:05am

So I’m thinking, if I add this to my checkout container component, it might just work…

componentDidMount() {
  function loadScript() {
    let script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = 'https://js.stripe.com/v2/'
    script.async = true
    document.body.appendChild(script)
  }
  loadScript()
}

vigorwebsolutions · February 23, 2019, 5:47pm

I would strongly suggest exploring Stripe Elements.

In addition to getting a decent UI out of the box, there are a few other perks that I think easily make it worth it:

Auto detection of mobile support for taking a screen cap of a card
Not having to worry about things hijacking your inputs
Great auto-formatting of inputs

Also, I think if you take a look at Stripe’s documentation, you will find that you want to keep the script in the header if at all possible, as having the script loaded on all of your site’s pages will help Stripe detect fraudulent behaviors more easily.

guncebektas · February 24, 2019, 1:49pm

I’m using npm stripe and happy with it. Haven’t tried mrgalaxy:stripe so can’t compare them.

coagmano · February 25, 2019, 12:26am

I would strongly advise against appending a script tag from your JS.

The script tag should work if you add it directly to your index.html file

It looks like npm stripe is the server side code only. Using Stripe.js via script tag likely means you don’t need to use npm stripe at all (or the atmosphere package)

belfigue · December 14, 2019, 2:23am

Hi @zwan. I am stuck with this issue as well. Did you manage to solve it?

arggh · December 14, 2019, 11:00pm

I took a quick look at mrgalaxy:stripe. It’s a tiny Meteor package that pulls down stripe@4.4.0 from npm, makes the Stripe API available globally on the server and adds two client script tags to <head>, including the Stripe client lib + Stripe checkout.

Latest release of Stripe package in npm is currently at 7.14.0, so mrgalaxy:stripe is lagging behind pretty badly. It doesn’t really give you any nice abstractions either, so I really don’t see why anyone would use that package over the official integration from npm

belfigue · December 14, 2019, 11:36pm

I agree. I went with the npm package and it works great on the server. However, for the client, Stripe wants you to include their script in the head of the HTML file like so:

<script src="https://js.stripe.com/v3/"></script>

I have no idea how to do this in Meteor, which is further complicated by the fact that I’m using React. See here: https://stripe.com/docs/billing/subscriptions/set-up-subscription#web-collect-card-details

arggh · December 15, 2019, 7:47am

Just add an html file to your app with the things you want in <head>.

Like this:

<!-- this file is at app/head.html -->
<head>
   <title>Belfigue's app</title>
   <script src="https://js.stripe.com/v3/"></script> 
</head>

wildhart · December 16, 2019, 1:57am

Adding the script to your <head> will load it on every page, even on your landing pages, which will hurt SEO and user experience. At least add the async attribute so that it doesn’t delay the page render: <script src="https://js.stripe.com/v3/" async></script>

If you only want to load the script on your payment routes, you can use JS like this:

function loadJS(src) {
	var ref = window.document.getElementsByTagName("script")[0];
	var script = window.document.createElement("script");
	script.src = src;
	script.async = true;
	ref.parentNode.insertBefore(script, ref);
}

This what I do with the Google Maps script.

hemalr87 · December 16, 2019, 6:36am

Any reason behind not adding a script tag via js? (I do that currently to only load scripts like the Stripe one if/when required)

hemalr87 · December 16, 2019, 6:39am

To answer the original question, the way I do it:

Use the official stripe npm package where needed. The shout for elements is pretty good too (I use it to create my billing/subscription form).
Create methods to store the token returned by stripe elements into your db and use it as and when required (in my case I let Stripe’s subscriptions service manage the subscriptions). I store the subscription and customer ids on the db as well (from Stripe). These can be updated as and when required.
(Optional) - Use onCreateUser to create a stripe customer every time you have a signup

arggh · December 16, 2019, 8:16am

Sure thing. I just answered the question asked…

However, for the client, Stripe wants you to include their script in the head of the HTML file like so …I have no idea how to do this in Meteor

belfigue · December 17, 2019, 1:19am

@hemalr87 may I ask why in step 2 you say to store the token returned by Stripe elements? I’m also planing on using Stripe’s subscriptions service and, if I’m right, the only thing we really need to store is the customer and the subscription id’s? Which token are you referring to?

hemalr87 · December 17, 2019, 2:10am

You’re right. I don’t know why I said that - the token is not stored on the db (not sure what made me forget that). I use the token to set the subscription up. DB looks like:

evolross · February 6, 2020, 7:36pm

Stripe actually recommends loading the client script on every page to reduce fraud. So this is the intended configuration by Stripe. And Meteor apps are single-page so there is no “loading on every page” anyway, the head only loads once.