globalpay-vue v1.0.0

GlobalPay Library for VueJs

This is a VueJs library for integrating GlobalPay Payment Gateway into VueJs applications.

Installation

You can install this library via npm:

npm install globalpay-vue

Example Usage

Import the GlobalPay Component (and Payload Type if you're using Typescript)

<script setup lang="ts">
import { GlobalPay } from 'globalpay-vue';
import { GeneratePaymentLinkPayload, GeneratePaymentLinkError } from 'globalpay-vue/components/GlobalPay.vue';

const payload: GeneratePaymentLinkPayload = {
    amount: 200,
    merchantTransactionReference: "your-reference",
    redirectUrl: "www.google.com",
    customer: {
        lastName: "customerfirstname",
        firstName: "customerlastname",
        currency: "NGN",
        phoneNumber: "081000000000",
        address: "",
        emailAddress: "customer email address"
    }
};

const style = {
    background: 'green',
    color: 'yellow'
};

const erroHandler = (error: GeneratePaymentLinkError) => {console.log(error)}

</script>

<template>

<GlobalPay 
    :isLive="false"
    :apiKey="'your-api-key'"
    :buttonText="'Pay'"
    :buttonStyle="style"
    :payload="payload"
    :onError="erroHandler"
/>

</template>

buttonText and buttonStyle inputs are optional. buttonText is defaulted to Pay unless specified from prop and buttonStyle is defaulted to a blue background with white text.

isLive is defaulted to true

This library is only compatible with Vue3