TakeShape's API Indexing is not only useful as a fallback when external services go down, but also as a means of reducing overall requests to those services.
In this starter, we will demonstrate how you can use TakeShape to combine what would be multiple Stripe API requests into a single TakeShape API request that doesn't query Stripe directly. In this starter's schema, API Indexing is configured to index Stripe products once every 72 hours, so none of the queries made from the frontend application will hit Stripe's servers.
To learn more about API Indexing, check out our guide on integrating it into your TakeShape projects.
The following is a guide to launch a Next.JS project that uses Auth0 for authentication, Stripe for purchasing subscription products, and TakeShape to store custom user profile information and generate an easy-to-use, user-scoped Stripe GraphQL API.
This is a Next.js project bootstrapped with
create-next-app
.
-
Create an Auth0 account, if you haven't already at auth0.com.
-
Create an Auth0 application by going to the
Applications
page under theApplications
tab on the left.- Choose to create a
Single Page Application
. - Skip the
Quick Start
, and go directly to theSettings
. - Take note of your
domain
, you'll need it later. It typically looks like this:dev-by9w1mxg.us.auth0.com
. - Scroll down, and fill in the following fields:
- Allowed Callback URLs: http://localhost:3000/
- Allowed Logout URLs: http://localhost:3000/
- Allowed Web Origins: http://localhost:3000/
- Allowed Origins (CORS): http://localhost:3000/
- Now go to the
Advanced
section, select theGrants
tab, and verify thatAuthorization Code
,Implicit
andRefresh Token
are all selected. - Scroll down to the very bottom of page and click Save Changes; the application doesn't automatically save itself!
- Choose to create a
-
Create a TakeShape project using the pattern in this repo. This button will deploy the project for you:
-
With your project imported, you should see an Auth0 and a Stripe service on the dashboard.
- Click on the Auth0 service.
- Type in your Auth0
domain
from the earlier step. - Take note of the
audience
from the TakeShape config screen, you'll need it later. - Save the service.
-
Set up your TakeShape API Key for making public queries. You'll need to use this for getting a list of products available to purchase.
- Go to the
Settings
tab, then toAPI Keys
. - Create a new API Key, name it whatever you like,
starter
would be fine. - Give it the
anonymous
role. - Copy the key and save it somewhere. This is the only time you'll see it.
- Go to the
-
Now go back to your Auth0 account where you'll create an API for your application.
- Go to
Applications → APIs
and click Create API. - Set the
identifier
to theaudience
you encountered earlier on the TakeShape Auth0 Service page. - Leave the signing algorithm as
RS256
. - From the Settings tab, scroll down to Access Settings and turn on Allow Offline Access — this will allow your project to generate refresh tokens and then refresh user tokens when they expire.
- Save the API.
- Go to
For the purposes of this starter it's assumed you are using Stripe in Test Mode, and using appropriately scoped API keys. Please do not run the demo on a live account as you may incur unexpected charges from Stripe.
-
Create a Stripe account.
-
Take note of your Stripe API keys.
- Go to Developers → API Keys
- You are going to need your publishable key and your secret key.
-
In TakeShape, set up your Stripe service.
- Select Stripe from the list of services on the
API
tab, in thePatterns & Services
pane. - Enter the Stripe secret key into the Authentication → API Key field.
- Save the service.
- Select Stripe from the list of services on the
-
Create your business model in Stripe.
- Go to Products → Add Product.
- Provide a name, description and image for your product.
- Use the standard pricing pricing model, provide a recurring or one time price, then save the product. Note: this starter supports a single active one time price, and multiple recurring prices per product.
- Do this a few time to add several products. You can experiment with multiple / different pricing options, but please stick to the Standard pricing model.
-
Give your Stripe account a name. This is required for Stripe Checkout.
- Go to Settings → Account Details. In the Stripe UI, click the gear
icon in the upper right. Then in the lower section of the page, "Business Settings," you'll see the
Account details
link. - Enter an
Account name
where indicated. - Save the settings.
- Go to Settings → Account Details. In the Stripe UI, click the gear
icon in the upper right. Then in the lower section of the page, "Business Settings," you'll see the
-
Navigate to your TakeShape project dashboard and select the API tab. Open your schema by selecting Schema and selecting the JSON tab.
-
Take note of your Stripe API keys.
- Go to Developers → API Keys
- You are going to need your publishable key and your secret key.
-
In TakeShape, set up your Stripe service.
- Select Stripe from the list of services on the
API
tab, in thePatterns & Services
pane. - Enter the Stripe secret key into the Authentication → API Key field.
- Save the service.
- Select Stripe from the list of services on the
-
Create your business model in Stripe.
- Go to Products → Add Product.
- Provide a name, description and image for your product.
- Use the standard pricing pricing model, provide a recurring or one time price, then save the product. Note: this starter supports a single active one time price, and multiple recurring prices per product.
- Do this a few time to add several products. You can experiment with multiple / different pricing options, but please stick to the Standard pricing model.
-
Give your Stripe account a name. This is required for Stripe Checkout.
- Go to Settings → Account Details. In the Stripe UI, click the gear
icon in the upper right. Then in the lower section of the page, "Business Settings," you'll see the
Account details
link. - Enter an
Account name
where indicated. - Save the settings.
- Go to Settings → Account Details. In the Stripe UI, click the gear
icon in the upper right. Then in the lower section of the page, "Business Settings," you'll see the
-
Head over to your trusty terminal or tool of choice.
- Clone this repo with
git clone https://github.com/takeshape/takeshape-starter-auth0-stripe.git
. cd
into the folder that the cloning created.- Run
mv .env.local-example .env.local
to rename the environment variables file. - Run
npm install
.
- Clone this repo with
-
Follow the instructions in
.env.local
.- Some of the data you enter will be from Auth0, some will be from your TakeShape project
- You'll use your Stripe API publishable key as well
-
Run
npm run dev
to start the application and open http://localhost:3000 with your browser to play around! -
First, login using a valid Auth0 or third-party account. You can also sign up for a new account.
-
Go to the homepage, select a product and payment terms then add it to your cart.
-
Click the Cart icon in the top nav. Review your cart, then click
Checkout Now
. -
On the Stripe Checkout page, use one of the Stripe test credit card numbers.
4242 4242 4242 4242
is commonly used, and will allow you to complete a successful purchase with no secondary authentication. -
Upon a successful purchase you should be directed back to your dev site, and a snackbar will pop up.
-
Try canceling a subscription from your Purchases page.
-
Play around, update your profile, create more users, more purchases. Try products with multiple prices...
- Due to limitations in the official Stripe Checkout, you will encounter an error if you try to check out with a cart containing items with different subscription periods. For example, if you have a month subscription option for Product A and a year subscription option for Product B, and you have both of those in the cart at the same time, Stripe will throw an error. A future version of this starter may shift to a custom checkout experience to work through this limitation.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!