Donate To Our Cause!
This demo is in test mode. That means you can check out using any of the test card numbers.
+ + +Hello guys, I am Nam and this is my personal blog about my work, my life. Outside of work, I do something about UI, UX, DevOps, mobile...
Taking donations is a fast & powerful way to take in money on your website. Whether you’re a non-profit or an indie creator, get started with Stripe in minutes!
We recently teamed up again on Learn With Jason to build a Jamstack site with a donation button. In this tutorial, we’ll walk through the process of adding a donate button to a Jamstack site and processing donations securely through Stripe Checkout.
If you prefer video, this tutorial is also available as an egghead lesson.
To get started, we need to create a product on Stripe that represents the donation.
sku_H7BEsLD3uMHLVB
)Keep the SKU handy, because we’ll need it in a minute.
Next, we need our Stripe publishable key, which tells Stripe which account the donations should be sent to. Go to your API keys and copy the publishable key.
Next, we need to add the HTML to our page that displays the donation button, as well as a div to display error messages in case something goes wrong.
Update index.html
Donate To Our Cause!
This demo is in test mode. That means you can check out using any of the
test card numbers.
+
+
+
Next, we need to add the JavaScript that initializes Stripe and sends the user to Checkout for payment when they click the donate button.
Update index.html
with the following:
+
+
This code will:
Our redirect code tells Stripe to send successful purchases to success.html
— let’s create that:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/css/style.css" />
<title>Donation Successful — Thank You!</title>
</head>
<body>
<header>
<a href="/" rel="home">Accept Donations on the Jamstack Using Stripe</a>
</header>
<main>
<h1>Donation Successful!</h1>
<p>Thank you so much!</p>
</main>
</body>
</html>
All that’s left to do now is test things out!
Start the site locally using npx serve src
or your preferred server utility, then click the donate button.
Alternatively, you can deploy the site to Netlify and see it running live!
Pay using one of Stripe’s test credit cards and you’ll be redirected to the success page.
To go live, change your Stripe account into live mode, replace the test key with your production publishable key, then deploy the site and you’re in business!
For more information, check out the source code for this example or deploy your own copy to Netlify and give it a try!
Other resources: