GlobalPay Library for Angular

This is an Angular library for integrating GlobalPay Payment Gateway into Angular applications.

Installation

You can install this library via npm:

npm install globalpay-angular

Compatibility

This library is compatible with Angular 14+ and follows the latest Angular best practices with standalone components support.

Usage

Module (<= angular 16) - Import the module

Import GlobalPayModule into your Angular application's module where Globalpay is used:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GlobalPayModule } from 'globalpay-angular';

@NgModule({
  declarations: [
    // Your components
  ],
  imports: [
    BrowserModule,
    GlobalPayModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Standalone (>= angular 17) - Add to imports

import { Component } from '@angular/core';
import { GlobalpayAngularComponent, GeneratePaymentLinkPayload } from 'globalpay-angular';

@Component({
  selector: 'your-component',
  standalone: true,
  imports: [GlobalpayAngularComponent],
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.scss']
})
export class YourComponent {
}

Use the component

Use the globalpay component in your template:

<globalpay
    [apiKey]="apiKey"
    [payload]="payload"
    [buttonStyle]="buttonStyle"
    [buttonText]="buttonText"
    [buttonDisabled]="buttonDisabled"
    (onError)="onError($event)"
>
</globalpay>

Component Inputs

| Field | Type | Default | Required | Description | |-------|------|---------|----------|-------------| | apiKey | string | - | Yes | Your GlobalPay API key | | payload | GeneratePaymentLinkPayload | - | Yes | Payment transaction details | | buttonText | string | "Pay" | No | Text displayed on the payment button | | buttonStyle | { [klass: string]: any } | Blue background, white text | No | Custom CSS styles for the button | | buttonDisabled | boolean | false | No | Disables the payment button |

Component Outputs

| Event | Type | Description | |-------|------|-------------| | onError | EventEmitter<GeneratePaymentLinkError> | Emitted when an error occurs during payment link generation |

Payload Structure

PaymentLink Payload

| Field | Type | Default | Required | Description | |-------|------|---------|----------|-------------| | amount | number | - | Yes | Transaction amount | | merchantTransactionReference | string | - | Yes | Unique transaction reference from merchant | | redirectUrl | string | - | Yes | URL to redirect after payment completion | | customer | object | - | Yes | Customer information object |

Customer Object

| Field | Type | Default | Required | Description | |-------|------|---------|----------|-------------| | lastName | string | - | Yes | Customer's last name | | firstName | string | - | Yes | Customer's first name | | currency | string | - | Yes | Transaction currency (e.g., "NGN") | | phoneNumber | string | - | Yes | Customer's phone number | | address | string | - | No | Customer's address | | emailAddress | string | - | Yes | Customer's email address | | paymentFormCustomFields | Array<{name: string, value: string}> | - | No | Custom fields to be displayed on payment form |

Example Implementation

Component TypeScript

import { GeneratePaymentLinkPayload, GeneratePaymentLinkError } from 'globalpay-angular';
import { Component } from '@angular/core';

@Component({
  selector: 'your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.scss']
})
export class YourComponent {
  payload: GeneratePaymentLinkPayload = {
    amount: 1500,
    merchantTransactionReference: "TXN-12345-6789",
    redirectUrl: "https://yourwebsite.com/payment-success",
    customer: {
      lastName: "Doe",
      firstName: "John",
      currency: "NGN",
      phoneNumber: "+2348012345678",
      address: "123 Main Street, Lagos",
      emailAddress: "[email protected]",
      paymentFormCustomFields: [
        {
          name: "customerId",
          value: "CUST-001"
        },
        {
          name: "department",
          value: "Sales"
        }
      ]
    }
  };

  apiKey = 'your-api-key-here';
  buttonStyle = {
    'background': '#28a745',
    'font-size': '16px',
    'padding': '12px 24px',
    'border-radius': '8px'
  };
  buttonText = "Proceed to Payment";

  onError(error: GeneratePaymentLinkError) {
    console.error('Payment Error:', error);
    // Handle error appropriately
  }
}

Component Template

<div class="payment-container">
  <h2>Complete Your Payment</h2>
  
  <globalpay
    [apiKey]="apiKey"
    [payload]="payload"
    [buttonStyle]="buttonStyle"
    [buttonText]="buttonText"
    [buttonDisabled]="false"
    (onError)="onError($event)"
  >
  </globalpay>
</div>

GeneratePaymentLinkError

| Field | Type | Description | |-------|------|-------------| | message | string | Error message | | details | any | Detailed error information |

License

MIT