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😌

OurPass Checkout Demo

Inorder to have access to the NPM documentation click below

NPM documentation

Working with OurPass CDN Inline

This works well for Vue.js code bases

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

clientInfo parameters

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
email	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

Method parameters

Options	Type	Required	Description
onClose	function	true	Javascript function that should be called if the customer closes the payment window
onSuccess	function	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')
    }
  }