vue-korapay v1.1.2

Korapay for Vue 2.x

This helps you accept payment using Korapay’s Collection Modal in your Vue app

Install

Vue

Install the npm package:

npm install --save vue-korapay
# OR
yarn add vue-korapay

Add the Vue plugin in your main.js and pass your public key:

import Vue from 'vue'
import Korapay from 'vue-korapay'

Vue.use(Korapay, {publicKey: 'pk_test_**********************'})

Nuxt

Install the npm package:

npm install --save vue-korapay
# OR
yarn add vue-korapay

Create a korapay.js file in your plugins folder and add the Vue plugin:

// plugins/korapay.js

import Vue from 'vue'
import Korapay from 'vue-korapay'

Vue.use(Korapay, {publicKey: 'pk_test_**********************'})

Go to your nuxt.config.js and add it to your plugin section

/*
** Plugins to load before mounting the App
** https://nuxtjs.org/guide/plugins
*/
............
plugins: [{src: '~/plugins/korapay', ssr: false},],
...........

Usage

1. Using the method

Korapay can be called using $payWithKorapay() method, see example below

<template>
  <form action="#" @submit.prevent="makePayment">
    <div class="btn-wrapper">
      <input type="number" v-model.number="amount" />
      <button type="submit">Make Payment</button>
    </div>
  </form>
</template>

<script>
export default {
  data () {
    return {
      amount: 200
    }
  },

  methods: {
    makePayment () {
      this.$payWithKorapay({
        amount: this.amount,
        customer: {
          name: 'John Doe',
          email: 'john@doe.com'
        },
        onClose: function () {
          // Handle when modal is closed
        },
        onSuccess: function (data) {
          // Handle when payment is successful
          console.log(data)
        },
        onFailed: function (data) {
          // Handle when payment fails
          console.log(data)
        }
      })
    }
  }
}
</script>

2. Using the component

Korapay can be called using the Korapay component eg: <Korapay>Pay Now</Korapay>. See example below

<template>
  <Korapay :amount="3000" korapayClass="btn-kpy --full-green" customer_name="John Doe" customer_email="john@doe.com" @onClose="paymentClosed" @onSuccess="paymentSuccessful" @onFailed="paymentFailed">
    Make Payment
  </Korapay>
</template>

<script>
export default {
  methods: {
    makePayment () {
      paymentClosed() {
        console.log('Payment Closed')
      },
      paymentSuccessful(data) {
        console.log('Payment Succeesful', data)
      },
      paymentFailed(data) {
        console.log('Payment Failed', data)
      }
    }
  }
}
</script>

$payWithKorapay() Method

Parameters

Events

Korapay Component

Parameters

Events

The Korapay component accepts a slot so you can pass in more data into your button apart from plain text

Please checkout Korapay Documentation for more explanation

License

Follow on Twitter @mrflamez_

MIT © kingflamez