DEV Community: Beez Fedia

Check if a user is part of a Cognito group in AWS Amplify

Beez Fedia — Tue, 16 Mar 2021 11:46:34 +0000

If you're looking to understand if an authenticated user is in a specific group the following method may help:

import { Auth } from 'aws-amplify';

const user =  await Auth.currentAuthenticatedUser();

// Returns an array of groups
const groups = user.signInUserSession.accessToken.payload["cognito:groups"];

user.signInUserSession.accessToken.payload["cognito:groups"] returns an array of all the groups the user belongs to.

To discover if a user is part of the admin group use the array includes method:

const groups = user.signInUserSession.accessToken.payload["cognito:groups"];

groups.includes('admin'); // true

For IE and older browsers use indexOf:

const groups = user.signInUserSession.accessToken.payload["cognito:groups"];

groups.indexOf('admin') !== -1; // true

Happy days!

Web accessibility and dyslexia

Beez Fedia — Tue, 23 Jun 2020 10:35:10 +0000

“Once freed from archaic schooling practices and preconceptions, my mind opened up. Out in the real world, my dyslexia became my massive advantage: it helped me to think creatively and laterally, and see solutions where others saw problems.” - Richard Branson

About dyslexia

Between 5-10% of the global population experience dyslexia. That's approximately 700 million people. According to the NHS, dyslexia can be described as a learning difficulty that can cause problems with reading and writing. Unlike a learning disability, intelligence isn't affected by dyslexia. It is a lifelong problem that may present some day-to-day challenges.

Web accessibility for dyslexic people

There is one surprising point to consider when ensuring your website is accessible for dyslexic people. If you follow the A11Y Project checklist to the letter you'll miss it – I did. If you use the standard axe accessibility testing tools or the WAVE web content accessibility checker they won't alert you to it either. Even if you've ensured your web content is well structured, using readable fonts, ensuring lines of text aren't over 70 characters long, with sufficient colour contrast levels, avoiding green and red/pink colours, you still won't have met this need.

Off-white backgrounds

Where your site includes long blocks of text, consider using an alternative to a white (#FFFFFF) background. If possible, use cream or a soft pastel. Where dyslexia is concerned, white can be too dazzling. It can cause words to blur or swirl together.

When checking your site for accessibility, consider the following 2 points:

Can you use an off-white colour for the background of text blocks?
Can you use dark grey text in place of black?

JAMstack ecommerce - the options

Beez Fedia — Mon, 22 Jun 2020 15:58:55 +0000

What options are there for headless e-commerce?

Back in 2018, I read an article from Harry's on how they used Gatsby to build a blazingly fast e-commerce site - the end result was their stunning site, Flamingo, that serves over 1 million female customers.

Let's take a look into 3 options that you could use to add commerce to your JAMstack and achieve similar results:

Snipcart

Snipcart makes it easy to add a shopping cart to any site. It has been used by over 20,000 developers. It's flexible, dev-friendly and can help speed up the time to delivery for your e-commerce projects. The Gatsby website has a tutorial to help you get started with Snipcart.

Swell

Swell is a headless ecommerce platform. Its API-first philosophy helps brands, startups and agencies to launch a storefront backend fast.

Shopify

Shopify has been around for well over 10 years and your clients or team may already be used to navigating the dashboard, adding products and fulfilling orders. Shopify provides a REST and GraphQL API if you'd like to use it to handle your commerce admin. They are working hard to meet the needs of the JAMstack community. Shopify explored how the JAMstack can be harnessed for e-commerce on their own blog and the Gatsby site has a Shopify tutorial too.

Commerce Layer

If you're working with a global brand, managing multiple currencies and stock locations, Commerce Layer might fulfil your needs. It is a headless commerce and order management system with well written docs and tutorials. They have a number of guides and step-by-step tutorials on their site.

What's missing from this list?

What's on your must read book list for devs (non-dev related)?

Beez Fedia — Sun, 21 Jun 2020 14:51:57 +0000

Using the new Stripe Checkout in Gatsby + AWS Amplify: Payment confirmation (webhook)

Beez Fedia — Fri, 19 Jun 2020 17:21:13 +0000

This is the final post of the Using the new Stripe Checkout in Gatsby + AWS Amplify series. Previously, you completed the server-side setup by writing an AWS Lambda function that returned a new Stripe session for the checkout and you wrote the client-side CheckoutButton component that redirects your customer to Stripe Checkout. In this post, you'll implement a webhook that listens out for confirmation from Stripe that the customer's payment has been completed.

Take a look at the code from this blog post on Github.

Step 1. Update your API to include a stripeHook

If you have been following along with these posts, you will already have AWS Amplify setup within your Gatsby project. Running amplify status from the terminal will show you the status of your AWS services. Your project should include a stripeCheckout function and a stripeAPI.

To update the stripeAPI run:

amplify api update

The Amplify CLI will walk you through a series of questions:

Please select from one of the below mentioned services:

You want to update your REST API.

Please select the REST API you would want to update

Select stripeAPI.

What would you like to do

You want to add a new path to the stripeAPI.

Provide a path (e.g., /book/{isbn}):

Enter /webhook.

Choose a Lambda source

Select 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 stripeHook.

Provide the AWS Lambda function name:

Press Enter to select the default option of stripeHook.

Choose the function runtime that you want to use:

Select NodeJS

Choose the function template that you want to use:

Select Serverless ExpressJS function (Integration with API Gateway)

Do you want to access other resources created in this project from your Lambda function?

Enter n.

Do you want to invoke this function on a recurring schedule?

Enter n.

Do you want to edit the local lambda function now?

Enter n.

Restrict API access

Enter n.

Do you want to add another path?

Enter n.

If you run amplify status again you'll see that the new stripeHook function has been created and the stripeAPI has been updated.

Step 2. Install Stripe

Now the Amplify configuration has been completed, in your terminal navigate to the amplify/backend/function/stripeHook/src folder within your Gatsby project and install Stripe:

cd amplify/backend/function/stripeHook/src
npm install stripe

Step 3. Add your Stripe secret key and endpoint secret

Open the app.js folder within the /amplify/backend/functions/stripeHook/src/ directory.

To the top of this file add constants for your Stripe secret key and endpoint secret:

// Stripe parameters
const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY)
const endpointSecret = process.env.STRIPE_ENDPOINT_SECRET

