Josh Thompson     about     archive     turing     office hours

How to Integrate Stripe and a static site

Do you use a static site generator like Jekyll, or Hugo, or Hexo, or Gasby?

Do you ever want to sell some small digital product, that could be delivered via email, through that static site, but without using a service that charges a monthly fee or hosts the sales landing page for you?

Does the same drive that makes you use a static site generator make you leery of using a third-party tool like Gumroad or WooCommerce?

You’re running a static site because you don’t like “magic” or overly-complex tools

I like Jekyll because it’s fast and lightweight. Pingdom says this very page you’re reading is about 380Kb and loads in 470ms. That’s pretty light and pretty quick.

I didn’t want to jump to a database-backed platform just to sell some some simple digital products.

You want to be able to take payments on your site for simple info products

You don’t want to re-invent the wheel and jump into a Gumroad-like situation, just to distribute some files after someone pays you some money.

Maybe the idea of vendor lock-in sends you running for the hills. Horror stories of Paypal withholding funds makes you uncomfortable, but you don’t like redirecting a customer to a whole second landing page to purchase something.

Or you happen to like Stripe, the company, and want to see what the deal is with using their tools. 😁

You value your time

When I started this little project, I thought it would take just a few hours. Stripe’s documentation is the gold standard for API docs, and Zapier and Gmail are super simple. How hard could it be to get everything up and running?

The answer is longer than I expected. I think it took me way too many hours to do what would now take me about… two hours.

Let my many hours of extra effort save you a few hours of your own.

If if you make $80,000/year, your effective hourly rate is $40/hr. You may prize your precious non-work hours even more than $40/hr.

This course will save you at least five of your non-work hours, so you can get to building/selling the things you want to build and sell, and living your life.

If you value your free time no higher than your work time, five hours if worth about $200. Fortunately, this course will cost about one hour of salary.

If you value your time at at least $6/hr, this course will be money well spent.

I didn’t know any of the gotchas and issues that popped up as I made this course. I document them all carefully, for your benefit. You’ll save many hours of time and whatever monthly fees Gumroad or another provider would charge you.

You use a static site generator, and are comfortable with the free tiers of various tools

If you have the means to get HTML and JavaScript on the internet, and want to be able to take payment for some digital product, you’ll get a ton of value from this course.

I personally use Jekyll, so code snippets and screenshots in this course are Jekyll-inclined. But this general process translates nicely to any other kind of static site generator, or just hand-rolled HTML.

On top of that, we’ll be using Stripe, Zapier, Dropbox, and Gmail to wire this all together. I don’t use the paid versions of any of these tools, but even if you want to use a different tool or a paid version of one of these tools, you’ll still learn helpful principles and entry/exit points to those tools.

This isn’t a course for only full-time software developers (or those of us full-time software developers who don’t know much HTML and JavaScript! 😉). I assume you’re comfortable in a code editor, but we don’t go deep at all with HTML or JS or CSS. Just enough to accomplish our basic goals.

I don’t use any code but pretty much what Stripe auto-generates for me; almost everything else is plugging together the tools on their respective websites.

I mix annotated screenshots, gifs, code snippets, and more to make a clear walk-through of exactly what I’m doing. It’ll be effortless for you to follow.

Here’s a gif of what the course looks like, as I scroll down the document.

course preview

If you would like to download a free sample, keep scrolling or click this link

10 things you’ll learn in this course

  1. The default HTML/Javascript from Stripe has a formatting error. The button won’t work until you fix it. I’ll show you the error.
  2. The default button formatting (from Stripe) makes it hard to tell that it’s a button. I’ll show you how to fix this with a little HTML and CSS.
  3. You don’t want to violate Stripe’s Terms of Service while testing. I’ll show you how to safely test Stripe purchases.
  4. You’ll learn how to navigate the test modes across products, customers, purchases, and connections to third-party tools.
  5. You’ll learn what event types Stripe tracks that Zapier can pick up. (None of the defaults work!) This was the single hardest piece of this process for me to figure out. After talking with the support teams of both Zapier and Stripe, I sorted it out and I’m excited to share this with you!
  6. How to quickly configure Dropbox folders to distribute exactly what you want to distribute, like free samples, product tiers, etc.
  7. I use Gmail (with Zapier) to send the course out; I’ll show you how configure and test this part of the process.
  8. How to DRY out your JavaScript in Jekyll; if you run with JUST the default JavaScript as provided by Stripe, your landing page’s HTML might get a bit cluttered.
  9. Pitfalls around navigating between Test and Non-test modes in Stripe.
  10. How to use completely free tools to distribute digital content. You’re welcome to pay for paid plans on any of these, but if you’re looking for just something quick, easy, and free - this will work!

