LoginSignup
10
4

More than 3 years have passed since last update.

Firebase extensionsのSend Invoices using Stripeを使って請求を送る

Posted at

こんにちは。もぐめっとです。

スクリーンショット 2020-08-10 22.19.16.png

最近熱いですが、家にずっと引きこもってるのであまり夏を感じれてないです。

Firebase ExtensionsのRun Subscription Payments with Stripeを使ってサブスク課金をコードを書かずに実装する
に引き続きもうひとつのstripe製extensionを試してみたので使うまでのはうとぅ〜を残しておきます。

目標

firestoreのレコード追加でstripeの請求を作れるようにします。

Send Invoices using Stripeのセットアップ

Send Invoices using Stripeからextensionのインストールを行います。

リソースの確認をして次へ
image.png

料金プランをblazeプランにアップグレードしてないと「次へ」ボタンが表示されませんが、アップグレードしたら次へ進めます。アップグレードしていない方はアップグレードしましょう
image.png

アクセス権を確認して次へ
image.png

次から書くことがたくさんあります。
image.png

Cloud Functions deployment location
Cloud Functionsをどこで動かすかの設定。
日本人なんで、とりあえずTokyoにしておきましょう。

Invoices collection
請求を作る時のfirestoreの保存先コレクションを入力します。

Stripe API key with restricted access
stripeのAPI keyを入力します。
stripeのダッシュボードを開いて、「開発者」→「APIキー」で表示される画面で、「制限付きのキーを作成」を押下します。
スクリーンショット 2020-08-10 14.30.03.png

キーの名前を適当につけて、
image.png
Customersの書き込み権限と、
image.png
Invoicesの書き込み権限を与えます。
image.png
設定したら下部にある「キーを作成」を押下
image.png
無事作れたので、rk_xxx_XXX...というトークンをコピーして、はっつけましょう。

ちなみにこの制限付きキーでやらないと、後ほどドキュメントを作った時にCloud Functionsさんに

Error: 😞[Error] Error when making a request to the Stripe API:
    at Object.stripeError (/workspace/lib/logs.js:37:19)
    at exports.sendInvoice.functions.handler.firestore.document.onCreate (/workspace/lib/index.js:153:14)
    at process._tickCallback (internal/process/next_tick.js:68:7) { Error: This API call cannot be made with a publishable API key. Please use a secret API key. You can find a list of your API keys at https://dashboard.stripe.com/account/apikeys.

といったエラーで怒られます。ちゃんとしたAPI keyを付与してあげましょう。

Days until payment is due
請求の支払期限の設定。この設定した日数が終了すると請求は自動的に終了する。とりあえずデフォルトの7日に。

Stripe webhook secret (Optional)
Stripeからfirestoreのドキュメントを更新できるようにする用のwebhookのsecret key。使用する場合はインストールしてから行うので一旦空白に。

上記を埋めたら「拡張機能をインストール」を押下。

インストールが始まります。
image.png

webhookの設定

firebase extensionsのSend Invoices using Stripe画面を開きます。
「この拡張機能の動作」にある、「(Optional) Update Cloud Firestore documents with invoice statuses」の項目でのURLをコピーしておきます。
スクリーンショット 2020-08-10 21.18.22.png

stripeのwebhook画面で、「エンドポイントを追加」ボタンを押下します
image.png

エンドポイントURLに先程コピーしたURLを貼り付けして、invoiceのイベントをすべて選択します。
スクリーンショット 2020-08-10 21.31.19.png

webhookの設定が完了したら、署名シークレットをコピーします。

image.png

拡張機能を再構成します。「拡張機能を再構成」を押下します。
image.png

Stripe webhook secretに先程コピーした署名シークレットを貼り付けて、「保存」を押下します。
スクリーンショット 2020-08-10 21.35.16.png

これにより、請求のステータスが支払い済みになったり、お金回収できなかったと変わったりしたら連動してfirestoreのinvoicesの値も変わることができます。

請求のテスト

Extensionsの構成も終了したら早速firestoreでレコードを作って請求テストをしてみましょう!
「コレクションを開始」を押下して、先程Invoices collectionで設定したコレクション名でコレクションを作成します。
image.png

下記データでドキュメントを生成してみます。ワンナイト人狼を2個購入したとしましょう。
image.png

[宣伝]ちなみにワンナイト人狼にはMONSTER verというものがあり、通常のワンナイト人狼とはひと味違ったプレイが可能です!アプリにもモンスターverの役職はあるのでやってみてね!

ドキュメント作成後、しばらくした後にstripeのダッシュボードのインボイス画面を開いてみましょう。
成功していれば先程の請求が無事連携されて表示されているはずです。
image.png

ちなみにfirestoreの方にも自動的にstripeから値が追加されています。
image.png

ここから請求書のステータスを更新してみます。
再びstripeのインボイス画面で先程の請求を開いてみます。「...」から「インボイスのステータスを変更」を押下します。
image.png

回収不能にして、「ステータスの更新」を押下します。
image.png

firestoreもuncollectibleになりました。
image.png

ちなみに支払い済みイベントは手動でやる場合、ライフサイクルからはずれるためかcloud functionsで下記の警告が出て無視されます。ちゃんとユーザが支払えば更新されるはず。多分。(未確認)

🙈 Ignoring event "invoice.paid" because it because it isn't a relevant part of the invoice lifecycle 

(ログが可愛い)

まとめ

請求をおくるのもコードを書かずに実装できてしまいました!

webで売買を行うときは積極的につかってみたいですね。

[最後に宣伝]

こんなサービス作ってるのでよかったら使ってみてください!

ワンナイト人狼 for mobile

気軽に投稿できるフォトコンサイト - Camecon

連絡先を交換しなくてもグルチャができる - Offcha

10
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
4