Vue.js Stripe Payment Gateway Example to Integrate One Time Product Checkout Using vue-stripe in JS

Welcome folks today in this blog post we will be integrating one time product checkout in vue.js using vue-stripe library in browser using javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a new vue.js project using the below command as shown below

npm i -g @vue/cli

Now we can create the vue.js project using the below command

vue create sampleapp

cd sampleapp

Now you need to install the below library using the below command as shown below

npm i vue-stripe

After that you will see the below directory structure of the vue.js app as shown below

Adding Routing in Vue.js

Now we will be adding the router inside the vue.js app

vue add router

And now you need to create a new file called HomeView.vue inside the views folder as shown below

views/HomeView.vue

<template>
    <div class="home">
        <h1>Stripe Payment Gateway Integration in Vue.js</h1>
        <stripe-payment
        ref="checkoutRef"
        mode="payment"
        :pk="publishablekey"
        :line-items="lineItems"
        :success-url="successURL"
        :cancel-url="cancelURL"
        @loading="v => loading = v"
        />
        <button @click="submit">Pay Now</button>
    </div>
</template>

<script>
import {StripeCheckout} from '@vue-stripe/vue-stripe'
export default{
    components:{
        StripeCheckout
    },
    data(){
        this.publishablekey = "##replaceyourpublishablekey##"

        return{
            loading:false,
            lineItems:[
                {
                    price:"##replaceyourpriceid##",
                    quantity:1
                }
            ],
            successURL:"http://localhost:8080/success",
            cancelURL:"http://localhost:8080/error"
        }
    },
    methods:{
        submit(){
            this.$refs.checkoutRef.redirectToCheckout()
        }
    }
}
</script>

<h1>Stripe Payment Gateway Integration in Vue.js</h1>

<stripe-payment

ref="checkoutRef"

mode="payment"

:pk="publishablekey"

:line-items="lineItems"

:success-url="successURL"

:cancel-url="cancelURL"

@loading="v => loading = v"

</div>

</template>

import {StripeCheckout} from '@vue-stripe/vue-stripe'

export default{

components:{

StripeCheckout

data(){

this.publishablekey = "##replaceyourpublishablekey##"

return{

loading:false,

lineItems:[

{

price:"##replaceyourpriceid##",

quantity:1

}

successURL:"http://localhost:8080/success",

cancelURL:"http://localhost:8080/error"

}

methods:{

submit(){

this.$refs.checkoutRef.redirectToCheckout()

}

</script>

Now you need to replace your own price id and also the publishable key from the stripe dashboard. And then we also need to create two views for the success and the error pages.

SuccessView.vue

<template>
    <h1>Payment is Successful</h1>
</template>

<h1>Payment is Successful</h1>

</template>

ErrorView.vue

<template>
    <h1>Payment Failed</h1>
</template>

<h1>Payment Failed</h1>

</template>

Now we need to add these views inside the router file as well. Just go to the router folder and inside the index.js file update the below code

router/index.js

import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import SuccessView from '../views/SuccessView.vue'
import ErrorView from '../views/ErrorView.vue'

const routes = [
  {
    path: '/',
    name: 'homeview',
    component: HomeView
  },
  {
    path: '/success',
    name: 'successview',
    component: SuccessView
  },
  {
    path: '/error',
    name: 'errorview',
    component: ErrorView
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

import { createRouter, createWebHashHistory } from 'vue-router'

import HomeView from '../views/HomeView.vue'

import SuccessView from '../views/SuccessView.vue'

import ErrorView from '../views/ErrorView.vue'

const routes = [

{

path: '/',

component: HomeView

{

path: '/success',

component: SuccessView

{

path: '/error',

component: ErrorView

}

]

const router = createRouter({

history: createWebHashHistory(),

routes

})

export default router

Now start the vue.js app by the below command

vue serve

This will start the vue.js app at port 8080