GlobalPay Library for React

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

Installation

You can install this library via npm:

npm install globalpay-react

Payload Configuration

Payment Link Payload Fields

| Field | Type | Required | Description | |-------|------|----------|-------------| | amount | number | Yes | The payment amount | | merchantTransactionReference | string | Yes | Your unique transaction reference | | redirectUrl | string | Yes | URL to redirect after payment | | customer | object | Yes | Customer information object | | customer.firstName | string | Yes | Customer's first name | | customer.lastName | string | Yes | Customer's last name | | customer.emailAddress | string | Yes | Customer's email address | | customer.phoneNumber | string | Yes | Customer's phone number | | customer.currency | string | Yes | Payment currency (e.g., NGN, USD) | | customer.address | string | No | Customer's address | | customer.paymentFormCustomFields | array | No | Array of custom field objects | | customer.paymentFormCustomFields[].name | string | No | Custom field name | | customer.paymentFormCustomFields[].value | string | No | Custom field value |

Component Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | apiKey | string | Yes | - | Your GlobalPay API key | | payload | GeneratePaymentLinkPayload | Yes | - | Payment information object | | onError | function | Yes | - | Error handler callback function | | buttonText | string | No | "Pay" | Text displayed on the payment button | | buttonStyle | React.CSSProperties | No | Blue background, white text | Custom styles for the button | | buttonDisabled | boolean | No | false | Whether the button is disabled |

Example Usage

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

import { GlobalPay, GeneratePaymentLinkPayload } from 'globalpay-react';

export const App = () => {
    const payload: GeneratePaymentLinkPayload = {
        amount: 200,
        merchantTransactionReference: "your-reference",
        redirectUrl: "your-redirect-url",
        customer: {
            lastName: "Doe",
            firstName: "John",
            currency: "NGN",
            phoneNumber: "081000000000",
            address: "customer's address",
            emailAddress: "customer's email",
            paymentFormCustomFields: [
                {
                    name: "customField1",
                    value: "customValue1"
                },
                {
                    name: "customField2",
                    value: "customValue2"
                }
            ]
        }
    };

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

    function onError(error) {
        console.log(error);
    }

    return (
        <>
            <GlobalPay
                apiKey="your-api-key"
                buttonText="Pay Me"
                buttonStyle={style}
                payload={payload}
                onError={onError}
            ></GlobalPay>
        </>
    )
};