Build a Shopping Cart Using Vue js 3 Composition API Laravel 11 & Stripe Payment Gateway Part 5
In the final part of this tutorial, we will display the cart items, add the ability to increment/decrement the quantity, remove products from the cart, and finally pay the orders using Stripe.
Add the cart component
Inside the cart component, we display all the products added to the cart with options to increment/decrement the quantity, remove products from the cart, and finally pay the orders using Stripe.
<template>
<div class="row my-4">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Image</th>
<th>Name</th>
<th>Quantity</th>
<th>Price</th>
<th>Subtotal</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="item in store.getCartItems" :key="item.id">
<td>{{item.id}}</td>
<td>
<img :src="item.product_image"
class="fluid rounded"
width="60"
height="60"
:alt="item.product_name" />
</td>
<td>
{{item.product_name}}
</td>
<td>
<i
@click="store.incrementQ(item)"
class="bi bi-caret-up"></i>
<span class="mx-2">
{{item.quantity}}
</span>
<i
@click="store.decrementQ(item)"
class="bi bi-caret-down"></i>
</td>
<td>
${{item.product_price}}
</td>
<td>
${{item.product_price * item.quantity}}
</td>
<td>
<i
@click="store.removeFromCart(item)"
class="bi bi-cart-x text-danger"></i>
</td>
</tr>
<tr>
<th colSpan="3" class="text-center">
Total
</th>
<td colSpan="3" class="text-center">
<span class="badge bg-danger rounded-pill">
${{ total }}
</span>
</td>
</tr>
</tbody>
</table>
<div v-if="total > 0" class="d-flex justify-content-center">
<Stripe />
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import Stripe from '../payments/Stripe.vue'
import { computed } from "vue"
import { useCartStore } from "../../store/useCartStore"
//get store
const store = useCartStore()
const total = computed(() => store.cartItems.reduce((acc,item) => acc += item.product_price * item.quantity,0))
</script>
<style>
i{
cursor: pointer;
}
</style>
Add the stripe component
Inside the Stripe component we have a pay button once clicked the user will be redirected to the Stripe checkout form to pay orders.
<template>
<div class="row col-6 mx-auto mt-5">
<button class="btn btn-primary" type="button" @click="fetchPaymentUrl">Pay now</button>
</div>
</template>
<script setup>
import axios from 'axios'
import { useCartStore } from '../../store/useCartStore'
const store = useCartStore()
const fetchPaymentUrl = async() => {
try {
const response = await axios.post('https://darija-coding.com/api/order/pay',
{ cartItems: store.getCartItems, success_url: `http://localhost:5173/#/payment/success`});
window.location.href = response.data.url;
} catch (error) {
console.log(error);
}
}
</script>
<style>
</style>
Add the payment success component
Inside the payment success component, we display a message telling the user that the payment was done successfully.
<template>
<div class="container">
<div class="row my-5">
<div class="col-md-6 mx-auto">
<div class="card">
<div class="card-body p-5">
<h4 class="text-center">
Payment done successfully thank you!
</h4>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
</script>
<style>
</style>