ハコヅミを作る #74：有料プランの申し込みと解約（Stripe の画面に任せる、受入で見つかった「解約の日時」）
#73 で、Stripe からの知らせを受け取る土台を作りました。今回は、その上に、画面を作りました。有料プランの申し込みと、解約です。
- 何を作ったか
- 申し込む前に、確かめてもらう画面
- お金のところは、Stripe の画面に任せる
- 鍵のない本番では、見せない
- 二重の契約を作らない
- テストでは、Stripe の代役を立てる
- ダッシュボードで決めること
- 受入で見つかった「解約の日時」
- 時計を進めて、期間の終わりを確かめる
- 「たくさん」では、迷う
何を作ったか
流れは、こうです。
- アカウントの画面の「有料プランにする」を押す
- ハコヅミの確認の画面で、料金や解約の決まりを確かめて、「申し込む」を押す
- Stripe の支払いの画面で、カードを入れて申し込む
- ハコヅミに戻ると「お申し込みを受け付けました」。少しして、会員区分が「有料」になる
- 解約やカードの変更は、アカウントの画面の「契約を管理する」から、Stripe の管理の画面で行う
会員区分が「有料」に変わるのは、#73 で作った、Stripe からの知らせを受け取るしくみが届いたときです。今回の画面は、申し込みの入口と出口を作った、とも言えます。
申し込む前に、確かめてもらう画面
「有料プランにする」を押すと、すぐに Stripe へは移りません。先に、ハコヅミの中の確認の画面を出します。
申し込む前の確認の画面（料金は、作るあいだの仮の額）
2022年の特定商取引法の改正で、申し込みの最後の画面に、料金・支払いの時期・解約の決まりなどを出すことになりました。Stripe の支払いの画面は Stripe のものなので、ハコヅミの側で、移る前に出すことにしました。
#72 で決めたことも、ここに書いてあります。有料で増えるのは、画像だけです。無料のプランに戻っても、上限を超えている分は消えません。
料金の額は、設定に書いて画面に出しています。申し込むときには、Stripe に登録した料金の額と比べて、違えば先に進ませません。画面に出した額と違う額で、申し込ませないためです。
お金のところは、Stripe の画面に任せる
「申し込む」を押すと、Stripe の支払いの画面に移ります。
Stripe の支払いの画面（サンドボックス。テストのカード）
カードの番号は、この画面で入れます。ハコヅミには届きません。ハコヅミが Stripe に送るのは、だれの申し込みかを表す、利用者の番号だけです。メールアドレスも、ハコヅミからは送らず、この画面で本人が入れます。
解約とカードの変更も、Stripe の管理の画面に任せました。アカウントの画面の「契約を管理する」から移ります。
有料になったあとのアカウントの画面（架空のデータ）
自分で作れば、画面の見た目はそろいます。でも、カードを扱う画面を自分で作って守り続けるより、Stripe が作って守っている画面に任せるほうが、安全で、70代になっても保守できると考えました。
鍵のない本番では、見せない
#73 の最後に決めたことを、今回の画面で使いました。課金の画面は、Stripe の鍵が入っている環境でだけ出す、という決まりです。
開発環境には、テスト用の鍵を入れました。本番には、まだ入れていません。なので本番では、「有料プランにする」のボタンも出ませんし、確認の画面を直接開いても「ページが見つかりません」になります。
これで、課金の画面を、今日のうちに本番に出せました。本番の見た目は、何も変わっていません。売り始めるときに、本番に鍵を入れれば、画面が出ます。
二重の契約を作らない
もう契約がある人は、申し込めないようにしました。ボタンを出さないだけでなく、画面を通さずに直接送っても、断ります。
ここで1つ、迷ったことがあります。Stripe から「契約ができた」という知らせが届く前の、ほんの少しのあいだです。会員区分はまだ「無料」なので、会員区分だけを見ていると、もう一度申し込めてしまいます。そこで、会員区分ではなく、契約があるかどうかで決めることにしました。
それでも防げないことが、1つ残りました。同じ人が、2つのタブで同時に支払いの画面を開いて、両方で払うと、契約が2つできます。めったに起きないので、起きたら Stripe の画面で返金する、と決めました。
テストでは、Stripe の代役を立てる
ハコヅミの画面のテストは、毎回、本物の Stripe に届かないようにしたい。お金の画面なので、なおさらです。
そこで Claude Code が、テストのあいだだけ動く、Stripe の代役を作りました。手元で動く小さなサーバーで、ハコヅミが使う分だけ、Stripe と同じ形で答えます。テストのときは、ハコヅミの通信を、本物の Stripe ではなく、この代役に向けます。
代役は、受け取った中身を覚えておきます。テストは、それを読んで確かめます。
- 支払いの画面を作るときに、利用者の番号を渡しているか
- 2回目の申し込みで、同じ顧客を使っているか（Stripe の顧客は、1人に1つ）
- 契約がある人の送信で、代役に何も届いていないか
本物の Stripe との通しは、わたしが開発環境で、テストのカードを使って確かめます。
ダッシュボードで決めること
#73 と同じく、Stripe の画面の操作は、わたしが自分でやりました。Claude Code に、1画面ずつ説明してもらいながらです。
1つ目は、払い方です。決めたのは「カードと、Apple Pay・Google Pay だけ」。最初は、ハコヅミの側で指定するつもりでした。でも、ハコヅミが使っている版の Stripe では、支払いの画面を作るときに払い方を指定する項目がなく、ダッシュボードの設定で決める形でした。「決済手段」の設定で、カード・JCB・Apple Pay・Google Pay だけを有効にして、ほかは無効にしました。
2つ目は、契約の管理の画面の設定です。
| できること | 設定 |
|---|---|
| 請求の履歴（領収書）を見る | オン |
| カードを変える | オン |
| 解約する | オン（期間の終わりで解約） |
| メールアドレスや住所を変える | オフ |
| プランを切り替える・数を変える | オフ |
受入で見つかった「解約の日時」
開発環境で、申し込みから順に試しました。テストのカードで申し込むと、会員区分が「有料」に変わり、「次の支払いの日」が出ました。カードの変更も、できました。
次に、解約です。Stripe の管理の画面で解約すると、「契約期間が終了する 2026年11月19日までは引き続きご利用になれます」と出ました。
Stripe の管理の画面で解約する
ところが、ハコヅミに戻ると、アカウントの画面は「次の支払いの日：11月19日」のままでした。終わる日が出ません。
Claude Code が、開発環境のデータベースを見て、原因を見つけました。Stripe からの知らせは、解約のあとに、ちゃんと届いていました。でも、ハコヅミが見ていた「期間の終わりで解約する」という印が、立っていなかったのです。
今の Stripe の管理の画面は、解約すると、その印を立てる代わりに、「解約の日時」という別の欄に、期間の終わりの日時を入れるようになっていました。ハコヅミは、前の形の印しか見ていませんでした。テストも、前の形の知らせで作っていたので、通っていました。
直し方は、こうしました。
- 「解約の日時」も、データベースに残す
- 「解約の日時」か「期間の終わりで解約する」の印か、どちらかがあれば、終わる日を出す
直してから、もう一度解約すると、終わる日が出ました。
解約したあとのアカウントの画面（架空のデータ）
自分で作ったテストの代役は、自分が思っている形の知らせしか返しません。本物と通してはじめて分かることがある、と思いました。
時計を進めて、期間の終わりを確かめる
最後に確かめたいのは、期間の終わりに「無料」に戻ることです。でも、本当に11月19日まで待つわけにはいきません。
Stripe には、テストのあいだだけ時計を進められる仕組みがあります（テストクロック。今の画面では「シミュレーション」という名前でした）。
ただ、テストクロックは、顧客を作るときから付けておくもので、ハコヅミが作った顧客には、あとから付けられません。そこで、テストクロックの中で、顧客と契約をもう1つ作りました。契約のメモに、試す利用者の番号を入れておくと、ハコヅミは、その人の契約として受け取ります。
- テストクロックの中で、顧客と契約を作る → 会員区分が「有料」
- 期間の終わりで解約する → 終わる日が出る
- 時計を、期間の終わりのあとまで進める → 会員区分が「無料」に戻る
3つとも、思ったとおりに動きました。申し込み、カードの変更、解約、期間の終わり。課金の流れを、ひととおり通せました。
「たくさん」では、迷う
受入のあとで、わたしが1つ気になりました。アカウントの画面と使い方に、「有料プランにすると、画像をたくさん登録できます」と書いてあったのです。
どこまで登録できるのか？を迷わないかな？と思った
Claude Code が数を書かなかったのは、上限の数をコードに書かない決まりがあるからでした。数は、データベースの上限の表に持っています。数を文に書くと、上限を変えたときに、文も直す必要が出ます。
でも、上限の表から読んで出せば、数を書いても、直し忘れは起きません。確認の画面は、もともとそうしていました。次の直しで、アカウントの画面と使い方も、そうします。
同じ直しで、トップページの「使い方」のリンクも外すことにしました。使い方のリンクは、どの画面にも、下のほうに出ているからです。
おわりに
- 申し込む前に、料金と解約の決まりを、自分の画面で確かめてもらう
- カードを扱う画面は、作らずに任せる
- まだ売らないものは、鍵がなければ見せない。見せないまま、本番に出せる
- 「有料かどうか」ではなく「契約があるか」で、二重の申し込みを止める
- テストの代役は、自分の思っている形しか返さない。本物と通して、はじめて分かることがある
- 待てない日付は、時計を進めて確かめる
- 数を書かない決まりは、数を見せない理由にはならない。読んで出せばよい
次は、支払いが失敗したときの扱いの予定です。
テスタを募集しています。キャンプに行く方、よければ、触ってみてください。