@gray-adeyi/korapay-vue

A Vue plugin for Korapay integration.

Features

Typescript support
Customizable pay button
Composable for custom pay button implementation

Installation

Npm

npm i @gray-adeyi/korapay-vue

Yarn

yarn add @gray-adeyi/korapay-vue

Pnpm

pnpm i @gray-adeyi/korapay-vue

Bun

bun add @gray-adeyi/korapay-vue

Usage

After installation, update your main.ts/main.js file to register korapay as a plugin like so.

// File: src/main.ts

import { createApp } from "vue";
import App from "./App.vue";
import { initKorapay } from "@gray-adeyi/korapay-vue";

// The `initKorapay` function returns  a plugin that provides the KorapayCotextAPI context and also registers the 
// `KorapayButton` component to your project. The `initKorapay` function takes in an optional config with a type 
// definition of `KorapayInitConfig` which let's you configure korapay with your publicKey, currency, notificationUrl 
// e.t.c. You don't need to provide this optional config if your korapay's integration public key is set in your 
// environmental variables as `VITE_KORAPAY_PUBLIC_KEY`. In a situation where this environmental variable is set and 
// a publicKey is provided in the configs, the publicKey in the configs takes precedence.

const app = createApp(App);

// Initialize korapay plugin
const korapay = initKorapay(); // You may choose to provide additional configs.
// Use the plugin
app.use(korapay);
app.mount("#app");

Use the KorapayButton component where payment needs to be initiated.

// File src/App.vue
<script setup lang="ts">
  import {Currency, type InitializePayload,  type Customer} from "@gray-adeyi/korapay-vue";
  import '@gray-adeyi/korapay-vue/styles'// Import default Korapay Button styling
  import {computed, ref} from "vue";

  const amount = ref(1000)
  const customer = ref<Customer>({
    name: 'John Doe',
    email: 'jd@example.com'
  })

  const buttonText = computed(()=> `Pay ${amount.value} now`)
  
  const payload = computed(()  => ({
    reference: crypto.randomUUID(),
    amount: amount.value,
    currency: Currency.NGN,
    customer: customer.value,
  } as InitializePayload))
  
</script>

<template>
  <main>
    <div>
      <div>
        <label for="name">Name</label>
        <input name="name" type="text" v-model="customer.name"/>
      </div>
      <div>
        <label for="email">Email</label>
        <input name="email" type="text" v-model="customer.email"/>
      </div>
    </div>
   <div>
     <label for="amount">Amount</label>
     <input name="amount" type="number" v-model="amount"/>
   </div> 
    <div>
      <KorapayButton :payload="payload"/>
      <KorapayButton :payload="payload" :text="buttonText"/>
      <KorapayButton :payload="payload">
        <template #button="{ initPayWithKorapay, isInitializingPay }">
          <button @click="initPayWithKorapay"><span v-if="isInitializingPay">Loading... </span>Pay Fees</button>
        </template>
      </KorapayButton>
    </div>
  </main>
</template>

<style scoped>
</style>

The example above shows three variations of using the KorapayButton component. The first uses the default button styling and button text, the second updates the default button text, and the third uses your button instead. This makes it the most preferred variant when you need a button with your styling.

API Reference

Coming soon...

Sponsorship

Every little donation goes a long way. You can also give this project a star in its GitHub repository it helps ♥️

Contributing

You might encounter bugs while using this project or have feature enhancements you'd like to share with the project. Create an issue on the project's GitHub page.