Users who are signed in and have added items to the cart will be able to start the checkout process. The Checkout
form will collect customer details, delivery address information, and credit card information:
In the Checkout
component, we will initialize the checkoutDetails
object in state before collecting the details from the form.
mern-marketplace/client/cart/Checkout.js
:
state = { checkoutDetails: {customer_name: '', customer_email:'', delivery_address: {street: '', city: '', state: '', zipcode: '', country:''}}, }
After the component mounts, we will prepopulate the customer details based on the current user's details and also add the current cart items to checkoutDetails
.
mern-marketplace/client/cart/Checkout.js
:
componentDidMount = () => { let user = auth.isAuthenticated().user let checkoutDetails = this.state.checkoutDetails checkoutDetails.products = cart.getCart() checkoutDetails...