100% Satisfaction Guarantee

At any point in time, between now and forever, you can get a 100%, no-questions-asked, refund.

I have complete confidence in the value of what you’re getting; if you decide it’s not a good fit, or life circumstances change and you need the cash on hand - no problem.

Send me an email, and you get a refund, no questions asked.

Oh, and you get to keep the course.

What your course includes:

  • 4000 words, containing
  • 32 minutes of edited screencasts, mixed in with
  • 26 annotated screenshots, which pair well with the
  • 11 gifs contained within
  • 1 html document

The value of saving many hours of frustration? priceless

If I were to print this guide, it be about 30 pages long. Much of the space, however, is annotated screenshots and gifs! You’ll be able to work through it in just one or two sittings.


How Will You Read It?

Soon after you purchase the course, you’ll receive an email from me. In that email will be a link to a Dropbox folder. In that Dropbox folder will be your course!

When you download the ZIP, you’ll see that it contains a HTML document. Right click the document, Select Open With (Firefox, Chrome, Safari), and voilà, you’ll have text, screenshots, gifs, and in-line video, all in an easy-to-read document.

There’s no DRM or crazy shenannigans. I want you to have full access, forever, to what you’ve purchased.


Just The Book

$29

  • HTML document with embedded pictures and gifs
  • Updates for life

The Complete Package

$49

  • HTML document with embedded pictures and gifs
  • Updates for life
  • 30 minutes of video walkthrough across 6 different topics

About The Author

I’m a software developer who’s learning new things, every day.

Those who can’t do, teach, right? nervous laugh

Kidding, kidding. I’ve been helping people learn new things for over a decade, across many domains. I’ve been mentoring Turing students for the last few years, and have been known to give talks at local tech meetups.

I’ve found that one of the best ways to further knowledge of a topic is to teach it, which is why teaching is so core to how I learn.


Frequently asked questions:

Can I have a sample?

I invite you to test-drive this process! Using the “Get free sample” button below, you can experience the full “customer experience”, for free, in order to obtain a sample of this course.

If you like what you see, you can purchase the course and learn how to build this out.

Get your preview of The Complete Package

  • To get the sample, click the button below and enter `4242 4242 4242 4242` for the credit card number, and an expiration date with any date in the future.
  • Please enter a real email address, as that's how you'll receive the course sample.

Is there DRM?

There’s no DRM or crazy shenannigans. I want you to have full access, forever, to what you’ve purchased.

Will I be able to get questions answered, if they pop up?

Of course. Send me an email, and I’ll help out!

Will this course continue to be updated? Will I get free access to future versions?

Absolutely! As I add things to the course, and as I get specific questions from customers, I’ll roll those updates into the course, and I’ll email you with the changelog when I do. 😄

Do I need to be a software developer to use understand this course?

Not at all. The vast majority of the code we work with is copy-pasted from Stripe, to generate a simple button. Most of the complexity I faced was just figuring out how to connect all of the services together, and that’s where 95% of my time went.

Of course, if you decide that the course is over your head, or it’s not what you were expecting - I do 100% no-questions-asked money back.

I cannot afford this! I’m trying to set all of this up as inexpensively as possible. Why are you charging me money?

If you’re truly unable to afford this course, send me an email, and I’ll send it to you for free. I’m not kidding. I expect this group would include students, individuals who live in less-affluent parts of the world, etc. I’m happy to give this to you for free. I want to see people be able to make money by teaching and selling useful products.

Most of you, though, can afford the course. If you’re earning $80,000/yr in salary, you’re being paid about $40/hr. The premium version of this course therefore costs just over one hour of your salary, and it will save you at least ten hours of work, in addition to the monthly fees that you’d pay, using an all-in-one service.

If you value your time above $5/hr, this course is a fantastic deal. If, for whatever reason, you do not value your time above $5/hr but you still want this course, send me an email. I’ll hook you up.

What stack will be covered? What if I don’t use Jekyll as my static site generator?

I use Jekyll, but I’m using plain HTML and CSS to create and style the purchase button, and Stripe provides a snippet of JavaScript, to make the button work. This “stack” will work on any tool you might use, even if your HTML is artisanal and hand-typed.

Why are you selling this course at all? Why not just write a guide and give it away?

Great question. I go into more detail here, but here’s some high points:

  • I wanted to learn how to collect payment for something. Here’s evidence I was successful.
  • Putting a price on something means I’ll put a lot of effort into making it good
  • When someone does something for free, they are telegraphing to the recipient that it’s not worth any money