[NextJS]~Checkout画面: Checkout処理の実装~

こんにちは、KOUKIです。

NextJSで画面開発を行なっています。

今回は、Checkout処理の実装を行いましょう。

尚、「React, NextJS and Golang: A Rapid Guide – Advanced」コースを参考にしています。解釈は私が勝手に付けているので、本物をみたい場合は受講をお勧めします!

前回

テンプレートの実装をしました。

事前準備

ファイル

モジュール

package.json

Link Dataの作成

前回、NetJSではURLのパスからコードを取得できることを学習しました。

ここで取得したコードからLink Dataを取得し、画面に反映する処理を実装します。

エンドポイント

constants.tsファイルに、APIへのエンドポイントを記述します。

このエンドポイントは、以前以下の記事で作成しました。

Fetch処理の実装

APIへCodeに紐づくLink Data情報を取得するための処理を実装します。

データの反映

取得したデータを画面に反映させましょう。

ユーザーネームとプロダクト情報を反映させました。

データが存在しないと反映されないので、お気をつけください。

Total Orderの実装

商品の合計値を出す処理を実装します。

まず、APIからquantityを取得する処理を追加します。

次に、商品の数量を変更した時に発火させるchange関数を実装します。

Quantityを変更したら発火させたいので、input要素にonChangeを追加し、change関数をセットしています。

最後に、Total Order関数を実装します。

これで、OKです。

Checkout処理

Checkoutに必要な処理を実装していきます。

フォーム情報の設定

useStateを使って、フォームに入力された情報を保持する処理を実装します。

useStateで作成したsetXXXXをinput項目のonChangeにセットしました。これで、フォームに入力した値を保持することが可能になります。

Submit処理

次に、Submitの処理を実装します。

これで、バックエンド側のAPIにOrder情報を送信できます。

一つだけバグがありました。Quantityを「0」で送信すると400エラーになってしまうのです。

これは、Stripeの以下の処理に原因があります。

どうやら1以上でないと送れないようですね。ここではひとまず先に進みますが、余力があれば修正してみてください。

Strap処理

以前、API側でStripeの処理を実装しました。Stripeはオンラインで利用できる決済サービスです。

このStripeを画面から利用するために「公開可能キー」が必要になります。

今回可能キーは、Stripeにログインすると確認することができます。

このキーを定数として定義します。

さらにStripe JSからSDKを読み込みます。

これで、Stripeクラスが使えるようになります。

適当にフォームに値を入力後、Submitしたら以下の画面に遷移できます。

Checkout後の処理

最後にCheckout後の処理を実装して、完了です。

おわりに

数ヶ月に及ぶアプリ開発は、この記事にて終了になります。

バックエンドからフロントエンドまで一通り学ぶことができたのではないでしょうか。

ぜひ、オリジナルアプリを作ってみてください!

それでは、また!

記事まとめ

参考書籍


ソースコード

ここまで実装したソースコードを下記に記載します。

[code].tsx

Layout.tsx

success.tsx

constants.ts

コメントを残す