こんにちは。オルターブース アドベントカレンダー 2022 14日目の担当は古野です。
※(未完成)の意味は最後に...
アドベントカレンダーも半分以上が投稿され、今年はインフォコムグループのアドベントカレンダーも同時進行で投稿されているので読み応え抜群ですね！
最近娘が〇〇ごっこしよー！っと言ってきてお店屋さんごっこすることがあるのですが、いつもレジをピッ！っとする真似をして、適当に金額を言ってお金をもらったり渡したりする仕草をして終わります。
ごっこ遊びとしてはそれだけで全然いいのですが、せっかくなら本物っぽくレジの真似できたらお金についても関心を持ってくれるかなーっと思いネタにもなるので作ってみることにしました。
構成
作ろうとした構成
- ASP.NET Core Razor Pages (レジ)
- Azure Functions (PayPay周り)
- SQL Server (商品マスタ)
作った構成
- HTML/CSS + PHP
- 商品は今回固定
言い訳
C#を長らく使っておらず手の動かなさに絶望したこの頃だったので、時間的に作り切れるか不安になりサクッと作れる構成に... そしてPHPは前に作ったものを流用できるので...
準備するもの
- PayPay for Developersのアカウント
- PHPが動く環境(PHPのビルドインウェブサーバーではPayPayが動きません)
- タブレット(レジ替わり)
- 決済用のスマホ
- 予めテストユーザーでログインする
作っていく！
今回は固定商品で作るのでDBを使いません。 娘がめちゃくちゃ使うようであれば実際に作ろうとした構成で作りこみたいと思います。
1. HTML/CSSで商品選択ページと注文確認ページを作成
簡単に商品を選択するページと選択した商品を確認するページを作成。
一覧
注文
2. PayPayのQRコード決済を表示
PayPay ウェブペイメント ウェブペイメントの資料を参考にQRコード作成まで実装。 前に作ったこちらも参考に
レスポンス値にある決済URLにリダイレクトして以下が表示されればOKです。
表示されたQRコードを用意したスマホで読み取ってお支払い。
決済が完了したら次に作る決済完了ページを表示して数秒後に商品選択ページにリダイレクトします。
....
と、なるはずだったのですが。。。
前に作ったときは決済まで問題なくできていたのですが、現在テストユーザーでの決済が失敗します。。。
※Nodejsでも作って試したのですが、結果は同じでした。
そのため、今回は残念ながら完成できませんでした。。。
サンドボックス環境が使えないのは困るので、この件は原因追及して進展があればご報告したいと思います。(おそらく個人環境の問題)
無念...
アドベントカレンダーはまだまだ続くので明日からもお楽しみください！
