The new Stripe Checkout introduces a beautiful UI. When combined with AWS Amplify, you can use it to add payments and subscriptions to your Gatsby site. Over the next three posts I will walk through how to integrate Stripe Checkout within a Gatsby project using AWS Amplify.
Take a look at the code from this blog post on Github.
There are three parts to integrating Stripe Checkout with Gatsby:
Part 1. Return a session (server side)
In order for a customer to be able to pay for a product or subscription using Stripe Checkout a checkout session, that represents the customer's order, needs to be created. You'll use an AWS Lambda function, created via AWS Amplify, to interact with the Stripe API and create/return the Stripe Checkout session.
Part 2. Redirect to checkout (client side)
Your customers will select a product to purchase on your Gatsby website. Your site will call the Lambda function you created in part 1 to retrieve your Stripe Checkout session. You'll need the session Id to redirect your customer to the Stripe hosted checkout.
Part 3. Payment confirmation (webhook)
Finally, you'll add a webhook within the Stripe Dashboard that will send confirmation to your app when the Stripe payment has been completed. You'll use another AWS Lambda function here, created via AWS Amplify, to listen out for when Stripe calls the webhook.
Part 1. Return a session
These instructions assume you have a Gatsby project, that you have installed and configured the AWS Amplify CLI and that you have signed up for Stripe.
Step 1. Add a product to the Stripe dashboard
To use Stripe Checkout you first need a product to sell. For the purposes of this tutorial, you are going to sell a subscription Pro Plan
priced at $12/month
for your service.
- Sign into Stripe.
- From the Dashboard navigate to the Products page.
- Click
+ Add product
. - Enter a product
name
i.e. Pro Plan. - Enter a
price
i.e. $12. - Ensure that
recurring
is selected. - Select a billing period of
monthly
. - Click
Save product
Step 2. Initiate Amplify for your Gatsby project
Use the Amplify CLI to initiate your Amplify project by running the following command within your terminal at the root of your Gatsby project:
amplify init
Amplify will run through the following series of configuration questions:
Enter a name for the project
Enter gatsbyStripeCheckout
.
Enter a name for the environment
Press Enter to select the default environment of dev
.
Choose your default editor:
Select your default code editor i.e. Visual Studio Code
.
Choose the type of app that you're building
Select javascript
.
What javascript framework are you using
Select react
.
Source Directory Path:
Press Enter to select the default path of src
.
Distribution Directory Path:
Press Enter to select the default path of build
.
Build Command:
Press Enter to select the default command of npm run-script build
.
Start Command:
Press Enter to select the default command of npm run-script start
.
Do you want to use an AWS profile?
Enter Y
.
Please choose the profile you want to use
Select the profile you'd like to use i.e. default
.
Step 3. Create a Lambda function
Now you've configured Amplify for your project, use the Amplify CLI to setup a boilerplate AWS Lambda function that is accessible via AWS API Gateway. You'll modify this function later to call the Stripe API and retrieve the checkout session.
To setup the Lambda function and API Gateway, within terminal, at the root of your project, run:
amplify add api
Amplify will walk through the following configuration question:
Please select from one of the below mentioned services:
GraphQL
❯ REST
Choose REST
.
Provide a friendly name for your resource to be used as a label for this category in the project:
Enter stripeAPI
or a name of your choosing.
Provide a path (e.g., /book/{isbn}):
Enter /checkout
Choose a Lambda source (Use arrow keys)
❯ Create a new Lambda function
Choose Create a new Lambda function
Provide a friendly name for your resource to be used as a label for this category in the project:
Enter stripeCheckout
Provide the AWS Lambda function name:
Press Enter to select the default name of stripeCheckout
Choose the function runtime that you want to use:
Select NodeJS
Choose the function template that you want to use:
Hello World
CRUD function for DynamoDB (Integration with API Gateway)
❯ Serverless ExpressJS function (Integration with API Gateway)
Lambda trigger
Select Serverless ExpressJS function (Integration with API Gateway)
Do you want to access other resources created in this project from your Lambda function? (Y/n)
Enter n
.
Do you want to invoke this function on a recurring schedule? (y/N)
Enter n
.
Do you want to edit the local lambda function now? (Y/n)
Enter n
.
Restrict API access (Y/n)
Enter n
.
Do you want to add another path? (y/N)
Enter n
.
Within your Gatsby project, Amplify has created a directory /amplify
. This contains a /backend
folder within which sits the boilerplate /api
and /function
code.
Step 4. Write the Stripe checkout function
Now the Amplify configuration has been completed, in your terminal navigate to the amplify/backend/function/stripeCheckout/src
folder within your Gatsby project:
cd /<GATSBY_ROOT_PATH>/amplify/backend/function/stripeCheckout/src
Install Stripe:
npm install stripe
Now, in your code editor, open the app.js
folder within the /amplify/backend/functions/stripeCheckout/src/
directory.
To the top of the file add:
const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
process.env.STRIPE_SECRET_KEY
refers to an environment variable the Lambda will have access to that you will add manually using the AWS console later on. It is best not to hardcode the Stripe secret key here as it would be saved to your git repo.
Delete the example get
, post
, put
and delete
code and replace it with the following async post
function:
app.post('/checkout', async function(req, res) {
try {
const session = await stripe.checkout.sessions.create({
payment_method_types: ['card'],
line_items: [
{
price: req.body.priceId, // The priceId of the product being purchased, retrievable from the Stripe dashboard
quantity: req.body.quantity,
},
],
mode: 'subscription',
client_reference_id: req.body.client_reference_id,
success_url:
'https://example.com/success?session_id={CHECKOUT_SESSION_ID}', // The URL the customer will be directed to after the payment or subscription creation is successful.
cancel_url: 'https://example.com/cancel', // The URL the customer will be directed to if they decide to cancel payment and return to your website.
})
res.json(session)
} catch (err) {
res.json(err)
}
})
This function returns the response of the stripe.checkout.sessions.create
call. The object passed to this function includes:
line_items: [
{
price: req.body.priceId,
quantity: req.body.quantity,
},
]
Stripe attributes
The price is the priceId
of the product your customer is purchasing, as created within the Stripe dashboard in step 1. You will pass the priceId
and quantity
from the checkout page that you will create in the next post in this series.
The client_reference_id
is a reference that will be available to the webhook you will create in the final post of this series. It is useful for matching up a payment to a customer or purchase.
Visit the Stripe checkout session API docs to see all the attributes you can pass to the session object.
Step 5. Publish your updates to your AWS account
From the terminal, run:
amplify push
It will show you the following table:
and it will ask:
Are you sure you want to continue? (Y/n)
Enter y
.
The amplify push
command takes a few minutes to complete.
Step 6. Add your Stripe secret key as an environment variable to your Lambda
Log in to your Stripe account and click on the
Developers
link and navigate to your API keys. Reveal and copy the secret key token, it will look something likesk_test_LE4KxozC6O8d3krb3FEjbBp00erufO2Bm
.Log in to your AWS console and navigate to your Lambda page.
Find your
stripeCheckout-dev
function on the Lambda > Functions list (If you can't find it, check you are in the correct region within the AWS console)On the stripeCheckout function page within the AWS console, scroll down to the Environment Variables area and click
Edit
.Add a new variable called
STRIPE_SECRET_KEY
with the value of the Stripe secret key you downloaded earlier and clickSave
.
You have setup AWS API Gateway and an AWS Lambda function to handle retrieving and returning a Stripe Checkout function. In the next post, you'll write a checkoutButton
component that will redirect your customer to the Stripe Checkout.
Top comments (2)
How can i integrate it with aws cognito when user signup and choose membership plan?
have you found any answer?