Resources

🍰 Test the live demo here!

• Test card number: 4242 4242 4242 4242!
• Choose a valid and random MM/YY (e.g. 09/23), as well as a random CVC (e.g. 123).

🧁 The full code base can be found here.

A Paid Membership Site

If you’re looking for a way to finally charge people for your hard-earned digital work, look no further! In this tutorial, you’ll learn how to create a paid membership app where users can pay for a lifetime access pass to your Premium Content 💸.

We'll be using Stripe as our payment processor, Magic as our auth solution, React as our front end framework, Express as our server framework for Node.js, and Heroku to deploy our app!

Prerequisites

1. If you’re unfamiliar with building a membership app with React, Express, and Magic, take a look at Build Magic auth into your React + Express app. We'll be reusing a lot of the code from this guide 😏.
2. Also, feel free to check out Stripe’s guide on the Custom payment flow. We followed the steps listed in this guide to help implement our Stripe payment page 🎊.

File Structure

The root directory will contain the server-side files. The client folder will have all of the frontend files.

├── README.md
├── client
│ ├── .env
│ ├── package.json
│ ├── public
│ │ └── (static files, such as images)
│ ├── src
│ │ ├── App.js
│ │ ├── components
│ │ │ ├── header.js
│ │ │ ├── home.js
│ │ │ ├── layout.js
│ │ │ ├── loading.js
│ │ │ ├── login-form.js
│ │ │ ├── login.js
│ │ │ ├── payment-form.js
│ │ │ ├── payment.js
│ │ │ ├── premium-content.js
│ │ │ ├── profile.js
│ │ │ ├── signup-form.js
│ │ │ ├── signup.js
│ │ ├── index.js
│ │ └── lib
│ │ │ ├── LifetimeAccessRequestStatusContext.js
│ │ │ ├── LifetimeContext.js
│ │ │ ├── UserContext.js
│ │ │ └── magic.js
│ └── yarn.lock
├── .env
├── package.json
├── server.js
└── yarn.lock

Quick Start Instructions

Magic Setup

Create a Magic account and then grab your REACT_APP_MAGIC_PUBLISHABLE_KEY and MAGIC_SECRET_KEY from your Magic Dashboard.

Stripe Setup

Create a Stripe account and then grab your REACT_APP_STRIPE_PK_KEY and STRIPE_SECRET_KEY from your Stripe Dashboard.

Start your Express Server

1. git clone https://github.com/magiclabs/magic-stripe.git
2. cd magic-stripe
3. mv .env.example .env
4. Replace MAGIC_SECRET_KEY and STRIPE_SECRET_KEY with the appropriate values you just copied. Your .env file should look something like this:

   MAGIC_SECRET_KEY=sk_test_XXX
   CLIENT_URL=http://localhost:3000
   STRIPE_SECRET_KEY=sk_test_XXX

1. yarn
2. node server.js

Note: Running yarn helped us pull the dependencies we need for our server, including the Stripe Node library.

Start your React Client

(in a new terminal session)

1. cd client
2. mv .env.example .env
3. Replace REACT_APP_MAGIC_PUBLISHABLE_KEY and REACT_APP_STRIPE_PK_KEY with the appropriate values you just copied. Your .env file should look something like this:

   REACT_APP_MAGIC_PUBLISHABLE_KEY=pk_test_XXX
   REACT_APP_SERVER_URL=http://localhost:8080
   REACT_APP_STRIPE_PK_KEY=pk_test_XXX

1. yarn
2. yarn start

Note: Running yarn helped us pull the dependencies we need for our client, including Stripe.js and the Stripe Elements UI library (both needed to stay PCI compliant; they ensure that card details go directly to Stripe and never reach your server.)

Magic React Storybook

This tutorial was built using Magic React Storybook 🤩. If you wish to swap the Magic UI components out for your own custom CSS, delete @magiclabs/ui and framer-motionfrom your client/package.json dependencies.

What's Next

Now that you've set everything up, let's get started with building the React client side! Click here to continue.