Join us for the "JavaScript Supply Chain Security" tech talk, presented by VP of Security, Adam Baldwin. 6/20 at 10am PT.Sign up here »


2.3.3 • Public • Published


This is an angular module that abstracts the complexity of making paystack payments with Angular2+.


1. Install the module

npm install --save angular4-paystack

2. Import the module

In your app.module.ts or any module where the component or directive would be used like so:

import { NgModule } from '@angular/core';
import { Angular4PaystackModule } from 'angular4-paystack';
  imports: [
export class AppModule {}

3. Use the component in your code

There are two available options

  • Paystack Inline - Loads the credit card form in an iframe that appears as a popup

        [class]="'btn btn-primary'"
      >Pay with Paystack</angular4-paystack>
  • Paystack Inline (Directive) - Loads the credit card form in an iframe that appears as a popup

        [class]="'btn btn-primary'"
      >Pay with Paystack</button>
  • Paystack Inline Embed - Paystack Inline Embed is the latest addition to the stack, it offers a stylish Inline that loads the credit card form in a set container like it sits in your page.

        [class]="'btn btn-primary'"


    • The payment form will be 100% of the width of wherever you put it.
    • To maintain a uniform design, your page's background color should be white


Name Type Required Default Value Description
amount number true undefined Amount to withdraw (in kobo for NGN)
email string true undefined The customer's email address.
key string true undefined Your pubic Key from Paystack. Use test key for test mode and live key for live mode
ref string true undefined Unique case sensitive transaction reference. Only -,., = and alphanumeric characters allowed.
callback function true undefined A function called when transaction is successful. Returns an object containing unique reference
metadata object false {} custom details
class string false undefined A string of classes to add to the component (not available for inline embed)
style object false undefined CSS stylings, eg {fontColor: 'red'} (not available for inline embed)
text object false undefined Text output of the component
currency string false "NGN" Transaction currency
plan string false "" If transaction is to create a subscription to a predefined plan, provide plan code here.
quantity string false "" Used to apply a multiple to the amount returned by the plan code above.
paymentInit function false undefined A function called when the payment is about to begin
onClose function false undefined A function called if the customer closes the payment window
For Split Payments
subaccount string false "" The code for the subaccount that owns the payment.
transaction_charge number false 0 A flat fee to charge the subaccount for this transaction, in kobo.
bearer string false "" Who bears Paystack charges? account or subaccount
channels array false ['bank', 'card'] Send 'card' or 'bank' or 'card','bank' as an array to specify what options to show the user paying

For more information checkout paystack's documentation


Please feel free to fork this package and contribute by submitting a pull request to enhance the functionalities.

How can I thank you?

Why not star the github repo? I'd love the attention! Why not share the link for this repository on Twitter or anywhere? Spread the word!

Don't forget to follow me on twitter!

Thanks! Ashinze Ekene.


The MIT License (MIT). Please see License File for more information.


npm i angular4-paystack

Downloadsweekly downloads









last publish


  • avatar
Report a vulnerability