This is part of a much larger feature of implementing an ecommerce shop and then managing orders for each garden in both Users and Admin. This is the last part of our checkout section after delivery, here a user will put in their payment details and complete their order. Later, we will link to Stripe, a library for processing payments but for now we will just create a simple form.
Checkout the Figma wireframes so you can see exactly what you are building. If you have any questions after reading the ticket please make sure you have asked for questions before starting!!
We need to make the payment component and files in the following folder. Create these new files.
Payment.jsx will render when the user hits the route garden/:id/shop/payment
You will be getting passed the delivery details and the cart state through props which you will need to send to the orders db once the user clicks confirm payment. If the Delivery and Cart has not been completed, hardcode these objects to send to the db.
Inside Payment.jsx
[ ] Render your Payment form.
Your form components will live elsewhere in Subcomponents rather than views.
[ ] Create a Payment Form --> for now we actually wont send creditcard details anywhere but you will test that your button is sending the right information to orders.
[ ] Style it as closely as possible to the Figma using CSS Tailwind, If the delivery page is simultaneously being made you will need to communicate with that team as you will share styling classnames.
[ ] In ProduceHelper.js use the consume.js function (an API generator) to create a post request where you send the order and delivery information to the DB.
[ ] Make sure the checkout button calls your post API and then renders a sanitised message eg "Thank you for submitting your order, we will be in touch soon!"
[ ] Test, Run npm run lint, follow peer review process and PR flowchart
This is part of a much larger feature of implementing an ecommerce shop and then managing orders for each garden in both Users and Admin. This is the last part of our checkout section after delivery, here a user will put in their payment details and complete their order. Later, we will link to Stripe, a library for processing payments but for now we will just create a simple form.
Checkout the Figma wireframes so you can see exactly what you are building. If you have any questions after reading the ticket please make sure you have asked for questions before starting!!
We need to make the payment component and files in the following folder. Create these new files.
Payment.jsx will render when the user hits the route garden/:id/shop/payment
You will be getting passed the delivery details and the cart state through props which you will need to send to the orders db once the user clicks confirm payment. If the Delivery and Cart has not been completed, hardcode these objects to send to the db.
Inside Payment.jsx
Your form components will live elsewhere in Subcomponents rather than views.