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

こんにちは。[もぐめっと](https://twitter.com/mogmet)です。

<img width="329" alt="スクリーンショット 2020-08-10 22.19.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/defb4a82-babd-19d9-c59e-8dfb8483b533.png">

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

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

## 目標

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

## Send Invoices using Stripeのセットアップ

[Send Invoices using Stripe](https://firebase.google.com/products/extensions/firestore-stripe-invoices)からextensionのインストールを行います。

リソースの確認をして次へ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/8391130f-be1f-cd2c-57d0-7050de151b23.png)


料金プランをblazeプランにアップグレードしてないと「次へ」ボタンが表示されませんが、アップグレードしたら次へ進めます。アップグレードしていない方はアップグレードしましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/a49dd653-2b78-4720-e4b1-3a71ac213acf.png)

アクセス権を確認して次へ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/4a4d2500-c068-5a89-c156-1d46b9a22974.png)

次から書くことがたくさんあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/450938d2-36d6-01bd-2d26-13040c135cf0.png)


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

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

**Stripe API key with restricted access**
stripeのAPI keyを入力します。
[stripeのダッシュボード](https://dashboard.stripe.com/)を開いて、「開発者」→「APIキー」で表示される画面で、「制限付きのキーを作成」を押下します。
<img width="1007" alt="スクリーンショット 2020-08-10 14.30.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/07688440-c3a4-2057-3fb3-8ebd11dcfab9.png">


キーの名前を適当につけて、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/f78c5fd3-955b-fd4b-ee6c-c21a3553fdae.png)
Customersの書き込み権限と、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/75933d81-271d-f07f-5676-ff5f3afb9ade.png)
Invoicesの書き込み権限を与えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/b9f7bdc7-15e3-54c4-cae5-a8023c901146.png)
設定したら下部にある「キーを作成」を押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/7dd017c4-287e-bf37-c173-17ec4bc7405a.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/b7f2b1ba-7c86-688c-2d57-c1fec0838b6a.png)

## webhookの設定

firebase extensionsのSend Invoices using Stripe画面を開きます。
「この拡張機能の動作」にある、「(Optional) Update Cloud Firestore documents with invoice statuses」の項目でのURLをコピーしておきます。
<img width="641" alt="スクリーンショット 2020-08-10 21.18.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/c853927c-9200-8fd3-0058-369e4e19df44.png">


[stripeのwebhook画面](https://dashboard.stripe.com/webhooks)で、「エンドポイントを追加」ボタンを押下します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/60d72cbf-2cf0-68f1-2942-99f558352e0a.png)

エンドポイントURLに先程コピーしたURLを貼り付けして、invoiceのイベントをすべて選択します。
<img width="604" alt="スクリーンショット 2020-08-10 21.31.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/d9fa0b8d-076f-b973-c6e4-f0488b6ec065.png">

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/62a37a06-bea4-effa-b5de-acad3cc3394f.png)

拡張機能を再構成します。「拡張機能を再構成」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/c829a1ef-b9ff-1f65-5bbf-96b7e76093d1.png)

Stripe webhook secretに先程コピーした署名シークレットを貼り付けて、「保存」を押下します。
<img width="387" alt="スクリーンショット 2020-08-10 21.35.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/a111c1fb-3b96-127f-5241-7a4c0ecb59e8.png">

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

## 請求のテスト

Extensionsの構成も終了したら早速firestoreでレコードを作って請求テストをしてみましょう！
「コレクションを開始」を押下して、先程**Invoices collection**で設定したコレクション名でコレクションを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/15500bd6-3ac3-ec3a-6aac-612e9530d7bd.png)

下記データでドキュメントを生成してみます。ワンナイト人狼を2個購入したとしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/ee9a1a5b-d5d8-be15-f639-65fb45f98e16.png)

[宣伝]ちなみに[ワンナイト人狼にはMONSTER ver](https://amzn.to/2DB3A1q)というものがあり、通常のワンナイト人狼とはひと味違ったプレイが可能です！[アプリにもモンスターverの役職はある](https://werewolf.mogmet.com/)のでやってみてね！

ドキュメント作成後、しばらくした後に[stripeのダッシュボードのインボイス画面](https://dashboard.stripe.com/test/invoices)を開いてみましょう。
成功していれば先程の請求が無事連携されて表示されているはずです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/773bcd9f-ce4b-46f5-3298-a83a8ec52115.png)

ちなみにfirestoreの方にも自動的にstripeから値が追加されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/2ce0f8bd-f7ea-52fc-f196-9e1a1f48368c.png)



ここから請求書のステータスを更新してみます。
再びstripeのインボイス画面で先程の請求を開いてみます。「...」から「インボイスのステータスを変更」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/ee1f9879-20ec-18c2-42a9-1b9f856899c1.png)

回収不能にして、「ステータスの更新」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/a6f785b4-9bd9-d5dc-fd1c-b9ea5fc7adf8.png)

firestoreもuncollectibleになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/59dff927-2cf0-3408-5899-94b5ed868010.png)

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

```
🙈 Ignoring event "invoice.paid" because it because it isn't a relevant part of the invoice lifecycle 
```
（ログが可愛い）

## まとめ

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

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

[最後に宣伝]

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

[ワンナイト人狼 for mobile](https://werewolf.mogmet.com)

[気軽に投稿できるフォトコンサイト - Camecon](https://camecon.me)

[連絡先を交換しなくてもグルチャができる - Offcha](https://offcha.com/)