タグ1つでブログを収益化できる投げ銭サービスを支える技術

はじめに

こちらに今回の開発を通して一番重要だと感じていることを記事にしました。
【個人開発】開発プロセスが何より大事だった ~ タグ1つでブログを収益化できる投げ銭サービス ~

先日 plog というサービスをリリースしました。

YouTube に使い方など載せています。

最近noteやzennなど、有料記事によるブログ収益化サービスが流行っています。
とても良いサービスですが、**プラットフォームに依存した収益ですし、何より手数料が高いな・・・**と思っていました。

そこで、プラットフォームに依存しない有料ブログの収益化サービスを思いつき、先日α版をローンチしました。

plogのシステム設計

全体のざっくりとしたイメージではこのような形になっています。

• ①100円の決済フォームくれ
  いくらのどんな記事のためのフォームが欲しいですよ！とクライアントからサーバへリクエスト

• ②情報を元に100円の決済フォームくれ
  POST /v1/payment_intents stripeのapiを使用し、決済フォームをリクエスト

• ③決済フォームの元を返却
  PaymentIntentsの情報が返却される

• ④ClientSecretを返却
  返却されたpaymentintentから、ClientSecret取得しClientに返却

• ⑤有料記事を購入
  ユーザにクレジットカード情報などを入力してもらい、決済ボタンをおす

• ⑥決済実施
  ユーザが有料記事を購入ボタンをおしたら、stripe.confirmCardPayment(clientSecret,data?,options?) stripe.jsの関数を使用し、Stripeに決済実施リクエスト。

• ⑦Webhookで決済完了したら情報格納
  Stripeのwebhookを使い、決済が正常に完了した場合に、正常に決済した情報や諸々をDBに格納し完了。

といった流れです。

MVPを意識して作ったため、とても簡単な作りになっています。

ここからが主題で、plogではStripeを使用しサービスを運営しています。
Stripeを使うにあたって何点か戸惑った箇所などがあったので、頭の整理も兼ねてまとめていきます。

対象読者

Stripeを使おうとしているけど、Charges Checkout PaymentIntentsどれ使えやいいねん！って思ってる人

Stripeの決済パターン

結果公式のStripe APIを見ればいい話ですが、
docsっていきなり読むにはちょっと重いので全体感がわかるようなイメージとしてまとめます。

まず決済のパターンは大きく分けてこの3つで、用途に適した手段を使えば良いです。

• Charges API
• Stripe Checkout
• Payment Intents API

Charges API

Charges APIは、カード認証の銀行リクエストを処理しない古い支払いAPIです。代わりに、新しいペイメントAPIと統合をお試しください。

PaymentIntentsの前進みたいな立ち位置だったのかな？
まず公式でもこのように言ってるので、使わない方が良さそうです。

簡単に使ってみたところ、ほぼほぼやりたいことはPaymentIntentsで出来るので、chargeを使おうとしているなら、
PaymentIntentsを使っちゃうで良いと思います。
※ 一部まだPaymentIntentsでは対応していなユースケースもあるそうなので、あくまでイメージとして捉えてください。

Stripe Checkout

Stripeが提供しているほぼ形が決まったテンプレートを使用して決済したい場合に使えそうです。
ただ、決済画面はStripe側にリダイレクトされてしまうため、決済時に何か特別に処理をしたいなどは難しそうな印象。

あと、Stripeに必要なデータ以外も入力して欲しい時などは、自分で決済フォームを作った方が楽なので、
PaymentIntentsを使った方が便利そうです。

PaymentIntents API

こんな感じの自分で決済フォームをカスタマイズして作りたい場合は、PaymentIntentsを使うのが良さそうです。

↓私はこちらのdocsをみながら実装するのが一番近道になりました。
https://stripe.com/docs/payments/accept-a-payment?integration=elements

Webhook

後の方に知って、とても使えたのが、Stripeが提供するWebhookです。

決済が完了した時や、決済が失敗した時など、
いろんなトリガーを指定して、実装を組み込むことが出来ます。

plogの場合は、決済が完了した時に、購入者情報などをDBに永続化するようにしています。

最後に

plogもローコードツールの類ですが、
Stripeのように、決済という難易度の高く面倒な箇所をローコードで簡単に導入することが出来るのは、
開発者にとってとてもありがたかったです。

また、こちらに今回の開発を通して一番重要だと感じていることを記事にしました。
【個人開発】開発プロセスが何より大事だった ~ タグ1つでブログを収益化できる投げ銭サービス ~

タグ1つでブログを収益化できる投げ銭サービス　plogでした。
https://plog.cash/