# vue2-vellapay

> Vue Vella Component for Vue 2.x.

Latest version **1.0.1** (published 2023-07-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue2-vellapay
pnpm add vue2-vellapay
yarn add vue2-vellapay
bun add vue2-vellapay
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2023-07-31 |
| First published | 2023-07-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 113 |
| Unpacked size | 10.9 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Gabriel Ajenifuja |
| Maintainers | vellafinance |
| Keywords | VellaPay, Vue, Vuejs, Vue 2, Payment Gateway |

## Links

- npm: https://www.npmjs.com/package/vue2-vellapay
- Repository: https://github.com/Vella-Finance/vue2-vellapay
- Homepage: https://github.com/Vella-Finance/vue2-vellapay#readme
- Issues: https://github.com/Vella-Finance/vue2-vellapay/issues
- npm.io page: https://npm.io/package/vue2-vellapay

## Dependencies (113)

- [ms](https://npm.io/package/ms.md) ^2.1.2
- [ajv](https://npm.io/package/ajv.md) ^6.12.6
- [has](https://npm.io/package/has.md) ^1.0.3
- [glob](https://npm.io/package/glob.md) ^7.2.3
- [levn](https://npm.io/package/levn.md) ^0.4.1
- [once](https://npm.io/package/once.md) ^1.4.0
- [acorn](https://npm.io/package/acorn.md) ^7.4.1
- [chalk](https://npm.io/package/chalk.md) ^4.1.2
- [debug](https://npm.io/package/debug.md) ^4.3.4
- [isexe](https://npm.io/package/isexe.md) ^2.0.0
- [table](https://npm.io/package/table.md) ^6.8.1
- [which](https://npm.io/package/which.md) ^2.0.2
- [espree](https://npm.io/package/espree.md) ^7.3.1
- [ignore](https://npm.io/package/ignore.md) ^4.0.6
- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [nanoid](https://npm.io/package/nanoid.md) ^3.3.6
- [rimraf](https://npm.io/package/rimraf.md) ^3.0.2
- [rollup](https://npm.io/package/rollup.md) ^2.77.3
- [semver](https://npm.io/package/semver.md) ^7.5.3
- [uri-js](https://npm.io/package/uri-js.md) ^4.4.1
- [wrappy](https://npm.io/package/wrappy.md) ^1.0.2
- [csstype](https://npm.io/package/csstype.md) ^3.1.2
- [deep-is](https://npm.io/package/deep-is.md) ^0.1.4
- [esbuild](https://npm.io/package/esbuild.md) ^0.14.54
- [esprima](https://npm.io/package/esprima.md) ^4.0.1
- [esquery](https://npm.io/package/esquery.md) ^1.5.0
- [esutils](https://npm.io/package/esutils.md) ^2.0.3
- [flatted](https://npm.io/package/flatted.md) ^3.2.7
- [globals](https://npm.io/package/globals.md) ^13.20.0
- [is-glob](https://npm.io/package/is-glob.md) ^4.0.3
- [js-yaml](https://npm.io/package/js-yaml.md) ^3.14.1
- [postcss](https://npm.io/package/postcss.md) ^8.4.24
- [regexpp](https://npm.io/package/regexpp.md) ^3.2.0
- [resolve](https://npm.io/package/resolve.md) ^1.22.2
- [yallist](https://npm.io/package/yallist.md) ^4.0.0
- [argparse](https://npm.io/package/argparse.md) ^1.0.10
- [doctrine](https://npm.io/package/doctrine.md) ^3.0.0
- [enquirer](https://npm.io/package/enquirer.md) ^2.3.6
- [fsevents](https://npm.io/package/fsevents.md) ^2.3.2
- [has-flag](https://npm.io/package/has-flag.md) ^4.0.0
- [inflight](https://npm.io/package/inflight.md) ^1.0.6
- [inherits](https://npm.io/package/inherits.md) ^2.0.4
- [path-key](https://npm.io/package/path-key.md) ^3.1.1
- [progress](https://npm.io/package/progress.md) ^2.0.3
- [punycode](https://npm.io/package/punycode.md) ^2.3.0
- [acorn-jsx](https://npm.io/package/acorn-jsx.md) ^5.3.2
- [callsites](https://npm.io/package/callsites.md) ^3.1.0
- [esrecurse](https://npm.io/package/esrecurse.md) ^4.3.0
- [js-tokens](https://npm.io/package/js-tokens.md) ^4.0.0
- [lru-cache](https://npm.io/package/lru-cache.md) ^6.0.0
- [minimatch](https://npm.io/package/minimatch.md) ^3.1.2
- [type-fest](https://npm.io/package/type-fest.md) ^0.20.2
- [ansi-regex](https://npm.io/package/ansi-regex.md) ^5.0.1
- [color-name](https://npm.io/package/color-name.md) ^1.1.4
- [concat-map](https://npm.io/package/concat-map.md) ^0.0.1
- [estraverse](https://npm.io/package/estraverse.md) ^4.3.0
- [flat-cache](https://npm.io/package/flat-cache.md) ^3.0.4
- [is-extglob](https://npm.io/package/is-extglob.md) ^2.1.1
- [optionator](https://npm.io/package/optionator.md) ^0.9.3
- [path-parse](https://npm.io/package/path-parse.md) ^1.0.7
- [picocolors](https://npm.io/package/picocolors.md) ^1.0.0
- [prelude-ls](https://npm.io/package/prelude-ls.md) ^1.2.1
- [slice-ansi](https://npm.io/package/slice-ansi.md) ^4.0.0
- [sprintf-js](https://npm.io/package/sprintf-js.md) ^1.0.3
- [strip-ansi](https://npm.io/package/strip-ansi.md) ^6.0.1
- [text-table](https://npm.io/package/text-table.md) ^0.2.0
- [type-check](https://npm.io/package/type-check.md) ^0.4.0
- [ansi-colors](https://npm.io/package/ansi-colors.md) ^4.1.3
- [ansi-styles](https://npm.io/package/ansi-styles.md) ^4.3.0
- [cross-spawn](https://npm.io/package/cross-spawn.md) ^7.0.3
- [emoji-regex](https://npm.io/package/emoji-regex.md) ^8.0.0
- [fs.realpath](https://npm.io/package/fs.realpath.md) ^1.0.0
- [glob-parent](https://npm.io/package/glob-parent.md) ^5.1.2
- [imurmurhash](https://npm.io/package/imurmurhash.md) ^0.1.4
- [astral-regex](https://npm.io/package/astral-regex.md) ^2.0.0
- [eslint-scope](https://npm.io/package/eslint-scope.md) ^5.1.1
- [eslint-utils](https://npm.io/package/eslint-utils.md) ^2.1.0
- [import-fresh](https://npm.io/package/import-fresh.md) ^3.3.0
- [lodash.merge](https://npm.io/package/lodash.merge.md) ^4.6.2
- [magic-string](https://npm.io/package/magic-string.md) ^0.30.0
- [resolve-from](https://npm.io/package/resolve-from.md) ^4.0.0
- [string-width](https://npm.io/package/string-width.md) ^4.2.3
- [color-convert](https://npm.io/package/color-convert.md) ^2.0.1
- [estree-walker](https://npm.io/package/estree-walker.md) ^2.0.2
- [function-bind](https://npm.io/package/function-bind.md) ^1.1.1
- [parent-module](https://npm.io/package/parent-module.md) ^1.0.1
- [shebang-regex](https://npm.io/package/shebang-regex.md) ^3.0.0
- [source-map-js](https://npm.io/package/source-map-js.md) ^1.0.2
- [balanced-match](https://npm.io/package/balanced-match.md) ^1.0.2
- [is-core-module](https://npm.io/package/is-core-module.md) ^2.12.1
- [supports-color](https://npm.io/package/supports-color.md) ^7.2.0
- [brace-expansion](https://npm.io/package/brace-expansion.md) ^1.1.11
- [fast-deep-equal](https://npm.io/package/fast-deep-equal.md) ^3.1.3
- [lodash.truncate](https://npm.io/package/lodash.truncate.md) ^4.4.2
- [natural-compare](https://npm.io/package/natural-compare.md) ^1.4.0
- [shebang-command](https://npm.io/package/shebang-command.md) ^2.0.0
- [fast-levenshtein](https://npm.io/package/fast-levenshtein.md) ^2.0.6
- [file-entry-cache](https://npm.io/package/file-entry-cache.md) ^6.0.1
- [path-is-absolute](https://npm.io/package/path-is-absolute.md) ^1.0.1
- [v8-compile-cache](https://npm.io/package/v8-compile-cache.md) ^2.3.0
- [vue-eslint-parser](https://npm.io/package/vue-eslint-parser.md) ^7.11.0
- [@vitejs/plugin-vue2](https://npm.io/package/@vitejs/plugin-vue2.md) ^2.2.0
- [eslint-visitor-keys](https://npm.io/package/eslint-visitor-keys.md) ^2.1.0
- [require-from-string](https://npm.io/package/require-from-string.md) ^2.0.2
- [strip-json-comments](https://npm.io/package/strip-json-comments.md) ^3.1.1
- [esbuild-darwin-arm64](https://npm.io/package/esbuild-darwin-arm64.md) ^0.14.54
- [escape-string-regexp](https://npm.io/package/escape-string-regexp.md) ^4.0.0
- [json-schema-traverse](https://npm.io/package/json-schema-traverse.md) ^0.4.1
- [is-fullwidth-code-point](https://npm.io/package/is-fullwidth-code-point.md) ^3.0.0
- [functional-red-black-tree](https://npm.io/package/functional-red-black-tree.md) ^1.0.1
- [fast-json-stable-stringify](https://npm.io/package/fast-json-stable-stringify.md) ^2.1.0
- [supports-preserve-symlinks-flag](https://npm.io/package/supports-preserve-symlinks-flag.md) ^1.0.0
- [json-stable-stringify-without-jsonify](https://npm.io/package/json-stable-stringify-without-jsonify.md) ^1.0.1

## Recent versions

- 1.0.1 (latest) — 2023-07-31
- 1.0.0 — 2023-07-31

## README

# Vella Checkout Component for Vue 2.x

A Vue2 Plugin for Vella Checkout.

### Demo

![Demo Image](https://res.cloudinary.com/dm9otxkot/image/upload/v1690814075/vue-vellapay_ps0zxr.png?raw=true "Demo Image")

### Install

#### NPM

```
npm install vue vue2-vellapay --save
```

#### Javascript via CDN

```javascript 1.8
<!-- Vue -->
  <script src="https://unpkg.com/vue@next"></script>
<!-- Vue-VellaPay -->
<script src="https://unpkg.com/vue2-vellapay/dist/vellapay.umd.min.js"></script>
```

### Usage

#### Via NPM



```vue
<template>
  <vellapay
    :amount="amount"
    :name="name"
    :email="email"
    :vellakey="vellakey"
    :merchant_id="merchant_id"
    :reference="reference"
    :callback="callback"
    :close="close"
    :embed="false"
  >
    Pay Now
  </vellapay>
</template>

<script type="text/javascript">
import vellapay from "vue2-vellapay";
export default {
  components: {
    vellapay,
  },
  data() {
    return {
      vellakey: "vk_XXXXXXXXXXXXXXXXXXXXXXXXXXXX", //paystack public key
      email: "example@mail.com", // string - customer email
      amount: 100.0, //float - amount to pay
      name: "Tade Ogidan", // string - customer name
      currency: "NGN", // supported currency NGN USD,GBP,USDT,USDC
      merchant_id: "Japhoo", // string - merchant id
      reference: "sdfdfd", // string - your transaction reference
      custom_meta: {}, // custom meta data,
      source: "", // domain or location name widget is being called from
    };
  },
  computed: {
    reference() {
      let text = "";
      let possible =
        "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

      for (let i = 0; i < 10; i++)
        text += possible.charAt(Math.floor(Math.random() * possible.length));

      return text;
    },
  },
  methods: {
    callback: function (response) {
      console.log(response);
    },
    close: function () {
      console.log("Payment closed");
    },
  },
};
</script>
```

#### via CDN

```javascript
new Vue({
  el: "#app",
  components: {
    "vella-pay": VellaPay.default,
  },
  data() {
    return {
      vellakey: "vk_XXXXXXXXXXXXXXXXXXXXXXXXXXXX",
      email: "foobar@example.com",
      name: "Tade Ogidan",
      amount: 100.0,
      merchant_id: "your vella tag",
      currency: "NGN",
      reference: "unique payment reference",
    };
  },
  methods: {
    callback(response) {
      console.log("this is a callback", { response });
    },
    close() {
      console.log("payment closed");
    },
  },
});
```

[Usage Example via CDN](examples/index.html)

## Support

If you're having trouble with Vella checkout integration, please reach out to us at hello@vella.finance or come chat with us using on https://app.vella.finance. We're happy to help you out with your integration to Vella.

## License

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE) file for details

---
_Source: https://npm.io/package/vue2-vellapay · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._