Josh Thompson     about     blog     projects

How to Integrate Stripe Checkout and a Jekyll Static Site #

Keep reading if:

šŸ‘‰ You use a static site generator like Jekyll, or Hugo, or Hexo, or Gatsby

šŸ‘‰ You want to sell some small digital product, that could be delivered via email, without using a service that charges a monthly fee or hosts the sales landing page for you

šŸ‘‰ Part of the reason you use a static site generator is because youā€™re leery of using a third-party tool like Gumroad or WooCommerce, and you want to roll-your-own

šŸ‘‰ You want it to ā€œjust workā€ - be able to take credit cards, Apple Pay, or Google Pay, to minimize any friction your potential customers might experience

šŸ‘‰ Youā€™re running a static site because you donā€™t like ā€œmagicā€ or overly-complex tools

I, personally like Jekyll because itā€™s fast and lightweight1. 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 have to deal with a database just to sell some some simple digital products.

šŸ‘‰ click here to jump to the ā€˜give me a sample, let me see what Iā€™m going to getā€™ part

You should buy the guide if: 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 should buy the guide if: 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 should buy the guide if: you use a static site generator, and are comfortable with Zapier's free tier #

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

You should not buy the guide if: you're a student, or not a software developer, or live outside the USA #

If you want this guide, I want you to have it. On the flip side, I started trying to sort all this out myself because I was willing to spend a few hours digging around. I ended up sinking more than 30 hours into figuring this all out.2

A number of students and persons who live outside the USA have contacted me (at thompsonjoshd@gmail.com) and asked for this for free, and I gladly provisioned them with a copy. I donā€™t want everyoneā€™s money, I want the money from people who are cash-rich and time-poor. If youā€™re a softare developer, working in the USA, on a side project, and youā€™re reading this? Just pay the money, itā€™ll save you 30+ hours and make it substantially more likely your customers will have a good experience.

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

10 things youā€™ll learn in this course #

  1. 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!
  2. How to quickly configure Dropbox folders to distribute exactly what you want to distribute, like free samples, product tiers, etc.
  3. Youā€™ll learn how to navigate the test modes across products, customers, purchases, and connections to third-party tools.
  4. 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.
  5. 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.
  6. You donā€™t want to violate Stripeā€™s Terms of Service while testing. Iā€™ll show you how to safely test Stripe purchases.
  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!

What your course includes: #

  • 32 minutes of edited screencasts, mixed in with
  • 26 annotated screenshots, which pair well with the
  • 11 gifs contained within
  • 1 html document
  • across about 30 pages

I told you - this isnā€™t easy. It was surprisingly difficult. It takes time for me to convey all the gotchas and complexity, but Iā€™m good at explaining it.

The value of saving 20-40 hours of frustration? priceless, or what your employer pays you $2000 for, or if you value your non-work time more highly than your work time, this could be worth $5,000+ to you.

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.

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.

Testamonials #

Wow Josh, thank you so much! With your guide, I went from being quite stuck to getting it pretty much all working!

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.


Get a sample #

This course costs šŸ’°šŸ’°šŸ’°, and money changes hands after trust is built, so 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.

Take My Money (for real this time) #

All payment options support credit card, Apple Pay, and Google Pay:

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. Iā€™m also a rock climber, compulsive teacher (Iā€™ve been doing it officially and unofficially for over a decade) and Iā€™ve earned substantial trust via the teaching that I do.3

šŸ‘‰ me on Twitter

Iā€™ve been mentoring Turing students for the last few years, and have been known to give talks at local tech meetups.4

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
  1. And you can pry Ruby from my cold dead hands.Ā 

  2. Yes, thatā€™s embarrassing. I hold in my mind this idea that ā€œGoodā€ developers do thigns quickly, easily, the first time. Iā€™m slowly disabusing myself of that notion, but itā€™s slow going. Iā€™m not ashamed that this took me 30+ hours to figure out. Iā€™m not ashamed that this took me 30+ hours to figure out. Iā€™m not ashamed that this took me 30+ hours to figure out.Ā 

  3. Teaching is based on trust. No trust, no good knowledge transfer. Iā€™ve taught people how to stay safe and thrive in situations that could easily lead to death (rock climbing!) and Iā€™m pretty good at situations not involving life and death, like Stripe Checkout. If youā€™re on the fence on ā€œis Josh trustworthyā€, the answer is an emphatic ā€œusually, in many situations.ā€Ā 

  4. For examples, hereā€™s a talk I gave for developers, a podcast episode about psychological and physical safety in climbing/software development, and this guide has shepharded dozens of people through tumultuous times. All for free.Ā