作るもの
この本では Stripe の SDK と Firebase を使って、ユーザーが定期課金の決済を行えるウェブサイトを作成する手順を解説します。作成するウェブサイトの仕様は次のようになります。
- ウェブサイトにアクセスしフォームにメールアドレスを入力すると決済用 URL が記載されたメールが送信される
- 決済用 URL を開くとクレジットカード情報入力フォームが表示され、ユーザーは決済を行える
- 決済が完了すると定期課金が開始され、ユーザーへ決済完了メール通知が行われる
スクリーンショット
| 登録ページ | 決済ページ |
|---|---|
この本で得られるもの
- 定期課金決済サービスの作り方
- Firebase Hosting + TypeScript + React + Parcel でフロントエンド、Cloud Functions で API という構成でのウェブアプリケーションの作り方
- 低予算で運用できて開発もしやすいので、色々なアプリに使いやすい構成です。
実践的な内容なので逆に React 自体についてなど、個々の要素技術についての解説はありません。前提知識としては TypeScript, React を使ってアプリケーションを実装したことがある方であれば問題無く読んでいただけると思います。
この本の読み方
ソースコードを示しながらアプリケーションをどのように実装していくかを API → UI と順々に解説していく流れになります。アプリケーションの全ソースコードが本文に登場するわけではありませんのでソースコードを写経しながら読むのではなく、ただ読んでいただいて、本文に登場しない部分のコードを読んだり手元で動かしてみたりする用途でリポジトリをお手元にクローンして適宜参照していただくのが良いかと思います。
ソースコード
完成したアプリケーションのリポジトリはこちらになります。GitHub 上でご覧になるかお手元にクローンして適宜ご参照ください。
使用するもの
使用する技術・ツールは下記の通りです。いずれも開発程度の利用であれば利用料金はかからないと思います。
- Stripe: クレジットカードのフォーム UI と決済 API の提供。
- Firebase Hosting: ウェブサイトのホスト先。
- Cloud Functions for Firebase: ウェブサイトからのリクエストを受ける API の提供。メールの送信や決済実行のトリガーとなる。
- Sendgrid: メールの送信。
- TypeScript: JavaScript へトランスパイルすることのできる静的型付け言語。
- Parcel: JavaScript(TypeScript), CSS, HTML などのトランスパイル・バンドルをを行ってくれるツール。軽量な Webpack みたいなもの。
- React: ウェブ UI 構築のための JavaScript ライブラリ。
- emotion: CSS-in-JS ライブラリ
- Blueprint.js: いい感じの UI コンポーネント揃った React ベースの UI toolkit
前準備
もしお手元でも動作をさせたい場合は Stripe, Firebase, Sendgrid のユーザーアカウントを取得してください。アカウントの取得自体は無料ですが、クレジットカードの登録が必要なものもありますので必要に応じてご登録ください。
また開発には Node.js の v12 および yarn, firebase-tools を利用します。お手元にインストールされていない場合はリポジトリの README.md を参考にインストールをお願いします。
執筆時点(2020年10月)での各ツールの最新バージョンは下記の通りでした。
- Node.js: 12.13.0
- yarn: 1.22.5
- firebase-tools: 8.11.2