I only need the client to have access to stripe.js on one page but if I use the popular mrgalaxy:stripe package then this will include a call to stripe.js in the head of every route. This really isn’t ideal because it slows page load times.
Kadira’s package solved this by asychronously loading things but now, with 1.3.1, this package is no longer working.
What I want to do, to keep things clean, is npm install stripe for the server side functions and then be able to include stripe.js only on those routes that require it. Should be simple, no? Maybe I’m missing something really obvious - lots of people must be using Stripe in their app - but I’m not seeing it and would appreciate some advice.
Yeah, I guess what I really want to be able to do is import stripe from 'stripe' on the server (we do this now, works fine) and then have import Stripe from 'stripe-client' on the client. That way we get the benefit of using Npm and don’t have random copies of stripe.js laying around. But when I looked I didn’t see any reference to installing stripe.js via Npm (because most people don’t need to do this) and only lots of things telling me to include it in my head which I can do but then, meh, it ends up on every page.
For third party stuff that doesn’t have an npm wrapper, I just throw it in /imports/thirdparty/whatever and that seems to work fine. Those files are ignored until explicitly imported.
The whole problem with that package is it loads stripe.js for each route and blocks the page each time, it’s a horror if you have a slow connection, I linked to an issue about this above. Thanks for your help anyway though!
Also, just generally, I want to move over to using Npm as much as possible but this seems harder than you’d think for Stripe, which is surprising given how popular it is.
I suspect, given they don’t like you hosting it locally, Stripe also don’t want this file cached or force very short expiry times, and this is the reason why it keeps being loaded.
Solving my own issue, in the end we used npm to load the api on the server and $.getScript() on the client.
Server:
meteor npm install stripe --save
Then use
var Stripe = require('stripe')(Meteor.settings.private.STRIPE_LIVE_SECRET_KEY);
to load the library in the file where you want to use their api
Client:
Template.my_billing_template.onRendered(function() {
$.getScript('https://js.stripe.com/v2/', function(err) {
// Handle errors
// Set a key to allow the client to talk to Stripe
Stripe.setPublishableKey(Meteor.settings.public.STRIPE_LIVE_PUBLIC_KEY);
this.state.set('loading', false);
});
});
Like this the browser only tries to load stripe.js when it needs it and you aren’t forced into also loading checkout.js.
The reason I think this issue matters is because the response headers when calling Stripe to get this file include: Cache-Control:public, max-age=300. So yeah, it’s cached, but not much.
Essentially, for everyone using the most popular Stripe package on Atmosphere, each time a user returns to their site (after more than 5 minutes) they first have to wait for Stripe to serve both stripe.js and checkout.js before being given any content. A lot of our users are in low bandwidth areas so for them this was horrific but even from London I would occasionally see a white page for a few seconds.