「Firebase Extensions」の「Stripe」によるサブスク機能を試したので、まとめました。

1. Stripe と Run Payments with Stripe

1-1. Stripe

「Stripe」は、オンライン決済を簡単に導入することができるWebプラットフォームです。Webサイトやモバイルアプリなど、様々な場所での決済をサポートしています。

1-2. Run Payments with Stripe

「Run Payments with Stripe」は、FirebaseでStripeを利用するための拡張機能で、「1 回限りの支払い」と「定期的な支払い」を「Firebase Authentication」と同期することで、有料コンテンツへのアクセスを制御します。

2. Stripeの制限付きキーの準備

2-1. StripeのAPIキー

「Stripe」には、次の3種類のAPIキーがあります。さらに「本番環境用」と「テスト環境用」に分かれています。

2-2. Stripeの制限付きキーの準備

「Stripeの制限付きキー」の準備の手順は、次のとおりです。

(1) Stripeでアカウントを作成してログイン。
(2) テスト環境のまま、「開発者 → APIキー → 制限付きキー」の「制限付きのキーを作成」ボタンを押す。

(3) 以下の権限を設定して「キーを作成」をクリック。

(4) 「テストキーを表示」をクリックしてキーをコピー。

3. Firebase Console での準備

「Firebase Console」 での準備の手順は、次のとおりです。

(1) 「Firebase Console」で Firebaseプロジェクトを作成。
(2) 「Firebase Extensions」の「Run Payments with Stripe」で拡張機能をFirebaseプロジェクトにインストール。
指示に従って、各種機能を有効化します。

(3) 拡張機能の設定。

成功すると、拡張機能のインストールが完了します。

(4) 「Firebase Console」の「Extensions → Run Payments with Stripe → この拡張機能の動作」の「Set your Cloud Firestore security rules」の指示に従って、「Firestore console」で「Firestore security rules」を設定。

(5)「Configure Stripe webhooks」の指示に従って、「Stripeダッシュボード」で「Webhook」を設定。

4. Stripeダッシュボードでの準備

「Stripeダッシュボード」での準備の手順は、次のとおりです。

(1) 「公開ビジネス情報」で公開ビジネス情報を設定。
利用規約とプライバシーポリシーのURLは必須です (ダミーURLでも動作しました)。
(2)「カスタマーポータル」でカスタマーポータルを有効化。
(3)「Tax」で税率を設定。
(4) 「商品カタログ」でサブスクの商品を追加。

5. デモプロジェクトの準備

デモプロジェクトの準備の手順は、次のとおりです。

(1) デモプロジェクトのクローン。

$ git clone https://github.com/stripe-samples/firebase-subscription-payments

(2) Firebase CLIのインストール。

$ npm install -g firebase-tools

(3) 「/public/javascript/app.js」の編集。
(3a) Firebaseプロジェクトのコンフィグを自分の環境にあわせて設定。

// Replace with your Firebase project config.
const firebaseConfig = {
  apiKey: 'XXXX',
  authDomain: 'XXXX',
  databaseURL: 'XXXX',
  projectId: 'XXXX',
  storageBucket: 'XXXX',
  messagingSenderId: 'XXXX',
  appId: 'XXXX',
};

Firebaseプロジェクトで、Webアプリを作成して、設定で閲覧できるコンフィグをコピーします。

(3b) Functionsのロケーションを自分の環境にあわせて設定。

// Replace with your cloud functions location
const functionLocation = 'us-east1';

(3c) カスタマーポータルのFunctionsの名前を変更。
バージョンアップで変更あった模様。

    // Call billing portal function
    const functionRef = firebase
      .app()
      .functions(functionLocation)
      .httpsCallable('ext-firestore-stripe-subscriptions-createPortalLink');

↓

    // Call billing portal function
    const functionRef = firebase
      .app()
      .functions(functionLocation)
      .httpsCallable('ext-firestore-stripe-payments-createPortalLink');

6. デモプロジェクトの利用

デモプロジェクトの利用の手順は、次のとおりです。

(1) デモプロジェクトの実行。
プロジェクトIDは、「firebase projects:list」で確認できます。

$ firebase serve --project <プロジェクトID>

i  hosting[test-295905]: Serving hosting files from: public
✔  hosting[test-295905]: Local server: http://localhost:5002

(2) 表示されたローカルURLをブラウザで開き、Googleアカウントでログイン。

(3) 「Subscribe」ボタンを押す。

(4) Stripeで提供されているテスト用のカード番号を入力。

(5) サブスク状態になってることを確認し、カスタマーポータルを開く。

(6) サブスクを解約できることを確認。

【おまけ】 Run Payments with Stripe で追加されるリソース

「Run Payments with Stripe」インストール時にFirebaseプロジェクトに追加されるリソースは、次のとおりです。

・Cloud Functions

・Cloud Secret Manager secrets
以下の設定パラメータは「Cloud Secret Manager」に保存され、「Firebase Extensions」によって管理されます。

・Eventarc Channel

【おまけ】 firebaseの主なコマンド

参考