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

Published: 26 November 2021
on channel: abhik b

1,226

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-sto...
react hook form useForm() : https://react-hook-form.com/api/useform/
Test Gateway : https://commercejs.com/docs/guides/te...
Stripe Payment : https://commercejs.com/docs/guides/st...
Razorpay : https://commercejs.com/docs/guides/ra...
Capture Checkout Format : https://commercejs.com/docs/api/#capt...
Final Code : https://github.com/abhik-b/online-sto...

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 :    • NextJS & Tests (react testing library & jest)

Javascript Projects PlayList:    • Javascript Project - Attendance Meter

React PlayList:    • React Navbar  -CREATING A RESPONSIVE NAVBAR

Django PlayList :    • MAKING FRIENDS DJANGO: HOW TO HAVE A FACEB...

*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!! *

On this page of the site you can watch the video online NextJS & CommerceJS : Coding the checkout flow with Test Gateway (more than a basic tutorial) with a duration of hours minute second in good quality, which was uploaded by the user abhik b 26 November 2021, share the link with friends and acquaintances, this video has already been watched 1,226 times on youtube and it was liked by 12 viewers. Enjoy your viewing!

16,297,463

257K