Pass Inline Checkout for Vue

NPM Installation

Run the command below in your Terminal to Install the component

npm i ourpass-checkout-vue-button-v1

Importing the ourpass-checkout-vue-button-v1

Go to your component and 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="payload"
   :onClose="onClose"
   :onSuccess="onSuccess"
 />

In clientInfo here you have various variables that is needed to complete checkout

• Src:This is the Image of the product you want to buy
• Amount: Product Amount
• Url: this is the Website Url
• Name: Name of product
• Email: email of buyer
• Qty: Quantity of products sold
• Description: Description of product
• Key: Api Key automatically generated for you as a Pass Merchant

Example Payload (Single Item)

  data() {
    return {
      payload: {
        clientInfo: {
          link:'https://staging-pass.ourpass.co/view',
          src: 'https://raw.githubusercontent.com/Cheetah-Speed-Technology/website_dstore/master/Cap-front1.png',
          amount: '10',
          url: 'jumia.com.ng',
          name:'Cap',
          email: '[email protected]',
          qty:'1',
          description:'Great Pass Cap',
          key: 'pass_sec_test_2WEzJfgg4mpbY4XkBaibd9ZnERo6bHBP'
       }
      }
    }
 },

Example Payload (Cart - Multiple Items)

  data() {
    return {
      payload: {
        clientInfo: {
          email: '[email protected]',
          items: [
            {
              src: 'https://raw.githubusercontent.com/Cheetah-Speed-Technology/website_dstore/master/Cap-front1.png',
              amount: '10',
              url: 'jumia.com.ng',
              name:'Cap',
              email: '[email protected]',
              qty:'1',
              description:'Great Pass Cap',
            },
            {
              src: 'https://raw.githubusercontent.com/Cheetah-Speed-Technology/website_dstore/master/Cap-front1.png',
              amount: '10',
              url: 'jumia.com.ng',
              name:'Cap',
              email: '[email protected]',
              qty:'1',
              description:'Great Pass Cap',
            },
          ],
          key: 'pass_sec_test_2WEzJfgg4mpbY4XkBaibd9ZnERo6bHBP'
        }
      }
    }
  }

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')
    }
  }