NextJS & CommerceJS : Coding the checkout flow with Test Gateway (more than a basic tutorial)

I code the entire checkout process with Next.js ( React ) & Commerce.js & also use react hook form . This will be a fast paced video with explanations on how things work as well some advanced UI elements like loading indicators , button disabling etc... to make things close to real world applications.

Starter Code : https://github.com/abhik-b/online-store-with-nextjs/tree/episode-4
react hook form useForm() : https://react-hook-form.com/api/useform/
Test Gateway : https://commercejs.com/docs/guides/test-gateway
Stripe Payment : https://commercejs.com/docs/guides/stripe-integration
Razorpay : https://commercejs.com/docs/guides/razorpay-integration
Capture Checkout Format : https://commercejs.com/docs/api/#capture-order
Final Code : https://github.com/abhik-b/online-store-with-nextjs/tree/checkout-flow

Timestamps :
0:00 Introduction
0:19 Starter Code Explanation
7:43 Understanding the Checkout flow
9:28 Creating the checkout page
10:00 Multi Step Form mechanics
17:07 Generating checkout token
21:58 Installing react-hook-form
22:18 loader till we generate token
23:19 Demo till Now
23:38 Address Params
24:59 Form Input Component
26:48 Address Form
30:56 Country Select Component
32:42 1st useEffect for countries
37:18 Form Select Component
38:50 2nd useEffect for subdivisions
45:05 3rd useEffect for shipping options
51:25 demo till now
52:40 form validations
58:16 loading for address form
1:04:29 why I disable form submit button
1:06:27 disabling the form submit button
1:09:50 Payment Component
1:13:18 Payment Form
1:15:41 Capturing checkout
1:20:51 Loading & Error Handling
1:26:16 Confirming the payment
1:29:37 Refresh Cart
1:30:55 Final Demo & Conclusion

NextJS & Tests Playlist : https://www.youtube.com/playlist?list=PLCBa_75YlKx6cQc0JNZz-L1ZGFb-pOIyL

Javascript Projects PlayList: https://www.youtube.com/watch?v=WK_SW5JO6rY&list=PLCBa_75YlKx7FxLVCYqXjrL9m5GCU-Cfp

React PlayList: https://www.youtube.com/watch?v=EgMjKqMo5r8&list=PLCBa_75YlKx7gTEyag1f2IikyrUmAtv48

Django PlayList : https://www.youtube.com/watch?v=e5SDQ30zqjk&list=PLCBa_75YlKx7UOvtJBAu1tuDTpThc6Zmf


*PLEASE NOTE:
PLEASE TAKE DECISIONS BASED ON YOUR RESEARCH AND WHAT YOU FEEL RIGHT
I'M JUST SHARING MY OWN RESEARCH THROUGH THIS VIDEO !!
AND THIS VIDEO DOES NOT FORCE YOU ANYTHING BY ANY MEANS!! *