You will add the STRIPE_SECRET_KEY and STRIPE_ENDPOINT_SECRET environment variables later via your AWS Lambda console.

Step 4. Ensure Stripe has access to the raw request body

When Stripe calls your webhook it runs identity related security checks. It expects the raw request body for the signature to match the expected signature for the payload. By default, our Lambda automatically stringifys the request body so you need to update the bodyParser to include the raw body.

Comment out the call to bodyParser.json():

// app.use(bodyParser.json())

Replace this line with the following code in order to include the rawBody within the request params:

// Add raw body to req params for Stripe signature check
app.use(
  bodyParser.json({
    verify: function(req, res, buf) {
      req.rawBody = buf.toString()
    },
  })
)

Step 4. Write the stripeHook function

Delete the example get, post, put and delete code and replace it with the following empty async post function:

app.post("/webhook", async function (req, res) {})

Within this function you want Stripe to authenticate the request and return the event:

app.post("/webhook", async function (req, res) {
  // Check Stripe signature
  const sig = req.headers['stripe-signature']
  let event
  try {
    event = stripe.webhooks.constructEvent(req.rawBody, sig, endpointSecret)
  } catch (err) {
    return res.status(400).send(`Webhook Error: ${err.message}`)
  }
})

Next, you want to handle the event. Modify the POST function as follows:

app.post("/webhook", async function (req, res) {
  // Check Stripe signature
  const sig = req.headers['stripe-signature']
  let event
  try {
    event = stripe.webhooks.constructEvent(req.rawBody, sig, endpointSecret)
  } catch (err) {
    return res.status(400).send(`Webhook Error: ${err.message}`)
  }

  switch (event.type) {
    case 'checkout.session.completed':
      console.log(`Payment checkout session for ${req.body.data.object.client_reference_id} was successful!`)

      break
    default:
      // Unexpected event type
      return res.status(400).end()
  }
})

You are checking for the checkout.session.completed event and you are accessing the unique client_reference_id you sent to Stripe when creating the original Stripe session via your stripeCheckout lambda function in Part 1. Having access to this allows you to match up payments to unique customer checkouts.

To complete the stripeHook function, Stripe requires that you acknowledge receipt of the event. Add res.json({ received: true }) to the end of the function.

Your POST function should look like:

app.post("/webhook", async function (req, res) {
  // Check Stripe signature
  const sig = req.headers['stripe-signature']
  let event
  try {
    event = stripe.webhooks.constructEvent(req.rawBody, sig, endpointSecret)
  } catch (err) {
    return res.status(400).send(`Webhook Error: ${err.message}`)
  }

  switch (event.type) {
    case 'checkout.session.completed':
      console.log(`Payment checkout session for ${req.body.data.object.client_reference_id} was successful!`)

      break
    default:
      // Unexpected event type
      return res.status(400).end()
  }

  // Return a response to acknowledge receipt of the event
  res.json({ received: true })
})

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 the webhook to Stripe

