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 theAPI ID
. It will look something likeprice_1GuxxSBwl4TwghDgsuUB0RGd
. If the Id you've copied begins withprod_
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.
Top comments (1)
Thank you for the article! DId you managed to build it in CI system (like CircleCI)?