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
- 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 price ID
- Paste the IDs into the button
data-price-idattributes.
- Copy your publishable key from: https://dashboard.stripe.com/apikeys and set it as the value for
PUBLISHABLE_KEYin the index.html file
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.
- 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_KEYin 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-pagesbranch and push them to GitHub. - Done, you can now accept live payments on your GitHub pages \o/
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!