vue-vellapay

Vella Checkout Component for Vue 3.x

A Vue Plugin for Vella Checkout.

Demo

Install

NPM

npm install vue vue-vellapay --save

Javascript via CDN

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

Usage

Via NPM

my-compnent.vue sample

<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 "vue-vellapay";
export default {
  components: {
    vellapay,
  },
  data() {
    return {
      vellakey: "vk_XXXXXXXXXXXXXXXXXXXXXXXXXXXX", //paystack public key
      email: "[e-mail]", // 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

const app = Vue.createApp({
  components: { VellaPay: VellaPay.default },
  setup() {
    const vellakey = Vue.ref("[e-mail]");
    const email = Vue.ref("[e-mail]");
    const name = Vue.ref("Tade Ogidan");
    const amount = Vue.ref(100.0);
    const merchant_id = Vue.ref("your vella tag");
    const currency = Vue.ref("NGN");
    let reference = Vue.ref("your reference");
    let callback = (response) => {
      console.log("this is a callback", { response });
    };
    let close = () => {
      console.log("payment closed");
    };
    return {
      reference: reference,
      callback: callback,
      close: close,
      vellakey: vellakey.value,
      email: email.value,
      amount: amount.value,
      name: name.value,
      merchant_id: merchant_id.value,
      currency: currency.value,
    };
  },
});

app.mount("#app");

Usage Example via CDN

Support

If you're having trouble with Vella checkout integration, please reach out to us at [e-mail] 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 file for details