はじめに

Firebase 公式ドキュメント Firebase による支払い処理 を試した際のメモ。

参考:

TL;DR

  • 公式ドキュメントを試した
  • Firebase 側のデータがどうなるか、外観カスタマイズはどうするか、などについて簡単に確認した内容をメモ
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. チュートリアル
      1. Stripe アカウント作成
      2. Firebase プロジェクト作成
      3. Blaze プランにアップグレード
      4. Authentication 設定
      5. Firestore 設定
    2. サンプルコード設定
      1. ダウンロード
      2. Firebase プロジェクトとの紐付け
      3. Stripe キー設定
      4. パッケージインストール
      5. デプロイ
    3. 動作確認
      1. ユーザー登録
      2. カード登録
      3. 支払い
    4. 実装内容/構成 などについて
  5. まとめ
  6. その他・メモ
    1. サブスクリプションについて
    2. 決済システムの導入にあたって
  7. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
11
12
13
$ sw_vers
ProductName:	macOS
ProductVersion:	11.1
BuildVersion:	20C69

$ node -v
v12.7.0

$ npm -v
6.14.5

$ firebase --version
9.1.0

詳細

チュートリアル

基本的に Firebase による支払い処理 の手順で進める。

試した際のリポジトリ: 17number/stripe-payment-with-firebase-example

Stripe アカウント作成

https://dashboard.stripe.com/register でアカウントを作成。

作成後、ダッシュボードでテスト用の API キー/シークレット をメモしておく。

Firebase プロジェクト作成

Firebase Console でプロジェクト作成。

Blaze プランにアップグレード

サイドバーの一番下から Blaze プランにアップグレードする。Google アカウントでクレカ未設定だと設定画面が挟まるかも。

予算アラートは必要に応じて設定する。(試してみる程度なら不要、本番環境だとあった方が良さげ)

Authentication 設定

Authentication で Google, メールを有効化

Firestore 設定

Firestore を有効化。ロケーションは asia-northeast1(東京) を選択した(※1)

※1:
正直テストだしどこでも良いとは思う。なお、asia-northeast1(東京) はマルチリージョンロケーションではないので注意。

その他のロケーションにはリージョンロケーションを、料金はロケーション別料金を参照。

サンプルコード設定

ダウンロード

サンプルリポジトリからソースコードをダウンロードする。(DL用 直リンク)

自分はダウンロード後 src 配下に展開した。(が、正直プロジェクトルートで良さげ)

Firebase プロジェクトとの紐付け

展開したディレクトリに移動して、firebase use --add コマンドを実行し、プロジェクトを選択

1
2
3
4
$ cd src
$ firebase use --add
? Which project do you want to add? my-stripe-payment-test-xxxx
? What alias do you want to use for this project? (e.g. staging) development

Stripe キー設定

パブリックキー

src/public/javascript/app.js 内の Stripe の公開鍵を設定

1
2
-const STRIPE_PUBLISHABLE_KEY = '<YOUR STRIPE PUBLISHABLE KEY>';
+const STRIPE_PUBLISHABLE_KEY = 'pk_test_xxxx';
シークレットキー

Stripe のシークレットキーを firebase functions:config:set コマンドで設定

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

パッケージインストール

Functions(Cloud Functions for Firebase) で利用するパッケージをインストール

1
$ cd functions && npm i && cd -

デプロイ

参考:

firebase deploy コマンドでデプロイ。

1
2
3
4
5
6
7
8
9
$ firebase deploy
=== Deploying to 'my-stripe-payment-test-xxxx'...

i  deploying firestore, functions, hosting
...
✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/my-stripe-payment-test-xxxx/overview
Hosting URL: https://my-stripe-payment-test-xxxx.web.app

デプロイ成功したら Hosting URL が表示される、基本的には https://<project id>.web.app のはず。

動作確認

Hosting URL にアクセスすると、公式デモサイト と同じ画面が表示される。

ユーザー登録

適当にメールアドレスでユーザー登録する。なお、デモアプリではメールアドレス確認は行われない。

登録後はこんな画面に遷移する。

Authentication にユーザー登録されており、

Firestore にもデータが作成される。

カード登録

カード登録を実行する。

Firestore に payment_methods サブコレクションが作られる。

支払い

支払いを実行すると、画面下の Payments 部分に履歴が表示される。

Firestore には payments サブコレクションが作られる。

実装内容/構成 などについて

なぐり書きなので間違っているかもしれないことに留意。

まとめ

  • 公式ドキュメントを試した
  • Firebase 側のデータがどうなるか、外観カスタマイズはどうするか、などについて簡単に確認した内容をメモ

その他・メモ

サブスクリプションについて

公式 Extension を試した。

参考:

決済システムの導入にあたって

以下も合わせて要確認

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list