Build a Paid Membership Site with Magic and Stripe: Pt. 1 - Quickstart
Tags: passwordless, stripe, magic, auth
Published: 2021-03-10 01:01:14

---
title: Build a Paid Membership Site with Magic and Stripe: Pt. 1 - Quickstart
published: true
description: Start monetizing off of your digital content by building a paid membership website!
tags: passwordless, stripe, magic, auth
cover_image: https://i.imgur.com/EElejSN.png
---

# Resources

🍰 Test the live demo [here](https://cryptic-waters-25194.herokuapp.com/)!
- 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](https://github.com/magiclabs/magic-stripe).

# 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](https://stripe.com/) as our payment processor, [Magic](https://magic.link/) as our auth solution, [React](https://reactjs.org/) as our front end framework, [Express](https://expressjs.com/) as our server framework for [Node.js](https://nodejs.org/en/), and [Heroku](https://dashboard.heroku.com/) 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](https://magic.link/posts/magic-react-express). 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](https://stripe.com/docs/payments/integration-builder). 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**](https://dashboard.magic.link). 

## Stripe Setup
Create a Stripe account and then grab your `REACT_APP_STRIPE_PK_KEY` and `STRIPE_SECRET_KEY` from your [**Stripe Dashboard**](https://dashboard.stripe.com/test/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:
   ```txt
   MAGIC_SECRET_KEY=sk_test_XXX
   CLIENT_URL=http://localhost:3000
   STRIPE_SECRET_KEY=sk_test_XXX
   ```
5. `yarn`
6. `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:
   ```txt
   REACT_APP_MAGIC_PUBLISHABLE_KEY=pk_test_XXX
   REACT_APP_SERVER_URL=http://localhost:8080
   REACT_APP_STRIPE_PK_KEY=pk_test_XXX
   ```
4. `yarn`
5. `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**](https://magic-storybook.vercel.app/?path=/story/docs-intro--page) 🤩. If you wish to swap the Magic UI components out for your own custom CSS, delete `@magiclabs/ui` and `framer-motion`from 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**](https://dev.to/magiclabs/build-a-paid-membership-site-with-magic-and-stripe-pt-2-react-client-3j3m) to continue.