GitHub Payment Pages with Stripe Checkout

This is an example of a client-only (server-free) donation payment page that can be hosted on GitHub using Stripe Checkout.

You can see this repository running on GitHub Pages here: https://stripe-samples.github.io/github-pages-stripe-checkout

Setup

• Create Stripe Account: https://dashboard.stripe.com/register
• Enable client-only checkout: https://dashboard.stripe.com/account/checkout/settings
• Create a one-time or recurring product in the Stripe Dashboard: https://dashboard.stripe.com/products
  • After creation click the "Use with checkout" button and copy the sku (sku_xxx) or plan (plan_xxx) ID
  • Paste the IDs into the button data-sku-id/data-plan-id attributes.
• Copy your publishable key from: https://dashboard.stripe.com/apikeys and set it as the value for PUBLISHABLE_KEY in the index.html file

Run locally

Since these are all static assets you can serve them locally with a simple web server, e.g.

python -m SimpleHTTPServer 8888

You can now view your page at http://localhost:8888

If you're getting an error running this command, see more detailed insturctions on MDN.

Go live

• Add username.github.io (replace username with your github user name) to the domain whitelist in https://dashboard.stripe.com/account/checkout/settings
• Replace the test publishable key PUBLISHABLE_KEY in the index.html file with your pk*live_xxx key which can be found here: https://dashboard.stripe.com/test/apikeys (!!!NOTE!!!: never paste in your secret key! For client-only Checkout only the publishable key is needed!)
• Commit the changes to the gh-pages branch and push them to GitHub.
• Done, you can now accept live payments on your GitHub pages \o/

More Checkout Samples

• checkout-one-time-payments
• checkout-single-subscription
• checkout-subscription-and-add-on

FAQ

Q: Why did you pick these frameworks?

A: We chose the most minimal framework to convey the key Stripe calls and concepts you need to understand. These demos are meant as an educational tool that helps you roadmap how to integrate Stripe within your own system independent of the framework.

Q: Can you show me how to build X?

A: We are always looking for new recipe ideas, please email [email protected] with your suggestion!

Author(s)

• @adreyfus-stripe
• @thorsten-stripe