キャンセル料の回収を、自動化する

概要

訪日旅行者向けの体験ツアー・手配を手がける和旅合同会社さまに、レストラン予約で発生するキャンセル料を請求・回収するためのシステムを開発・導入しました。

予約の段階でお客様にカードを登録いただき、キャンセルが発生したときに、担当者が管理画面から登録済みのカードへキャンセル料を請求します。請求が完了すると、お客様へ完了の通知メールが自動で届きます。

最初から完璧を目指すのではなく、まず使える状態で導入し、実際に使っていただく中で見えた課題を次のフェーズで反映しています。

課題

• レストラン予約のキャンセル料は、キャンセルが発生してからお客様に支払いをお願いする形では回収できないリスクが残ります。予約の段階でカードを登録いただき、必要なときに請求できる仕組みが必要でした。
• 金額を扱う操作のため、請求先の取り違えや二重請求といった誤りを防げることが求められました。
• 現場の担当者が特別な説明なしに使えること、そして短期間で使い始められることも重要でした。

解決のアプローチ

1. 01

   予約時にカードを登録、キャンセル時に請求

   カード登録用のリンクをお客様へ送り、登録されたカードへ後から請求する流れにしました。ダッシュボードに「事前準備」と「キャンセル発生時」の手順を載せ、画面を見れば進め方がわかるようにしています。

2. 02

   カード情報を自社で持たない構成

   お客様情報・カード情報・決済履歴は決済サービス（Stripe）側で管理し、システムでは独自のデータベースを持たず、カード番号の全体やセキュリティコードを扱いません。画面に出すのはカードの種類と下4桁までです。

3. 03

   誤った請求を防ぐ確認

   請求の実行前に、請求額・お客様名・カードの種類と下4桁を確認するダイアログを表示します。ボタンの連打や通信の再送で同じ請求が重ならない仕組みを入れ、金額と請求先のカードはサーバー側でも確認しています。

4. 04

   結果がわかる日本語の表示

   残高不足や有効期限切れなど、カード会社から返る失敗の理由を日本語に置き換えて表示します。決済履歴では、成功・失敗・返金などの状態をひと目で確認できます。

5. 05

   テストと本番を取り違えない工夫

   検証用と本番用の環境を分け、いまどちらで動いているかを画面に表示しています。お客様へ送るカード登録用リンクも環境に合わせて切り替わります。変更は検証用の環境で確認してから本番へ反映しています。

6. 06

   まず使える状態で導入し、フェーズを重ねて改善

   最初のバージョンは、お客様の確認とキャンセル料の請求に絞って短期間で形にしました。その後、決済履歴、カード登録用リンクのコピー、完了メールの自動送信、請求前の確認、お客様情報の削除を追加し、現場で運用しやすい形へ育てています。

開発したもの

• カード登録の導線

  予約時に、お客様へカードの登録をお願いするための仕組み。

  • カード登録用リンクをダッシュボードからコピー
  • お客様の手続き完了で、カードとお客様情報を登録
  • 検証用・本番用のリンクを環境に合わせて切り替え

• お客様情報・請求画面

  登録済みのお客様を確認し、キャンセル料を請求するための画面。

  • お客様の一覧・詳細と、保存済みカードの確認
  • カードと金額を指定してキャンセル料を請求
  • 実行前の確認ダイアログと二重請求の防止
  • 失敗した理由の日本語表示
  • お客様情報の削除

• 決済履歴

  このシステムから請求した結果を、後から確認するための画面。

  • 請求の一覧（新しい順）と日付での絞り込み
  • お客様ごとの請求履歴
  • 成功・失敗・返金などの状態表示

• 完了通知メール

  請求が完了したことを、お客様へ自動でお知らせするメール。

  • 請求の完了と同時に自動送信
  • 金額・日付・カードの下4桁・受付番号を記載
  • 海外のお客様に向けた英語の文面

技術スタック

• Next.js
• TypeScript
• Stripe
• Resend
• Vercel
• GitHub Actions