자원

🍰 라이브 데모 테스트here !

테스트 카드 번호: 4242 4242 4242 4242 !

유효하고 임의의 MM/YY(예: 09/23)와 임의의 CVC(예: 123)를 선택하십시오.

🧁 전체 코드 베이스는 here 에서 찾을 수 있습니다.

유료 회원 사이트

힘들게 번 디지털 작업에 대해 마침내 사람들에게 비용을 청구할 방법을 찾고 있다면 더 이상 찾지 마십시오! 이 튜토리얼에서는 사용자가 프리미엄 콘텐츠 💸에 대한 평생 이용권을 지불할 수 있는 유료 멤버십 앱을 만드는 방법을 배웁니다.

Stripe을 지불 프로세서로, Magic을 인증 솔루션으로, React을 프런트 엔드 프레임워크로, Express을 Node.js 및 Heroku에 대한 서버 프레임워크로 사용하여 앱을 배포합니다. !

전제 조건

React, Express, Magic으로 멤버십 앱을 만드는 것이 익숙하지 않다면 Build Magic auth into your React + Express app 을 살펴보세요. 이 가이드 😏의 많은 코드를 재사용할 것입니다.

또한, Stripe’s guide on the Custom payment flow 을 확인하시기 바랍니다. 우리는 Stripe 결제 페이지 🎊 구현을 돕기 위해 이 가이드에 나열된 단계를 따랐습니다.

파일 구조

루트 디렉토리에는 서버 측 파일이 포함됩니다. 클라이언트 폴더에는 모든 프론트엔드 파일이 있습니다.

├── 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

빠른 시작 지침

매직 설정

Magic 계정을 만든 다음 Magic Dashboard 에서 REACT_APP_MAGIC_PUBLISHABLE_KEY 및 MAGIC_SECRET_KEY를 가져옵니다.

스트라이프 설정

Stripe 계정을 만든 다음 Stripe Dashboard 에서 REACT_APP_STRIPE_PK_KEY 및 STRIPE_SECRET_KEY를 가져옵니다.

Express 서버 시작

git clone https://github.com/magiclabs/magic-stripe.git

cd magic-stripe

mv .env.example .env

MAGIC_SECRET_KEY 및 STRIPE_SECRET_KEY를 방금 복사한 적절한 값으로 바꿉니다. .env 파일은 다음과 같아야 합니다.

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

yarn

node server.js

참고: 실행yarn은 스트라이프 노드 라이브러리를 포함하여 서버에 필요한 종속성을 가져오는 데 도움이 되었습니다.

React 클라이언트 시작

(새 터미널 세션에서)

cd client

mv .env.example .env

REACT_APP_MAGIC_PUBLISHABLE_KEY 및 REACT_APP_STRIPE_PK_KEY를 방금 복사한 적절한 값으로 바꿉니다. .env 파일은 다음과 같아야 합니다.

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

yarn

yarn start

참고: 실행yarn은 Stripe.js 및 Stripe Elements UI 라이브러리를 포함하여 클라이언트에 필요한 종속성을 가져오는 데 도움이 되었습니다(둘 다 PCI 규격을 유지하는 데 필요합니다. 카드 세부 정보가 Stripe에 직접 전달되고 서버에 도달하지 않도록 보장합니다. )

매직 리액트 스토리북

이 튜토리얼은 Magic React Storybook 🤩을 사용하여 작성되었습니다. Magic UI 구성 요소를 사용자 정의 CSS로 바꾸려면 @magiclabs/ui 종속성에서 framer-motion 및 client/package.json를 삭제하십시오.

무엇 향후 계획

이제 모든 것을 설정했으므로 React 클라이언트 측 빌드를 시작하겠습니다! 계속하려면 클릭하세요.