Firebase で支払いを処理する

Firebase の機能と Stripe を使用すると、独自のサーバー インフラストラクチャを構築することなく、ウェブアプリで支払いを処理できます。このガイドでは、オープンソースの cloud-functions-stripe-sample.web.app サンプルアプリをカスタマイズして、デプロイする方法について説明します。

最初に、Firebase コンソールでプロジェクトを作成し、Stripe アカウントを設定します。

実装の概要

  1. Stripe アカウントを設定します。
  2. Firebase コンソールでプロジェクトを作成します。
  3. プロジェクトを 従量課金制の Blaze 料金プランにアップグレードします。
  4. firebase use --add でプロジェクトを使用するように Firebase CLI を構成します。
  5. Firestrip サンプルアプリのソースコードを取得します。プロジェクトに適切な情報を構成し、アプリに合わせてコードをカスタマイズします。
  6. アプリをデプロイしたら、Firebase コンソールでユーザーとトランザクションのリストを探します。

サンプルアプリの設定とデプロイ

  1. ソースコードを取得します。
  2. 認証プロバイダの設定で Google とメールによるログインを有効にします。
  3. Cloud Firestore を有効にします。
  4. Firebase CLI をまだインストールしていない場合はインストールし、firebase login を使用してログインします。
  5. firebase use --add でプロジェクトを使用するようにこのサンプルを構成します。
  6. cd functions; npm install; cd - を実行して依存関係をローカルにインストールします。

  7. Stripe API Secret Key を Cloud Functions 環境構成に追加します。

    firebase functions:config:set stripe.secret=<YOUR STRIPE SECRET KEY>

  8. /public/javascript/app.js で Stripe の公開可能な鍵を設定します。

    const STRIPE_PUBLISHABLE_KEY=<YOUR STRIPE PUBLISHABLE KEY>;

  9. firebase deploy を使用してプロジェクトをデプロイします。このコマンドは以下を行います。

    1. public ディレクトリ内のすべてのファイルを Hosting に送信して、ウェブサイトを利用可能にします。
    2. functions ディレクトリのコードを Cloud Functions for Firebase に送信します。
    3. firestore.rules で構成されているように、Cloud Firestore データベースにセキュリティ ルールを設定します。指定されたルールで、支払いと支払い方法の読み取り / 書き込みのみがユーザーに許可されます。

サンプルアプリのテスト

支払いアプリの URL（your-firebase-project-id.web.app）にアクセスし、次のことを確認します。

  • Google またはメールを使用してログインできる。
  • 新しい Stripe テストカードを追加して、カード選択要素でカードを表示できる。
  • カードを選択して請求できる。
  • ログアウトできる。

比較については、cloud-functions-stripe-sample.web.app をご覧ください。

ユーザーに簡単なプロセスを提供するため、支払いページの外観をカスタマイズしたり、既存のアプリにプラグインとして追加したりできます。

処理された支払いの確認

支払いページを設定してデプロイしたら、Firebase コンソールからユーザーのリストを表示して、支払い方法や支払いを確認できます。

  1. Cloud Firestore にアクセスします。
  2. ユーザーのリストを確認します。ユーザーがクレジット カード情報の追加やトランザクションを行った場合は、その内容を各ユーザーのリストで確認します。

本番環境で決済を受け付ける

稼働開始の準備ができたら、テストキーをライブキーに交換する必要があります。これらのキーの詳細については、Stripe のドキュメントをご覧ください。

  1. Stripe Secret の構成を更新します。

    firebase functions:config:set stripe.secret=<YOUR STRIPE LIVE SECRET KEY>

  2. /public/javascript/app.js で公開可能なライブキーを設定します。

  3. 変更を有効にするために、Cloud Functions と Hosting の両方を再デプロイします。firebase deploy。