In order for Stripe to send out the event you need to add the URL the webhook must call within the Stripe dashboard.

To find the URL of the stripeHook lambda you created, log into your AWS Console and navigate to the API Gateway page. From here, select the stripeAPI. From the left-hand navigation panel, select Stages. Finally, click on dev > /webhook > POST. The Invoke URL will be shown in a blue panel at the top of the main area. Copy the URL. It will look something like https://4ssahjnp1d3.execute-api.eu-west-2.amazonaws.com/dev/webhook
Log in to your Stripe account, click on the Developers link and navigate to Webhooks.
Click on + Add endpoint and paste in your endpoint URL.
Within Events to send search for and select the checkout.session.completed event. Click Add endpoint.
Reveal, copy and save the signing secret which you will add as an AWS Lambda environment variable in the next step.

Step 7. Add your Stripe secret key and endpoint secret as environment variables to your Lambda

Remain in your Stripe account and navigate to your API keys. Reveal and copy the secret key token, it will look something like sk_test_LE4KxozC6O8d3krb3FEjbBp00erufO2Bm.
Log in to your AWS console and navigate to your Lambda page.
Find your stripeHook-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 stripeHook function page within the AWS console, scroll down to the Environment Variables area and click Edit.
Add STRIPE_SECRET_KEY and STRIPE_ENDPOINT_SECRET variables with the values copied from the Stripe dashboard earlier. Click Save.

You've completed setting up the new Stripe Checkout in Gatsby using AWS Amplify.

Extra info.

When testing the Stripe Checkout use the card number 4242 4242 4242 4242 with an expiry date in the future and any 3 digits for the CVC.

To see that the webhook has been sent after payment, log into Stripe, navigate to your webhook and scroll down to Webhook attempts. You can resend webhooks from here too.

To observe that the Lambda function fired on receipt of the webhook, log into AWS Console and navigate to the stripeHook lambda function. Click on the monitoring tab and click View logs on Cloudwatch. Scroll down to Log events and you'll find the console.log we wrote earlier that logged Payment checkout session for UniqueString was successful!.

To delete the resources pushed to AWS, run amplify delete from terminal.

Using the new Stripe Checkout in Gatsby + AWS Amplify: Redirect to checkout (client-side)

Beez Fedia — Fri, 19 Jun 2020 17:21:02 +0000

In the first part of this series of posts you created a Lambda function, using AWS Amplify, to create a Stripe Checkout session. In this post, you'll redirect your customer to the Stripe Checkout page using the checkout session Id.

Take a look at the code from this blog post on Github.

Step 1. Install Stripe.js

Stripe Checkout relies on Stripe's javascript library, Stripe.js. At the root of your Gatsby project, within terminal, install Stripe.js:

npm install @stripe/stripe-js

Stripe fraud detection

Stripe includes some advanced fraud functionality that helps detect suspicious behaviour as prospective customers browse your site. The Stripe.js module inserts a <script> tag that loads Stripe.js from https://js.stripe.com as a side effect when the module is imported. For optimal fraud detection, the Stripe.js script needs to be available on every page of your website. The gatsby-browser.js API file is the perfect place to import the Stripe.js module in order to meet this requirement.

At the route of your project, create a gatsby-browser.js file:

touch gatsby-browser.js

At the top of the gatsby-browser.js file import the Stripe.js module:

// gatsby-browser.js
import '@stripe/stripe-js'

Step 2. Create a checkout button component

Create a CheckoutButton.js component within the /src/components/ folder

touch src/components/CheckoutButton.js

Import React and export default an empty CheckoutButton function:

import React from "react"

const CheckoutButton = () => {}

export default CheckoutButton

Return a <button>Continue to payment</button> from the CheckoutButton function:

import React from "react"

const CheckoutButton = () => {
  return <button>Continue to payment</button>
}

export default CheckoutButton

Add an empty async redirectToCheckout function to the CheckoutButton component function:

import React from "react"

const CheckoutButton = () => {
  const redirectToCheckout = async () => {}

  return <button>Continue to payment</button>
}

export default CheckoutButton

You want this function to be called when the customer clicks the Continue to payment button. Use an onClick event handler to call the redirectToCheckout function when the button is clicked.

