フロントエンドの地獄
cover image

「これは革命」とまでは言わないけれど、Webサービスへのサブスク導入がめちゃめちゃ楽なのでぜひ知って欲しいStripeのFirebase Extensions

※ (9/8追記)こちらを使うと確かに実装は楽ですが、特に法律面についてはしっかり確認してからサービスを提供してください!記事最後に注意事項を記載しておきます

どうもこんにちは。@nabettuです。ちょっとタイトル長いですねw

Firebaseはもう皆さんご存知だと思いますので説明は省力させて頂きますが、そんなFirebaseにFirebase Extensionっていう機能がありまして。

これを1行で説明すると「複数のFirebaes Functionsのデプロイ&そのための設定値等の管理をExtensionsという形でまとめて行える便利機能」です。

発表は去年だったんですが、その際に発表されたExtensionsが

  • 画像の自動リサイズ
  • 文書の翻訳データ自動入力

とかで、まぁ確かに「自分でやるのはちょっと面倒かな?」みたいなレベルだったので魅了が薄かったんですが、最近タイトルにあるStripe連携のExtensionsが追加されました。

都度課金のものとサブスク管理の2つが入りまして、今回はサブスクの方の説明をしていきます。

「Run Subscription Payments with Stripe」ってなにしてくれるの?

Firebase Extensions | Run Subscription Payments with Stripe

Use this extension to create subscriptions for you

Firebase Extensions | Run Subscription Payments with Stripe site iconhttps://firebase.google.com/products/extensions/firestore-stripe-subscriptions?hl=ja
Firebase Extensions | Run Subscription Payments with Stripe site cover image

