複雑な支払いフォームをZodとReact Hook Formで実現する

よく見る支払いフォーム ここ最近、支払いフォームを実装する機会があり、その際に割と悩んで勉強になったため自分なりの解決策をシェアしようと思います。 そしてちょうどこちらの記事で同じような要件の実装をされていました。非常に参考になったので掲載させていただきます。 なお今回はこの要件に追加でカード選択の要件が加わったフォームを実装していきます。ぜひ最後までご覧ください。 フォームの要件 支払い方法は大きく分けて以下の2つが存在する ポイント払い クレジットカード払い クレジットカード払いは大きく分けて以下の2つが存在する 登録済みのカードで支払う 新しくカード情報を入力して支払う 登録済みのカードは最大3枚まで表示できる(3枚まで登録できる) 登録済みのカード情報はデータベースから取得し、以下の情報を持つ カードID カード名義人 カード番号の下4桁 有効期限 新規カードで支払う場合は以下の情