import React from "react"

const CheckoutButton = () => {
  const redirectToCheckout = async () => {}

  return <button onClick={redirectToCheckout}>Continue to payment</button>
}

export default CheckoutButton

Step 3. Fetch the Stripe Checkout session

The redirectToCheckout function needs to call the Lambda function you created in part 1 to retrieve the Stripe Checkout session. To interact with the Lambda you need to import API from aws-amplify. To add Amplify to your app, in terminal run:

npm install aws-amplify

Import and configure Amplify within gatsby-browser.js:

import Amplify from "aws-amplify"
import awsconfig from "./src/aws-exports"
Amplify.configure(awsconfig)

Import API from aws-amplify at the top of your CheckoutButton.js component file:

import { API } from 'aws-amplify'

Add an empty async fetchSession function to your redirectToCheckout function

const redirectToCheckout = async () => {
      const fetchSession = async () => {}
  }

Within this function send a POST request to the stripeAPI, /checkout endpoint that AWS Amplify created for you using AWS API Gateway in part 1. The Lambda function you wrote in part 1 is expecting 3 body params in this request – priceId, quantity and client_reference_id. Modify your fetchSession function to call the API endpoint to return the session Id:

const redirectToCheckout = async () => {
      const fetchSession = async () => {
        const apiName = 'stripeAPI'
        const apiEndpoint = '/checkout'
        const body = {
            quantity: 1,
            client_reference_id: 'UniqueString',
            priceId: ''
        }
        const session = await API.post(apiName, apiEndpoint, { body })
        return session
      }
  }

As mentioned in part 1, the client_reference_id is a unique reference you can send to Stripe that will help you identify this purchase for the payment confirmation webhook later. The priceId is the priceId of the product you setup on Stripe in part 1.

To fetch the priceId of the product you created from the Stripe dashboard:

Log into your Stripe dashboard
Navigate to Products
Select the product Pro Plan you created earlier
Within the Pricing section, look for the API ID. It will look something like price_1GuxxSBwl4TwghDgsuUB0RGd. If the Id you've copied begins with prod_ this is not the right Id.

Add the priceId to the body object within the fetchSession function:

const body = {
        quantity: 1,
        client_reference_id: "UniqueString",
        priceId: "price_1GuxxSBwl4TwghDgsuUB0RGd",
      }

Step 4. Redirect to the Stripe Checkout using the session Id

Fetch your Stripe publishable API key from Stripe Dashboard > Developers > API Keys. It will look something like pk_test_KT4KxozC6O8d3krb3FEjbBp00eruf93Bh.

At the top of the CheckoutButton.js file, Import loadStripe from @stripe/stripe-js

import { loadStripe } from '@stripe/stripe-js';

In order to setup the stripePromise you need to call the loadStripe function using your publishable key:

const stripePromise = loadStripe('pk_test_KT4KxozC6O8d3krb3FEjbBp00eruf93Bh');

Within the main body of the redirectToCheckout function, await the stripePromise, fetch the sessionId and call Stripe's redirectToCheckout function using the sessionId:

const session = await fetchSession()
const sessionId = session.id
const stripe = await stripePromise
stripe.redirectToCheckout({ sessionId })

Your CheckoutButton.js component should now look like:

import React from "react"
import { API } from "aws-amplify"
import { loadStripe } from "@stripe/stripe-js"

const stripePromise = loadStripe("pk_test_KT4KxozC6O8d3krb3FEjbBp00eruf93Bh")

const CheckoutButton = () => {
  const redirectToCheckout = async () => {
    const fetchSession = async () => {
      const apiName = "stripeAPI"
      const apiEndpoint = "/checkout"
      const body = {
        quantity: 1,
        client_reference_id: "UniqueString",
        priceId: "price_1GuxxSBwl4TwghDgsuUB0RGd",
      }
      const session = await API.post(apiName, apiEndpoint, { body })
      return session
    }

    const session = await fetchSession()
    const sessionId = session.id
    const stripe = await stripePromise
    stripe.redirectToCheckout({ sessionId })
  }

  return <button onClick={redirectToCheckout}>Continue to payment</button>
}

export default CheckoutButton

Now import the CheckoutButton into a page within your site. When your customer clicks Continue to payment they will be taken to the Stripe Checkout page:

In the next post, you'll implement the Stripe webhook to receive confirmation when the payment has been completed.

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

Beez Fedia — Fri, 19 Jun 2020 17:20:42 +0000

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 like sk_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 click Save.

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.