{"id":15295296,"url":"https://github.com/ashinzekene/angular4-paystack","last_synced_at":"2025-04-10T01:12:29.393Z","repository":{"id":25502793,"uuid":"104003999","full_name":"ashinzekene/angular4-paystack","owner":"ashinzekene","description":"💵 An angular2+ module  for paystack transactions","archived":false,"fork":false,"pushed_at":"2024-03-24T16:26:48.000Z","size":3401,"stargazers_count":60,"open_issues_count":3,"forks_count":38,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-10T01:12:24.358Z","etag":null,"topics":["angular","angular2","angular4","angular4-paystack","money","payment","paystack","transactions"],"latest_commit_sha":null,"homepage":"https://ashinzekene.github.io/angular4-paystack/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ashinzekene.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-09-18T23:57:39.000Z","updated_at":"2025-03-08T18:44:08.000Z","dependencies_parsed_at":"2024-06-19T11:13:57.155Z","dependency_job_id":null,"html_url":"https://github.com/ashinzekene/angular4-paystack","commit_stats":{"total_commits":70,"total_committers":5,"mean_commits":14.0,"dds":0.05714285714285716,"last_synced_commit":"c36e237d49c66db87a8d054876c11389b0e0c83c"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ashinzekene%2Fangular4-paystack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ashinzekene%2Fangular4-paystack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ashinzekene%2Fangular4-paystack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ashinzekene%2Fangular4-paystack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ashinzekene","download_url":"https://codeload.github.com/ashinzekene/angular4-paystack/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248137890,"owners_count":21053775,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular2","angular4","angular4-paystack","money","payment","paystack","transactions"],"created_at":"2024-09-30T17:09:22.182Z","updated_at":"2025-04-10T01:12:29.361Z","avatar_url":"https://github.com/ashinzekene.png","language":"TypeScript","readme":"# ANGULAR4-PAYSTACK\n\n[![Node CI](https://github.com/ashinzekene/angular4-paystack/actions/workflows/nodejs.yml/badge.svg)](https://github.com/ashinzekene/angular4-paystack/actions/workflows/nodejs.yml)\n\nhttps://ashinzekene.github.io/angular4-paystack/ \n\n\u003e This is an angular module that abstracts the complexity of making paystack payments with Angular2+.\n\n## USAGE\n\n### 1. Install the module\n```sh\nnpm install --save angular4-paystack\n```\n\n### 2. Import the module\nIn your `app.module.ts` or any module where the component or directive would be used like so:\n\n```ts\nimport { NgModule } from '@angular/core';\n\nimport { Angular4PaystackModule } from 'angular4-paystack';\n...\n\n@NgModule({\n  imports: [\n    Angular4PaystackModule.forRoot('pk_test_xxxxxxxxxxxxxxxxxxxxxxxx'),\n  ]\n})\n\nexport class AppModule {}\n```\n\n### 3. Implement in your project\nThere are two available options\n\n* **AngularPaystackComponent**: Renders a button which when clicked loads paystack Inline in an iframe\n  ```html\n    \u003cangular4-paystack\n      [email]=\"'mailexample@mail.com'\"\n      [amount]=\"5000000\"\n      [ref]=\"reference\"\n      [channels]=\"['bank']\"\n      [class]=\"'btn btn-primary'\"\n      (onClose)=\"paymentCancel()\"\n      (callback)=\"paymentDone($event)\"\n    \u003e\n      Pay with Paystack\n    \u003c/angular4-paystack\u003e\n  ```\n\n*  **AngularPaystackDirective**: A directive that loads paystack inline in an iframe when clicked\n```html\n  \u003cbutton\n    angular4-paystack\n    [key]=\"'pk_test_xxxxxxxxxxxxxxxxxxxxxxx'\"\n    [email]=\"'mailexample@mail.com'\"\n    [amount]=\"5000000\"\n    [ref]=\"reference\"\n    [class]=\"'btn btn-primary'\"\n    [split_code]=\"'SPL_A7t5J02390Fmm'\"\n    (paymentInit)=\"paymentInit()\"\n    (onClose)=\"paymentCancel()\"\n    (callback)=\"paymentDone($event)\"\n  \u003e\n    Pay with Paystack\n  \u003c/button\u003e\n```\n\nAnd then in your `component.ts`\n```ts\n  import { Component, OnInit } from '@angular/core';\n\n  @Component({\n    selector: 'app-root',\n    templateUrl: './app.component.html',\n    styleUrls: ['./app.component.css']\n  })\n  export class AppComponent implements OnInit {\n    reference = '';\n    constructor() {}\n\n    paymentInit() {\n      console.log('Payment initialized');\n    }\n\n    paymentDone(ref: any) {\n      this.title = 'Payment successfull';\n      console.log(this.title, ref);\n    }\n\n    paymentCancel() {\n      console.log('payment failed');\n    }\n\n    ngOnInit() {\n      this.reference = `ref-${Math.ceil(Math.random() * 10e13)}`;\n    }\n\n  }\n```\nAlso you can use the `paystackOptions` object like so:\n```html\n  \u003cbutton\n    angular4-paystack\n    [paystackOptions]=\"options\"\n    (paymentInit)=\"paymentInit()\"\n    (onClose)=\"paymentCancel()\"\n    (callback)=\"paymentDone($event)\"\n  \u003e\n    Pay with Paystack\n  \u003c/button\u003e\n```\n\nAnd then in your `component.ts`\n```ts\n  import { Component } from '@angular/core';\n  import { PaystackOptions } from 'angular4-paystack';\n\n  @Component({\n    selector: 'app-root',\n    templateUrl: './app.component.html',\n    styleUrls: ['./app.component.css']\n  })\n  export class AppComponent {\n    options: PaystackOptions = {\n      amount: 50000,\n      email: 'user@mail.com',\n      ref: `${Math.ceil(Math.random() * 10e10)}`\n    }\n    constructor() {}\n\n    paymentInit() {\n      console.log('Payment initialized');\n    }\n\n    paymentDone(ref: any) {\n      this.title = 'Payment successfull';\n      console.log(this.title, ref);\n    }\n\n    paymentCancel() {\n      console.log('payment failed');\n    }\n  }\n```\nAlso, you can pass in a key in the component and the directive, in such situation, this key is given a higher preference over the global `forRoot` key. For example, if you have this is your file\n```ts\n@NgModule({\n  imports: [\n    Angular4PaystackModule.forRoot('pk_test_1'),\n  ]\n})\n```\nand this in your component\n```html\n  \u003cbutton\n    angular4-paystack\n    [key]=\"'pk_test_2'\"\n    [email]=\"'mailexample@mail.com'\"\n    [amount]=\"5000000\"\n    [ref]=\"reference\"\n    [class]=\"'btn btn-primary'\"\n    (paymentInit)=\"paymentInit()\"\n    (onClose)=\"paymentCancel()\"\n    (callback)=\"paymentDone($event)\"\n  \u003e\n    Pay with Paystack\n  \u003c/button\u003e\n```\nThen `pk_test_2` would be used instead\n\n\n## OPTIONS\n\n|Name                   | Type           | Required                  | Default Value       | Description         |\n|-----------------------|----------------|---------------------------|---------------------|---------------------|\n|  `amount `            | `number`       | true                      |  undefined          | Amount to withdraw (in kobo for NGN)\n|  `email `             | `string`       | true                      |  undefined          | The customer's email address.\n|  `key`                | `string`       | true                      |  undefined          | Your pubic Key from Paystack. Use test key for test mode and live key for live mode\n|  `ref`                | `string`       | true                      |  undefined          | Unique case sensitive transaction reference. Only -,., = and alphanumeric characters allowed.\n|  `callback`           | `function`     | true                      |  undefined          | A function called when transaction is successful. Returns an object containing unique reference\n|  `metadata`           | `object`       | false                     |  {}                 | custom details\n|  `class`              | `string`       | false                     |  undefined          | A string of classes to add to the component (not available for **inline embed**)\n|  `style`              | `object`       | false                     |  undefined          | CSS stylings, eg ```{fontColor: 'red'}```  (not available for **inline embed**)\n|  `text`               | `object`       | false                     |  undefined          | Text output of the component\n|  `currency`           | `string`       | false                     |  \"NGN\"              | Transaction currency\n|  `plan`               | `string`       | false                     |  \"\"                 | If transaction is to create a subscription to a predefined plan, provide plan code here.\n|  `quantity`           | `string`       | false                     |  \"\"                 | Used to apply a multiple to the amount returned by the plan code above.\n|  `paystackOptions`     | `object`     | false                      |  undefined          | An object containing the paystack options above. **NOTE:** The function listeners eg `callback`, `paymentInit` should not be added here\n|  `paymentInit`        | `function`     | false                     |  undefined          | A function called when the payment is about to begin\n|  `onClose`            | `function`     | false                     |  undefined          | A function called if the customer closes the payment window\n**For Split Payments** |\n|  `split_code`         | `string`       | true (for split payment)  |  \"\"                 | The split code of the transaction split. (e.g. `SPL_98WF13Eb3w`)\n|  `subaccount`         | `string`       | false                     |  \"\"                 | The code for the subaccount that owns the payment.\n|  `transaction_charge` | `number`       | false                     |  0                  |  A flat fee to charge the subaccount for this transaction, in kobo.\n|  `bearer`             | `string`       | false                     |  \"\"                 | Who bears Paystack charges? account or subaccount\n|  `channels`           | `array`        | false                     | undefined  | Send 'card' or 'bank' or 'card','bank' as an array to specify what options to show the user paying\n\n\u003e For more information checkout [paystack's documentation](https://paystack.com/docs/payments/accept-payments/)\n\n## CONTRIBUTING\n\nPlease feel free to fork this package and contribute by submitting a pull request to enhance the functionalities.\n\nTwo projects exist in this repository\n- The `Angular4-Paystack` package: [`./projects/angular4-paystack`](./projects/angular4-paystack)\n- The demo: [`./src`](./src)\n\n### Angular4-paystack project\n- Found at `./projects/angular4-paystack/src/lib`.\n- The artifacts ([README.md](./projects/angular4-paystack/README.md), [CHANGELOG.md](./projects/angular4-paystack/CHANGELOG.md) and [LICENSE.md](./projects/angular4-paystack/LICENSE.md)) in the `./projects/angular4-paystack/` folder are overwritten on [build](https://github.com/ashinzekene/angular4-paystack/blob/master/package.json#L7)\n- Running `npm run build` on the main folder builds this project by [default](https://github.com/ashinzekene/angular4-paystack/blob/master/angular.json#L155)\n\n### Demo\n- To serve this project run `npm start`/`ng serve`.\n- This project makes use of the [built package](https://github.com/ashinzekene/angular4-paystack/blob/master/tsconfig.json#L23) from the `angular4-paystack` library for quick testing and real-life debugging. So it's **important** to initially run `npm run build`/`ng build` before serving this project\n- This project is also served on github pages at https://ashinzekene.github.io/angular4-paystack/\n\nThanks!\nAshinze Ekene.\n\n## LICENSE\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n","funding_links":[],"categories":["Table of contents","Recently Updated"],"sub_categories":["Angular","[Mar 09, 2025](/content/2025/03/09/README.md)"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fashinzekene%2Fangular4-paystack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fashinzekene%2Fangular4-paystack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fashinzekene%2Fangular4-paystack/lists"}