Firebase の機能と Stripe を使用すると、独自のサーバー インフラストラクチャを構築することなく、ウェブアプリで支払いを処理できます。このガイドでは、オープンソースの cloud-functions-stripe-sample.web.app サンプルアプリをカスタマイズして、デプロイする方法について説明します。
最初に、Firebase コンソールでプロジェクトを作成し、Stripe アカウントを設定します。
実装の概要
- Stripe アカウントを設定します。
- Firebase コンソールでプロジェクトを作成します。
- プロジェクトの課金を有効にして Firebase CLI を構成する
firebase use --addでプロジェクトを使用します。 - Firestrip サンプルアプリのソースコードを取得します。プロジェクトに適切な情報を構成し、アプリに合わせてコードをカスタマイズします。
- アプリをデプロイしたら、Firebase コンソールでユーザーとトランザクションのリストを探します。
サンプルアプリの設定とデプロイ
- ソースコードを取得します。
- 認証プロバイダの設定で Google とメールによるログインを有効にします。
- Cloud Firestore を有効にします。
- Firebase CLI をインストールする
firebase loginでログインします。 firebase use --addでプロジェクトを使用するようにこのサンプルを構成します。cd functions; npm install; cd -を実行して依存関係をローカルにインストールします。Stripe API の秘密鍵を追加する Cloud Functions 環境構成に追加します。
firebase functions:config:set stripe.secret=<YOUR STRIPE SECRET KEY>/public/javascript/app.jsで Stripe の公開可能な鍵を設定します。const STRIPE_PUBLISHABLE_KEY=<YOUR STRIPE PUBLISHABLE KEY>;firebase deployを使用してプロジェクトをデプロイします。このコマンドは以下を行います。publicディレクトリ内のすべてのファイルを Hosting に送信して、ウェブサイトを利用できるようにします。functionsディレクトリのコードを Cloud Functions for Firebase に送信します。- 構成した Cloud Firestore データベースにセキュリティ ルールを設定します。
firestore.rules。指定されたルールで、支払いと支払い方法の読み取り / 書き込みのみがユーザーに許可されます。
サンプルアプリのテスト
支払いアプリの URL（your-firebase-project-id.web.app）にアクセスし、次のことを確認します。
- Google またはメールを使用してログインできる。
- 新しい Stripe テストカードを追加して、カード選択要素でカードを表示できる。
- カードを選択して請求できる。
- ログアウトできる。
比較については、cloud-functions-stripe-sample.web.app をご覧ください。
ユーザーに簡単なプロセスを提供するため、支払いページの外観をカスタマイズしたり、既存のアプリにプラグインとして追加したりできます。
処理された支払いの確認
支払いページを設定してデプロイしたら、Firebase コンソールからユーザーのリストを表示して、支払い方法や支払いを確認できます。
- Cloud Firestore にアクセスします。
- ユーザーのリストを確認します。ユーザーがクレジット カード情報の追加やトランザクションを行った場合は、その内容を各ユーザーのリストで確認します。
本番環境で決済を受け付ける
稼働開始の準備ができたら、テストキーをライブキーに交換する必要があります。これらのキーの詳細については、Stripe のドキュメントをご覧ください。
Stripe Secret の構成を更新します。
firebase functions:config:set stripe.secret=<YOUR STRIPE LIVE SECRET KEY>/public/javascript/app.jsで公開可能なライブキーを設定します。変更を有効にするには、Cloud Functions と Hosting の両方を再デプロイします。
firebase deploy。