Creating the User Checkout Page

Hi everyone, welcome back to the Laravel E-Commerce Project Tutorial. In this video, we will learn how to create and structure the Checkout Page.

1. Create the Checkout Function in `CartController`

   Open your `CartController` and implement the `checkout` function. This function ensures the user is logged in, retrieves the user'sdefault shipping address, and prepares the data for the view.

   public function checkout()
   {
       if(!Auth::check())
       {
           // Redirect to login if user is not authenticated
           return redirect()->route("login");
       }
       
       // Retrieve the user'sdefault address (where "isdefault" is 1)
       $address = Address::where("user_id",Auth::user()->id)->where("isdefault",1)->first();              
       
       // Pass the address to the checkout view
       return view("checkout",compact("address"));
   }
   

2. Define the Checkout Route

   Add the following route in your `web.php` file:

   Route::get("/checkout",[CartController::class,"checkout"])->name("cart.checkout");
   

3. Create the Checkout View (`checkout.blade.php`)

   Create a new view file named `checkout.blade.php` in the `resources/views` directory. Extend the main application layout (`x-app-layout`)

   <x-app-layout>
   </x-app-layout>
   

   Inside the layout, paste the content structure from your `checkout.html` template. The page structure should conditionally display the default address or a form for entering shipping details.

   Payment Method Section Example

   The checkout form will include a section for selecting the payment mode:

   <div class="checkout-payment-method">
       <h2 class="checkout-title">Payment Method</h2>
       <ul class="payment-method-list">
           <li>
               <div class="single-payment">
                   <div class="payment-radio">
                       <input type="radio" name="mode" id="card" value="card">
                       <label for="card"><span>Credit Card / Debit Card</span></label>
                       <div class="payment-details">
                           <p>Pay with Store Street, Store Town, Store State, Store Postcode, Store Country.</p>
                       </div>
                   </div>
               </div>
           </li>
           <li>
               <div class="single-payment">
                   <div class="payment-radio">
                       <input type="radio" name="mode" id="paypal" value="paypal">
                       <label for="paypal"><span>Paypal</span></label>
                       <div class="payment-details">
                           <p>Pay via PayPal; you can pay with your credit card if you don'thave a PayPal account.</p>
                       </div>
                   </div>
               </div>
           </li>
           <li>
               <div class="single-payment">
                   <div class="payment-radio">
                       <input type="radio" name="mode" id="cod" value="cod" checked>
                       <label for="cod"><span>Cash on Delivery</span></label>
                       <div class="payment-details">
                           <p>Pay with cash upon delivery.</p>
                       </div>
                   </div>
               </div>
           </li>
       </ul>
       <div class="single-form">
           <button type="submit" class="btn btn-primary btn-hover-dark d-block">Place Order</button>
       </div>
   </div>
   

Verification and Next Steps

Navigate to the `/checkout` URL. If you are logged in, you should see the checkout page displaying either your saved default address or the address form, along with the order summary and payment options.