サブスク管理、作ろうとすると結構面倒なんですよね。Stripe自体の登場でめっちゃやりやすくなった部分は多いんですが、それでも結構ハードル高い。フロントはSDK入れたらまだおりゃっとやれるんですが、サーバー側は結構やることがあって、、、

  • プロダクト登録のStripe上のデータとの自動連携(追加/削除
  • プロダクト上の商品登録のStripe上のデータとの自動連携(追加/削除
  • Firebase上のユーザーに紐づくStripeユーザーの作成
  • 購入時に↑を紐付けるセッション発行
  • 購入後にそのユーザーのStripe上の支払い管理サイトへのリンク発行(PortalLink)
  • Firebase上でユーザー削除時にStripeも登録解除
  • 逆にStripe上でのユーザー削除(サブスク解約)時にFirebase上で登録解除

まさにこんな状態↓

やることが、やることが、多い - 金田一少年の事件簿外伝 犯人たちの事件簿 | アル

金田一少年の事件簿外伝 犯人たちの事件簿のコマ投稿です。この作品のコマは出版社や作者の方に許可を頂い

やることが、やることが、多い - 金田一少年の事件簿外伝 犯人たちの事件簿 | アル site iconhttps://alu.jp/series/金田一少年の事件簿外伝_犯人たちの事件簿/crop/uxivvfocbWTUJ3NAWw2w
やることが、やることが、多い - 金田一少年の事件簿外伝 犯人たちの事件簿 | アル site cover image

個人開発じゃなくったってこれを実装するの結構骨折れますよ。確かに一個一個は大したサイズじゃないんですが。

それがなんとこのExtensionsを使うと、諸々設定してAPI KeyをExtensionsに突っ込むと、ものの数分で実装が完了します!感動の速さ!

「これその辺の野良デベロッパーが作ってたりしないの?信用できる?」と思った方もいるかもしれません。ソースはこちらで公開されていて、作っているのはStripeの中のエンジニアさんです。

stripe/stripe-firebase-extensions

Description: Controls access to paid content by sy

stripe/stripe-firebase-extensions site iconhttps://github.com/stripe/stripe-firebase-extensions/tree/master/firestore-stripe-subscriptions
stripe/stripe-firebase-extensions site cover image

という事でタイトルに戻りますが、

これを使えばWebサービスへのサブスク導入がめちゃめちゃ楽!

今まで有料課金を導入するハードルが高いサービスもあったと思います。私も色々試行錯誤したりしました。サービス規模が小さいと「課金実装するまでもないな〜」「作っても元取れないかもな〜」ということで開発を渋っていました。

例えばFANBOXで加入してくれた人にパスワード配って有料プランを提供していたりします。

有料プランのMVPとしてのpixiv FANBOX - フロントエンドの地獄

はい、こんにちは〜わたなべです。年末いかがお過ごしでしょうか。 開発をしたいのですが、子どもの面倒を

有料プランのMVPとしてのpixiv FANBOX - フロントエンドの地獄 site iconhttps://blog.nabettu.com/entry/fanbox
有料プランのMVPとしてのpixiv FANBOX - フロントエンドの地獄 site cover image

ですが、これはもうほんとにハードルめっちゃ低いので、普通に自前のサービスに「とりあえずいれっか〜」と思える素晴らしいプロダクトです!

もはや「Webサービス以外のブログとかでも導入しちゃってもいいんじゃない?」みたいなレベルになってきましたね。ブレイクスルー起きますよ!(もちろん実装工数の話なのでプロダクトマネージメント的な観点は各々考えてね!)

実装したい方はこちらを参考にするといいですよ

Firebase ExtensionsのRun Subscription Payments with Stripeを使ってサブスク課金をコードを書かずに実装する - Qiita

歳のせいか、おでこのシワが最近隠せません。 話は戻り、最近とうとうfirebase extensio

Firebase ExtensionsのRun Subscription Payments with Stripeを使ってサブスク課金をコードを書かずに実装する - Qiita site iconhttps://qiita.com/mogmet/items/cddc182156028c928ecf
Firebase ExtensionsのRun Subscription Payments with Stripeを使ってサブスク課金をコードを書かずに実装する - Qiita site cover image

@mogmetさんが素晴らしい記事を書かれていますので、これを見ながらやればちょろいです!笑

セキュリティルールの部分だけ注意書きの通りに記事内のものでなく拡張機能自体のを使いましょう。

以上です。これはマジでFirebase最高!という気分を更に高めてくれますね。Stripeも最高〜!

(以下 9/8追記)

※サービス提供時の注意点

とっても楽に実装できるとはいえ、クレジットカード決済で有料サービスを提供する場合にいくつか注意しておくべき点を記述しておきます。

もし不安な点がある場合法務の専門の方に相談しましょう!ここに書いてること以外にもサービスによっては抜けていることがあるかもしれませんので。

クレジットカード番号の扱いについて

基本的に記事のままStripeの決済画面を利用すると問題ないですが、クライアント側で入力欄などを作る場合に番号を保存することは認可を受けている企業以外NGですのでやめてください。そのため、独自実装は避けてStripeの公式ライブラリを利用してください。

Stripeアカウントと紐付けて管理しておけば問題ないはずなので、決済情報についてはサービスで保存しないようにしてください。

↓クレジットカードのセキュリティ:PCI DSSについて

PCIDSSとは|日本カード情報セキュリティ協議会

加盟店やサービスプロバイダにおいて、クレジットカード会員データを安全に取り扱う事を目的として策定され

https://www.jcdsc.org/pci_dss.php
PCIDSSとは|日本カード情報セキュリティ協議会 site cover image

特定商取引法に基づく表示について

Webサービスを有料でユーザーに提供しようとするとき「特定商取引に関する表示」を行う必要があります。

サービス提供者の情報や、解約時の返金がどうなっているか、などをユーザーに開示します。

↓詳しくはこちら等を参照しながら文章を作ってサービス提供時に見れる形にしておいてください。

通信販売|特定商取引法ガイド

通信販売は、隔地者間の取引なので、消費者にとって広告は唯一の情報です。そのため、広告の記載が不十分で

https://www.no-trouble.caa.go.jp/what/mailorder/
通信販売|特定商取引法ガイド site cover image

【テンプレート付】特定商取引法に基づく表記の書き方13のポイント! | TOPCOURT LAW FIRM

はじめに 他社のサイトをみると、webページのフッター部分に「 特定商取引法に基づく表記 」という記

【テンプレート付】特定商取引法に基づく表記の書き方13のポイント! | TOPCOURT LAW FIRM site iconhttps://topcourt-law.com/advertisement/specified_commercial_transaction_template
【テンプレート付】特定商取引法に基づく表記の書き方13のポイント! | TOPCOURT LAW FIRM site cover image

課金に関係なく必要な、基本的なWebサービスの提供においての注意事項

  • メールアドレスなどの個人情報を取り扱う場合には個人情報保護法について準拠してください。また、プライバシーポリシーや利用規約への同意が必要です
  • その他にも、ユーザー投稿を行うコンテンツの場合にはプロバイダ責任制限法に関する実装や、チャットがある場合電気通信事業者の届け出が必要な場合もあります
  • アプリの提供もある場合にはAppleとGoogle各社のルールにも準拠が必要です。例えばアプリの特定コンテンツの提供をこちらのStripeで決済を行うとAppleのリジェクト対象になる可能性があります
  • ソフトウェアだけの提供でない場合には、古物商取引・異性紹介業・職業斡旋業等の許可が必要な場合もあるので、それぞれしっかりと確認しましょう
  • サービス自体の有料機能でなく、個人のコンテンツ販売などの場合には、自サービスの利用が資金移動に繋がらないように注意してサービスを提供しなければなりません。その際ユーザーに諸々登録してもらうことでStripeを使ってコンテンツ販売を行う事も可能です。

(他にもこういうの書いたほうがいいよ!ってのあれば教えて下さい)

みなみさんのこちらの記事もぜひ目を通して頂ければと思います。

決済システムを作るまえにこれだけは知っておこう

近年、StripeとかPayjpとかLine PayとかPayPayとか便利な決済サービスの登場によ

決済システムを作るまえにこれだけは知っておこう site iconhttps://shiodaifuku.io/articles/%E6%B1%BA%E6%B8%88%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%82%92%E4%BD%9C%E3%82%8B%E3%81%BE%E3%81%88%E3%81%AB%E3%81%93%E3%82%8C%E3%81%A0%E3%81%91%E3%81%AF%E7%9F%A5%E3%81%A3%E3%81%A6%E3%81%8A%E3%81%93%E3%81%86
決済システムを作るまえにこれだけは知っておこう site cover image

以上です。実装は楽になったからといって、法律面の確認を無視してサービス提供をすることを無いようにしつつ、皆さん楽しいインターネットを作っていきましょう。