1 00:00:03,000 --> 00:00:05,961 Adding a item to the cart was the last feature 2 00:00:05,961 --> 00:00:08,148 I wanted to cover in this example. 3 00:00:08,714 --> 00:00:10,386 Now, you could argue that 4 00:00:10,386 --> 00:00:13,330 our Shop application is not really complete. 5 00:00:13,330 --> 00:00:15,070 For a start, we're missing 6 00:00:15,070 --> 00:00:16,876 the Checkout functionality, 7 00:00:16,876 --> 00:00:19,486 so we cannot actually buy any products. 8 00:00:19,486 --> 00:00:21,694 Also, there's no way for the user 9 00:00:21,694 --> 00:00:24,370 to modify what's in their shopping cart. 10 00:00:25,271 --> 00:00:26,882 For testing we can do that, 11 00:00:26,882 --> 00:00:28,672 by using the Strapi dashboard, 12 00:00:29,231 --> 00:00:32,003 but our users won't have access to that. 13 00:00:32,003 --> 00:00:35,191 The main purpose of building this Shop website 14 00:00:35,191 --> 00:00:37,616 was of course to teach you Next.js. 15 00:00:38,254 --> 00:00:40,167 And this section gave you a chance 16 00:00:40,167 --> 00:00:41,291 to do some practice. 17 00:00:41,847 --> 00:00:43,646 We added API handlers 18 00:00:43,646 --> 00:00:45,874 for GET and POST requests. 19 00:00:46,460 --> 00:00:47,530 We created a new page, 20 00:00:48,030 --> 00:00:50,583 where we're also calling an API route 21 00:00:50,583 --> 00:00:51,756 using "useQuery". 22 00:00:52,326 --> 00:00:53,631 We added another component 23 00:00:54,131 --> 00:00:56,077 where we call "useMutation" 24 00:00:56,077 --> 00:00:57,735 to make a POST request. 25 00:00:58,307 --> 00:00:59,599 Implementing the rest 26 00:00:59,599 --> 00:01:01,690 of the shopping cart functionality 27 00:01:01,690 --> 00:01:04,027 would be just more of the same really. 28 00:01:04,027 --> 00:01:06,056 And I don't want to ask you to do 29 00:01:06,056 --> 00:01:07,040 repetitive work, 30 00:01:07,040 --> 00:01:08,885 that's why we're stopping here 31 00:01:08,885 --> 00:01:09,992 with this example. 32 00:01:09,992 --> 00:01:12,943 But I want to give you at least a quick overview 33 00:01:12,943 --> 00:01:14,235 of what's left to do, 34 00:01:14,235 --> 00:01:17,002 if we wanted our shop to be fully functional. 35 00:01:18,055 --> 00:01:20,420 We probably want to give our users 36 00:01:20,420 --> 00:01:23,480 the ability to remove an item from the cart. 37 00:01:23,480 --> 00:01:25,218 So we could show a button 38 00:01:25,218 --> 00:01:26,470 next to each item, 39 00:01:27,179 --> 00:01:29,736 and clicking that button should trigger 40 00:01:29,736 --> 00:01:32,294 a DELETE request to be sent to the CMS, 41 00:01:32,859 --> 00:01:36,019 with the path that identifies this cart item, 42 00:01:36,019 --> 00:01:38,195 so including its ID at the end. 43 00:01:38,195 --> 00:01:41,776 This would need to be proxied through an API route, 44 00:01:41,776 --> 00:01:44,093 to pass the authentication token. 45 00:01:44,093 --> 00:01:46,691 So we'd need to write a new API route 46 00:01:46,691 --> 00:01:48,867 and call it with "useMutation", 47 00:01:49,718 --> 00:01:51,483 pretty similar to what we did 48 00:01:51,483 --> 00:01:53,369 for adding an item to the cart. 49 00:01:53,929 --> 00:01:56,104 We may also want to let the user 50 00:01:56,104 --> 00:01:57,940 update an item in the cart. 51 00:01:58,507 --> 00:02:00,640 The only thing that can be changed 52 00:02:00,640 --> 00:02:02,208 is really the "Quantity". 53 00:02:02,208 --> 00:02:04,967 So we could make the quantity value editable 54 00:02:05,592 --> 00:02:07,790 and then clicking "Update" would send 55 00:02:07,790 --> 00:02:09,394 another request to the CMS. 56 00:02:09,953 --> 00:02:12,984 This time it would used the "PUT" method, 57 00:02:12,984 --> 00:02:16,237 and the request body should be a JSON object 58 00:02:16,237 --> 00:02:18,750 with the updated cart item values. 59 00:02:18,750 --> 00:02:21,560 Again, this requires a new API handler 60 00:02:21,560 --> 00:02:25,182 and a mutation called when the button is clicked. 61 00:02:25,977 --> 00:02:28,468 Finally, and in a sense most importantly, 62 00:02:28,968 --> 00:02:31,042 we'll want to show a "Checkout" button. 63 00:02:31,542 --> 00:02:33,663 And when the user clicks "Checkout" 64 00:02:33,663 --> 00:02:35,542 we want to show a payment page. 65 00:02:36,103 --> 00:02:39,683 This requires integrating with a payment provider, 66 00:02:39,683 --> 00:02:43,121 to collect and validate the credit card details, 67 00:02:43,121 --> 00:02:44,840 or other payment method. 68 00:02:44,840 --> 00:02:48,063 If the payment was successful we then want to 69 00:02:48,778 --> 00:02:51,315 remove all the items from the cart. 70 00:02:51,815 --> 00:02:53,863 Something we can do by sending 71 00:02:53,863 --> 00:02:55,774 a DELETE request to the CMS. 72 00:02:56,343 --> 00:02:59,357 So implementing the Checkout functionality 73 00:02:59,357 --> 00:03:02,443 first requires choosing a payment provider. 74 00:03:02,443 --> 00:03:05,170 And there are many different companies 75 00:03:05,170 --> 00:03:06,821 providing payment APIs. 76 00:03:07,537 --> 00:03:10,104 Just as an example, I'll show you quickly 77 00:03:10,104 --> 00:03:12,171 how this could work using Stripe. 78 00:03:12,734 --> 00:03:16,423 Stripe offers both a "Pre-built Checkout page", 79 00:03:16,423 --> 00:03:18,543 or a "Custom payment flow". 80 00:03:18,543 --> 00:03:22,468 The simplest option is to use their Checkout page. 81 00:03:23,126 --> 00:03:25,732 So in this case we would need to install 82 00:03:25,732 --> 00:03:28,207 the "stripe" library into our project. 83 00:03:28,772 --> 00:03:31,009 And then in our website we can 84 00:03:31,009 --> 00:03:32,277 redirect the user 85 00:03:32,277 --> 00:03:34,961 to a Checkout page hosted by Stripe. 86 00:03:35,610 --> 00:03:37,521 The way this works is that 87 00:03:37,521 --> 00:03:40,606 we first need to send a request to Stripe. 88 00:03:40,606 --> 00:03:44,500 This is a POST request to "/create-checkout-session", 89 00:03:44,500 --> 00:03:48,540 where we pass the details of the items to be purchased. 90 00:03:48,540 --> 00:03:51,406 So there are basically the same details 91 00:03:51,406 --> 00:03:53,389 we have for our cart items: 92 00:03:53,389 --> 00:03:56,475 a product name, its price, and a quantity. 93 00:03:57,415 --> 00:03:59,842 We pass them to the Stripe API, 94 00:03:59,842 --> 00:04:03,520 and Stripe return the URL of the Checkout page. 95 00:04:04,098 --> 00:04:06,679 At that point we can simply redirect 96 00:04:06,679 --> 00:04:08,184 the user to that URL, 97 00:04:08,184 --> 00:04:10,334 and after the payment is taken 98 00:04:10,334 --> 00:04:13,272 Stripe will redirect back to our website, 99 00:04:13,272 --> 00:04:15,637 using the "success_url" we passed 100 00:04:15,637 --> 00:04:18,647 in our "/create-checkout-session" request. 101 00:04:19,505 --> 00:04:22,692 This example is using the Express framework, 102 00:04:22,692 --> 00:04:24,937 but we could easily do the same 103 00:04:24,937 --> 00:04:26,748 in a Next.js API handler. 104 00:04:27,392 --> 00:04:30,151 Anyway, this was just to give you an idea 105 00:04:30,151 --> 00:04:32,506 of how the payment step could work. 106 00:04:32,506 --> 00:04:34,322 In a real world application 107 00:04:34,322 --> 00:04:36,408 you may have other requirements 108 00:04:36,408 --> 00:04:37,955 such as charging taxes, 109 00:04:37,955 --> 00:04:40,242 and that can get a bit complicated 110 00:04:40,242 --> 00:04:42,530 if you're selling internationally. 111 00:04:43,433 --> 00:04:46,931 So, as usual, start from your specific requirements 112 00:04:46,931 --> 00:04:49,949 and select a payment provider based on that. 113 00:04:50,517 --> 00:04:52,309 But, as far as Next.js goes 114 00:04:52,309 --> 00:04:55,363 we have covered all the main Next.js features. 115 00:04:55,363 --> 00:04:57,287 And hopefully you should have 116 00:04:57,287 --> 00:04:59,013 all the knowledge you need 117 00:04:59,013 --> 00:05:02,265 to go on and build your own Next.js applications. 118 00:05:02,265 --> 00:05:05,053 Congratulations for completing the course! 119 00:05:05,053 --> 00:05:06,977 And feel free to get in touch 120 00:05:06,977 --> 00:05:08,703 if you have any questions.