Search⌘ K
AI Features
Home
Courses
Develop an E-Commerce App Using Java, Spring Boot and Vue.js

Stripe Checkout Front-end Integration

Explore how to integrate Stripe Checkout on the frontend of your e-commerce application using Vue.js. This lesson guides you through creating success and failure pages, setting up router components, and implementing the checkout flow to enable seamless payment processing through Stripe. Understand how to initialize Stripe with publishable keys, connect the checkout page from the cart, and prepare your app for payment completion.

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.

C++
<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.

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

Router

...