vue-korapay

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: '[e-mail]'
        },
        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="[e-mail]" @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

Field	Data Type	Description
amount	integer	Required - Amount in naira
customer		Required - JSON object containing customer details
customer.name	string	Required - field in the customer object. Customer name derived from name enquiry.
customer.email	string	Required - field in the customer object. Customer email address
currency	string	Optional - Currency of the charge. Default is NGN (Nigerian Naira)
reference	string	Optional - transaction reference. If you do not provide one, a unique transaction reference would be generated for the transaction.
reference	string	Optional - transaction reference. If you do not provide one, a unique transaction reference would be generated for the transaction.
notification_url	string	Optional - HTTP endpoint to send information to on payment termination, success, or failure. This overrides the webhook URL set on your merchant dashboard for this particular transaction
narration	string	Optional - Information/narration about the transaction
channels	array[string]	Optional - Methods of payment eg. Bank (bank_transfer), card(card). Default is [“bank_transfer”, “card”]
container	string	Optional - Id of HTML element you want the payment gateway to be contained in. Note that this would reset all styling on this element. The payment gateway would be resized to fit the container. If this is not set, the payment gateway fills the available screen size.

Events

Field	Data Type	Description
onClose	[Function]	Optional - function to be called when the payment gateway is closed
onSuccess	[Function]	Optional - function to be called when the payment is completed successfully
onFailed	[Function]	Optional - function to be called when the payment failed
onTokenized	[Function]	Optional - function to be called when card tokenization is completed successfully

Korapay Component

Parameters

Field	Data Type	Description
korapayClass	string	Optional - Pass css classes to style your component
disabled	boolean	Optional - Disable or Enable the payment button
amount	integer	Required - Amount in naira
customer_name	string	Required - field in the customer object. Customer name derived from name enquiry.
customer_email	string	Required - field in the customer object. Customer email address
currency	string	Optional - Currency of the charge. Default is NGN (Nigerian Naira)
reference	string	Optional - transaction reference. If you do not provide one, a unique transaction reference would be generated for the transaction.
reference	string	Optional - transaction reference. If you do not provide one, a unique transaction reference would be generated for the transaction.
notification_url	string	Optional - HTTP endpoint to send information to on payment termination, success, or failure. This overrides the webhook URL set on your merchant dashboard for this particular transaction
narration	string	Optional - Information/narration about the transaction
channels	array[string]	Optional - Methods of payment eg. Bank (bank_transfer), card(card). Default is [“bank_transfer”, “card”]
container	string	Optional - Id of HTML element you want the payment gateway to be contained in. Note that this would reset all styling on this element. The payment gateway would be resized to fit the container. If this is not set, the payment gateway fills the available screen size.

Events

Field	Data Type	Description
@onClose	[Function]	Optional - function to be called when the payment gateway is closed
@onSuccess	[Function]	Optional - function to be called when the payment is completed successfully
@onFailed	[Function]	Optional - function to be called when the payment failed
@onTokenized	[Function]	Optional - function to be called when card tokenization is completed successfully

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