Develop an E-Commerce App Using Java, Spring Boot and Vue.js/

...

/

Stripe Checkout Front-end Integration

Stripe Checkout Front-end Integration

Learn how to integrate stripe checkout at the front-end in this lesson.

We'll cover the following...

In the last lesson, we passed two URLs for success and failure. First, we’ll create those two pages.

We’ll create a payment directory in the views directory, and then create two components.

Press + to interact
<template>
  <div class="alert alert-success" role="alert">
    Payment successful
  </div>
</template>
<script>
export default {
    name:'PaymentSuccess',
    props:["baseURL"],
    data() {
    return {
      token: null,
      sessionId:null
    }
  },
  methods:{
  },
  mounted(){
  }
}
</script>

Similarly, we’ll create a failed component.

Press + to interact
<template>
    <div class="alert alert-danger" role="alert">
        Payment failed
    </div>
</template>
<script>
export default {
    name:'FailedPayment',
    mounted(){
    }
}
</script>

Router changes

We’ll register these two components in router/index.js.

Press + to interact
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import AddCategory from "../views/Category/AddCategory";
import Category from "../views/Category/Category";
import EditCategory from "../views/Category/EditCategory";
import AddProduct from "../views/Product/AddProduct";
import Product from "../views/Product/Product";
import EditProduct from "../views/Product/EditProduct";
import ShowDetails from "../views/Product/ShowDetails";
import Signup from "../views/Signup";
import Signin from "../views/Signin";
import WishList from "../views/Product/WishList";
import Cart from "../views/cart/Cart";
import Success from "../views/payment/Success";
import Failed from "../views/payment/Failed";
const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/admin/category/add",
    name: "AddCategory",
    component: AddCategory,
  },
  {
    path: "/admin/category",
    name: "AdminCategory",
    component: Category,
  },
  {
    path: "/admin/category/:id",
    name: "EditCategory",
    component: EditCategory,
  },
  {
    path: "/admin/product/add",
    name: "AddProduct",
    component: AddProduct,
  },
  {
    path: "/admin/product",
    name: "AdminProduct",
    component: Product
  },
  {
    path: "/admin/product/:id",
    name: "EditProduct",
    component: EditProduct,
  },
  {
    path : '/product/show/:id',
    name : 'ShowDetails',
    component: ShowDetails
  },
  {
    path: '/signup',
    name: 'Signup',
    component: Signup
  },
  {
    path: '/signin',
    name: 'Signin',
    component: Signin
  },
  {
    path: '/wishlist',
    name: 'WishList',
    component: WishList
  },
  {
    path : '/cart',
    name : 'Cart',
    component : Cart
  },
  {
    path: '/payment/success',
    name: 'PaymentSuccess',
    component:Success
  },
  {
    path: '/payment/failed',
    name: 'FailedPayment',
    component:Failed
  },
];
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
export default router

We’ll implement the ...