五条ハーレムに「混雑時は500円」の課金導線を作ってみた

データベースをSupabaseへ移してサイトが使えるようになったので、次は五条ハーレムに課金機能を付けることにした。

考えたのは、普段は無料で見られるが、同時に見ている人が多いときだけ入場料を求める仕組みだ。混雑しているときに500円を払い、決濟が確認された人は24時間サイトへ入れるようにする。

決濟にはStripeを使った。VercelのMarketplaceからStripe Sandboxを接続し、秘密鍵やWebhookの署名シークレットを環境変数として設定した。カード情報は五条ハーレム側で受け取らず、Stripeの安全な決濟画面で入力してもらう形にした。

仕組みは、単に「支払ったことにする」ボタンではない。サイトからStripe Checkoutを開き、Stripeから送られるWebhookの署名を檢証し、本当に決濟が完了した場合だけデータベースへアクセス権を記録する。利用者のブラウザには推測しにくい識別情報をHttpOnly Cookieとして持たせ、24時間の期限が切れるまで有料案内を出さないようにした。

設定画面には、混雑時の有料誘導をON/OFFする項目、発動する同時閲覧者数、料金を用意した。さらに試験を簡単にするため、「有料導線にする」というボタンも追加した。このボタンを押すと有料誘導が有効になり、発動人数が1人になる。つまり、自分一人でアクセスしても500円の案内を確認できる。

ところが、最初の試験ではONにしたのに普通にサイトが開いてしまった。

調べると、設定自体は本番データベースへ正しく保存されていた。原因は、設定画面へ入るために編集者としてログインしている人を、有料案内の対象外にする処理だった。普段の運用では管理者が締め出されないための正しい処理だが、自分で試験するときにも除外されてしまっていた。

そこで、発動人数を1人にした試験モードでは、編集者本人にも有料案内を表示するよう修正した。通常の混雑運用では、これまでどおり編集者を対象外にしている。

修正後、本番サイトを新しいブラウザで開き、「混雑時入場案内」「500円」「Stripeで支払う」が表示されることを確認した。次にStripe Sandboxのテストカードで決濟した。これは試験用なので実際のお金は動かない。

決濟を終えるとサイトへ戻り、いつもの画面が表示された。さらに再読み込みしても500円の案内は出ず、普通に閲覧できた。これで、Stripe Checkout、Webhook、24時間アクセス権の付与まで一連の流れが動いていることを確認できた。

途中で「自分のゆうちょ銀行から払い、売上を同じゆうちょ銀行で受け取れば収支ゼロではないか」と考えた。しかし本番決濟ではStripeの手数料が引かれるため、同じ口座へ戻ってきても収支はゼロにならない。また、ライブ環境を本物のカードで試験する必要もない。動作確認はSandboxで行うのが正しい。

現在はSandboxでの試験まで完了している。本物のお金を受け取るには、Stripeの本人確認審査が終わり、本番決濟と銀行入金が有効になったことを確認してから、本番用の設定へ切り替える必要がある。

五条ハーレムには、混雑時だけ500円を求め、支払った人へ24時間の入場権を与える仕組みができた。まだ本番販売の前段階だが、少なくとも試験環境では入口から決濟後の再入場まで、実際の流れを通して確認できた。