DEV Community

loading...
Cover image for Using the new Stripe Checkout in Gatsby + AWS Amplify: Return a session (server-side)

Using the new Stripe Checkout in Gatsby + AWS Amplify: Return a session (server-side)

beezfedia profile image Beez Fedia ・6 min read

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.

The new Stripe Checkout

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.

  1. Sign into Stripe.
  2. From the Dashboard navigate to the Products page.
  3. Click + Add product.
  4. Enter a product name i.e. Pro Plan.
  5. Enter a price i.e. $12.
  6. Ensure that recurring is selected.
  7. Select a billing period of monthly.
  8. 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
Enter fullscreen mode Exit fullscreen mode

Amplify will run through the following series of configuration questions:

Enter a name for the project
Enter fullscreen mode Exit fullscreen mode

Enter gatsbyStripeCheckout.

Enter a name for the environment
Enter fullscreen mode Exit fullscreen mode

Press Enter to select the default environment of dev.

Choose your default editor:
Enter fullscreen mode Exit fullscreen mode

Select your default code editor i.e. Visual Studio Code.

Choose the type of app that you're building
Enter fullscreen mode Exit fullscreen mode

Select javascript.

What javascript framework are you using
Enter fullscreen mode Exit fullscreen mode

Select react.

Source Directory Path:
Enter fullscreen mode Exit fullscreen mode

Press Enter to select the default path of src.

Distribution Directory Path:
Enter fullscreen mode Exit fullscreen mode

Press Enter to select the default path of build.

Build Command:
Enter fullscreen mode Exit fullscreen mode

Press Enter to select the default command of npm run-script build.

Start Command:
Enter fullscreen mode Exit fullscreen mode

Press Enter to select the default command of npm run-script start.

Do you want to use an AWS profile?
Enter fullscreen mode Exit fullscreen mode

Enter Y.

Please choose the profile you want to use
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Amplify will walk through the following configuration question:

Please select from one of the below mentioned services:
GraphQL
❯ REST
Enter fullscreen mode Exit fullscreen mode

Choose REST.

Provide a friendly name for your resource to be used as a label for this category in the project:
Enter fullscreen mode Exit fullscreen mode

Enter stripeAPI or a name of your choosing.

Provide a path (e.g., /book/{isbn}):
Enter fullscreen mode Exit fullscreen mode

Enter /checkout

Choose a Lambda source (Use arrow keys)
❯ Create a new Lambda function
Enter fullscreen mode Exit fullscreen mode

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 fullscreen mode Exit fullscreen mode

Enter stripeCheckout

Provide the AWS Lambda function name:
Enter fullscreen mode Exit fullscreen mode

Press Enter to select the default name of stripeCheckout

Choose the function runtime that you want to use:
Enter fullscreen mode Exit fullscreen mode

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 
Enter fullscreen mode Exit fullscreen mode

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 fullscreen mode Exit fullscreen mode

Enter n.

Do you want to invoke this function on a recurring schedule? (y/N)
Enter fullscreen mode Exit fullscreen mode

Enter n.

Do you want to edit the local lambda function now? (Y/n)
Enter fullscreen mode Exit fullscreen mode

Enter n.

Restrict API access (Y/n)
Enter fullscreen mode Exit fullscreen mode

Enter n.

Do you want to add another path? (y/N)
Enter fullscreen mode Exit fullscreen mode

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.

Gatsby Amplify folder directories

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
Enter fullscreen mode Exit fullscreen mode

Install Stripe:

npm install stripe
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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)
  }
})
Enter fullscreen mode Exit fullscreen mode

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,
        },
      ]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

It will show you the following table:
Amplify push table
and it will ask:

Are you sure you want to continue? (Y/n)
Enter fullscreen mode Exit fullscreen mode

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

  1. 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 like sk_test_LE4KxozC6O8d3krb3FEjbBp00erufO2Bm.

  2. Log in to your AWS console and navigate to your Lambda page.

  3. 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)

  4. On the stripeCheckout function page within the AWS console, scroll down to the Environment Variables area and click Edit.

  5. Add a new variable called STRIPE_SECRET_KEY with the value of the Stripe secret key you downloaded earlier and click Save.

AWS Lambda environment variables

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.

Discussion (1)

Collapse
designworxz profile image
designworxz

How can i integrate it with aws cognito when user signup and choose membership plan?

Forem Open with the Forem app