OurPass Inline - Vue.js
This is the Vue.js library for implementing Ourpass checkout button on your platform. This library would help you integrate the button into your system in no time😌
Inorder to have access to the NPM documentation click below
Working with OurPass CDN Inline
NPM Installation
Run the command below in your terminal to install the component
npm i ourpass-checkout-vue-button-v1
Importing the vue-pass-checkout-button-v1
Go to your component, import the component and add it in your component as suggested below
import passBtn from "ourpass-checkout-vue-button-v1"
export default {
name: 'App',
components: {
passBtn
},
}
Feeding the component with the write data
You are to feed the component with the checkout data using the data prop, and the function you want to run when the checkout is canceled on onClose and the function to run when the checkout is completed on onSuccess
<passBtn
:data="clientInfo"
:onClose="onClose"
:onSuccess="onSuccess"
/>
In clientInfo
here you have various variables that is needed to complete checkout
Options
Type
Required
Description
src
string
true
Product image
amount
string
true
Product amount
url
string
true
Merchant's website address
name
string
true
Product name
string
false
Email of OurPass user
qty
string
true
Quantity of products being bought
description
string
true
Product description
items
array
true
List of items
onClose
function
true
Javascript function that should be called if the customer closes the payment window
onSuccess
function
true
Javascript function that should be called if the payment is successful
key
string
true
Your Seller OurPass secret key
You can add the method for closed checkout on onClose()
and for completed checkout onSuccess()
methods: {
onClose(){
alert('It Closed oo')
},
onSuccess: ()=>{
alert('It Succeeded oo')
}
}
Last updated
Was this helpful?