paystack-angular

Angular 21+ wrapper for Paystack InlineJS (Popup) V2.

Successor to angular4-paystack, updated for Angular 21 and the current Paystack Popup API (new PaystackPop().newTransaction()).

Install

npm install paystack-angular

Setup

Standalone (recommended)

import { ApplicationConfig } from '@angular/core';
import { providePaystack } from 'paystack-angular';

export const appConfig: ApplicationConfig = {
  providers: [
    providePaystack('pk_test_xxxxxxxxxxxxxxxxxxxxxxxx'),
  ],
};

NgModule

import { PaystackAngularModule } from 'paystack-angular';

@NgModule({
  imports: [
    PaystackAngularModule.forRoot('pk_test_xxxxxxxxxxxxxxxxxxxxxxxx'),
  ],
})
export class AppModule {}

Usage

Component

<paystack-angular
  [email]="'[email protected]'"
  [amount]="50000"
  [reference]="reference"
  [channels]="['card', 'bank']"
  (paymentInit)="paymentInit()"
  (onSuccess)="paymentDone($event)"
  (onCancel)="paymentCancel()"
  (onError)="paymentError($event)"
>
  Pay with Paystack
</paystack-angular>

Directive

<button
  type="button"
  paystackAngular
  [paystackOptions]="options"
  (onSuccess)="paymentDone($event)"
  (onCancel)="paymentCancel()"
>
  Pay with Paystack
</button>

import { PaystackOptions, PaystackSuccessResponse } from 'paystack-angular';

options: PaystackOptions = {
  amount: 50000,
  email: '[email protected]',
  reference: `ref-${Date.now()}`,
};

paymentDone(response: PaystackSuccessResponse) {
  // Always verify `response.reference` on your server
}

Service (InlineJS methods)

import { PaystackAngularService } from 'paystack-angular';

constructor(private paystack: PaystackAngularService) {}

// Popup V2 — new transaction
await this.paystack.newTransaction(
  { email: '[email protected]', amount: 10000 },
  {
    onSuccess: (tx) => console.log(tx.reference),
    onCancel: () => console.log('cancelled'),
  },
);

// Recommended secure flow — initialize on server, resume with access_code
await this.paystack.resumeTransaction(accessCode, {
  onSuccess: (tx) => console.log(tx.reference),
});

await this.paystack.preloadTransaction(options, callbacks);
await this.paystack.checkout(options, callbacks);
await this.paystack.paymentRequest({ ...options, container: 'payment-request' });
this.paystack.cancelTransaction(transaction);

Options (InlineJS V2)

| Name | Type | Required | Description | |------|------|----------|-------------| | key | string | yes* | Public key (*or via providePaystack / forRoot) | | email | string | yes | Customer email | | amount | number | yes | Amount in subunit (e.g. kobo) | | currency | string | no | Default NGN | | reference | string | no | Unique reference; Paystack can generate one | | firstName / lastName / phone | string | no | Customer details | | customerCode | string | no | Overrides customer fields when set | | metadata | object | no | Extra data; use custom_fields for dashboard visibility | | channels | string[] | no | e.g. card, bank, ussd, mobile_money, apple_pay | | subaccountCode | string | no | Subaccount code | | split_code | string | no | Split code | | split | PaystackDynamicSplit | no | Dynamic split created at transaction runtime | | bearer | string | no | account or subaccount | | transactionCharge | number | no | Flat fee in kobo for subaccount | | planCode | string | no | Existing plan code | | subscriptionCount | number | no | Subscriptions to create for the plan |

Dynamic runtime split

Pass split_code when a split is configured in advance. When its configuration is only known during checkout, pass a split object:

import { PaystackOptions } from 'paystack-angular';

options: PaystackOptions = {
  email: '[email protected]',
  amount: 100000,
  split: {
    type: 'percentage',
    bearer_type: 'subaccount',
    bearer_subaccount: 'ACCT_bearer',
    reference: 'split-ref-123',
    subaccounts: [
      { subaccount: 'ACCT_first', share: 60 },
      { subaccount: 'ACCT_second', share: 40 },
    ],
  },
};

type accepts flat or percentage. bearer_type accepts all, all-proportional, account, or subaccount. When it is subaccount, bearer_subaccount is required and must identify a participating subaccount.

Callbacks (outputs / service)

| Name | When | |------|------| | onSuccess | Payment completed | | onCancel | Customer closed checkout | | onLoad | Checkout loaded | | onError | Transaction failed to load | | paymentInit | Angular helper — emitted just before Popup opens |

Migration from angular4-paystack

| Old | New | |-----|-----| | https://js.paystack.co/v1/inline.js + PaystackPop.setup | V2 + new PaystackPop().newTransaction | | ref | reference | | callback output | onSuccess | | onClose output | onCancel | | plan | planCode | | subaccount | subaccountCode | | transaction_charge | transactionCharge | | angular4-paystack selector | paystack-angular / paystackAngular | | Embed component | Removed (was deprecated) |

Legacy input/output names remain accepted where noted as deprecated.

Verify on the server

Never trust the client alone. After onSuccess, verify the transaction with Paystack’s API using the reference.

License

MIT