# ourpass-checkout-vue-button-v1

> ## NPM Installation

Latest version **0.1.5** (published 2022-03-08) · 0 weekly downloads

## Install

```sh
npm install ourpass-checkout-vue-button-v1
pnpm add ourpass-checkout-vue-button-v1
yarn add ourpass-checkout-vue-button-v1
bun add ourpass-checkout-vue-button-v1
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.5 |
| Published | 2022-03-08 |
| First published | 2021-06-24 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=12 |
| Dependencies | 0 |
| Unpacked size | 38 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | parkcrowdy_nigeria_limited |

## Links

- npm: https://www.npmjs.com/package/ourpass-checkout-vue-button-v1
- npm.io page: https://npm.io/package/ourpass-checkout-vue-button-v1

## Recent versions

- 0.1.5 (latest) — 2022-03-08
- 0.1.4 — 2021-11-15
- 0.1.3 — 2021-11-15
- 0.1.2 — 2021-10-22
- 0.1.1 — 2021-10-22
- 0.1.0 — 2021-10-11
- 0.0.9 — 2021-09-09
- 0.0.8 — 2021-09-09
- 0.0.7 — 2021-09-08
- 0.0.6 — 2021-09-03
- 0.0.5 — 2021-09-01
- 0.0.4 — 2021-08-30
- 0.0.3 — 2021-08-27
- 0.0.2 — 2021-07-07
- 0.0.1 — 2021-06-24

## README

# Pass Inline Checkout for Vue

## NPM Installation

Run the command below in your Terminal to Install the component

```bash
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

```js
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**

```html
<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)

```javascript

  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: 'bayoopesanya@gmail.com',
          qty:'1',
          description:'Great Pass Cap',
          key: 'pass_sec_test_2WEzJfgg4mpbY4XkBaibd9ZnERo6bHBP'
       }
      }
    }
 },
```

## Example Payload (Cart - Multiple Items)

```js
  data() {
    return {
      payload: {
        clientInfo: {
          email: 'bayoopesanya@gmail.com',
          items: [
            {
              src: 'https://raw.githubusercontent.com/Cheetah-Speed-Technology/website_dstore/master/Cap-front1.png',
              amount: '10',
              url: 'jumia.com.ng',
              name:'Cap',
              email: 'bayoopesanya@gmail.com',
              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: 'bayoopesanya@gmail.com',
              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()``

```js
  methods: {
    onClose(){
      alert('It Closed oo')
    },

    onSuccess: ()=>{
      alert('It Succeeded oo')
    }
  }
```

---
_Source: https://npm.io/package/ourpass-checkout-vue-button-v1 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._