魔法とストライプで有料メンバーシップサイトを構築:PT.クイックスタート

資源
🍰 ライブデモhere !

テストカード番号:4242 4242 4242 4242 !

有効なランダムMM/YY(例えば09/23)だけでなく、ランダムなCVC(例えば123)を選択します.

🧁 完全なコードベースを見つけることができますhere .

有料会員サイト
あなたが最終的にあなたの苦労して得られたデジタル仕事の人々を充電する方法を探しているなら、それ以上見て!このチュートリアルでは、どのようにユーザーが生涯のアクセスのために支払うことができる有料会員アプリケーションを作成する方法を学びますプレミアムコンテンツに渡す💸.
私たちはStripe 支払いプロセッサとしてMagic 我々の認証の解決策としてReact フロントエンドフレームワークとしてExpress サーバーフレームワークNode.js , and Heroku 我々のアプリを展開するには!

必要条件

あなたが反応してメンバーシップ・アプリを造ることに慣れていないならば、ExpressBuild Magic auth into your React + Express app . このガイドから多くのコードを再利用します😏.

また、チェックアウト無料Stripe’s guide on the Custom payment flow . 我々は、我々のストライプ支払いページを実行するのを助けるために、このガイドでリストされるステップに続きました🎊.

ファイル構造
ルートディレクトリにはサーバー側のファイルが含まれます.クライアントフォルダーにはフロントエンドファイルがあります.

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

クイックスタート命令

マジックセットアップ
魔法のアカウントを作成しREACT_APP_MAGIC_PUBLISHABLE_KEY and MAGIC_SECRET_KEY あなたからMagic Dashboard .

ストライプセットアップ
ストライプアカウントを作成しREACT_APP_STRIPE_PK_KEY and STRIPE_SECRET_KEY あなたからStripe Dashboard .

エクスプレスサーバーの起動

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

cd magic-stripe

mv .env.example .env

置換MAGIC_SECRET_KEY and 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 ストライプノードライブラリを含むサーバに必要な依存関係を引っ張ってくれました.

クライアントの起動
(新しいターミナルセッションで)

cd client

mv .env.example .env

置換REACT_APP_MAGIC_PUBLISHABLE_KEY and 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 我々は、ストライプを含む我々のクライアントのために必要とする依存関係を引き抜くのを助けました.JSとストライプ要素のUIライブラリ(両方のPCIに準拠するために必要な、彼らはカードの詳細を直接ストライプに移動し、サーバーに到達することを保証します.)

魔法反応物語
このチュートリアルはMagic React Storybook 🤩. マジックUIコンポーネントを独自のカスタムCSSに交換したい場合は@magiclabs/ui and framer-motion あなたからclient/package.json 依存性.

次は何
今までのすべてを設定した今、反応クライアント側を構築を開始しましょう!クリックして続行します.