{"id":18091145,"url":"https://github.com/ashinzekene/angular-rave","last_synced_at":"2025-04-13T05:44:49.441Z","repository":{"id":57178974,"uuid":"112943757","full_name":"ashinzekene/angular-rave","owner":"ashinzekene","description":"💵 An angular2+ module for integrating payments using the rave gateway","archived":false,"fork":false,"pushed_at":"2020-09-14T03:34:25.000Z","size":2774,"stargazers_count":23,"open_issues_count":2,"forks_count":14,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-13T05:44:44.563Z","etag":null,"topics":["angular","credit-card","flutterwave","gateway","module","money","nigeria","payments","rave","ravepay","transaction"],"latest_commit_sha":null,"homepage":"https://ashinzekene.github.io/angular-rave","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}},"created_at":"2017-12-03T16:25:10.000Z","updated_at":"2024-10-10T02:25:16.000Z","dependencies_parsed_at":"2022-09-09T17:30:48.881Z","dependency_job_id":null,"html_url":"https://github.com/ashinzekene/angular-rave","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ashinzekene%2Fangular-rave","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ashinzekene%2Fangular-rave/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ashinzekene%2Fangular-rave/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ashinzekene%2Fangular-rave/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ashinzekene","download_url":"https://codeload.github.com/ashinzekene/angular-rave/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248670520,"owners_count":21142901,"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","credit-card","flutterwave","gateway","module","money","nigeria","payments","rave","ravepay","transaction"],"created_at":"2024-10-31T18:09:42.562Z","updated_at":"2025-04-13T05:44:49.422Z","avatar_url":"https://github.com/ashinzekene.png","language":"TypeScript","readme":"# ANGULAR-RAVE\n\n\u003e Easily intergrate the [rave](https://ravepay.co/) payment gateway in your angular2+ project\n\n## HOW TO USE\n\nYou can checkout the demo [here](https://ashinzekene.github.io/angular-rave)\n\n### 1. Install the module\n\n  Run this in the root of your angular project\n  ```bash\n  npm install --save angular-rave\n  ```\n\n### 2. Import the module into your project like so\n\n  ```ts\n  import { NgModule } from '@angular/core';\n  import { AngularRaveModule } from 'angular-rave';\n  ...\n\n  @NgModlule({\n    imports: [\n      AngularRaveModule.forRoot('FLWPUBK-XXXXXXXXXXXXXXXXXXX'),\n    ]\n  })\n  ```\n  where `FLWPUBK-XXXXXXXXXXXXXXXXXXX` is your public key which can be found on the flutterwave dashboard\n\n### 3. Implementing Angular-rave\n\nThere are two option available\n\n- The `angular-rave` component:\n```html\n\u003cangular-rave\n  [customer]=\"{ email: 'user@example.com', phonenumber: '0809808800900' }\"\n  [amount]=\"500000\"\n  [customizations]=\"{ title: 'Bill Payment' }\"\n  [tx_ref]=\"'USR1295950'\"\n  (callback)=\"paymentSuccess($event)\"\n  (close)=\"paymentFailure()\"\n  (init)=\"paymentInit()\"\n\u003e\u003c/angular-rave\u003e\n```\n\n2. The `angular-rave` directive:\n```html\n\u003cbutton\n  angular-rave\n  [customer]=\"{ email: 'user@example.com', phonenumber: '0809808800900' }\"\n  [amount]=\"500000\"\n  [customizations]=\"{ title: 'Bill Payment'}\"\n  [tx_ref]=\"'USR1295950'\"\n  (callback)=\"paymentSuccess($event)\"\n  (close)=\"paymentFailure()\"\n  (init)=\"paymentInit()\"\n\u003ePAY NOW\u003c/button\u003e\n```\nAnd then in your `component.ts` file:\n\n```ts\nimport { Component } from '@angular/core';\nimport { RavePaymentData } from 'angular-rave';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.css']\n})\nexport class AppComponent {\n  paymentFailure() {\n    console.log('Payment Failed');\n  }\n\n  paymentSuccess(res: RavePaymentData) {\n    console.log('Payment complete', res);\n    // Verify the transaction\n  }\n\n  paymentInit() {\n    console.log('Payment about to begin');\n  }\n}\n\n```\n\n### Rave Options\nYou can also pass in an object containing your rave options like so\n\n```html\n\u003cbutton\n  angular-rave\n  [raveOptions]=\"raveOptions\"\n  (init)=\"paymentInit()\"\n  (callback)=\"paymentSuccess($event)\"\n  (onclose)=\"paymentFailure()\"\n\u003e\n  Pay with Rave Directive\n\u003c/button\u003e\n\n```\nAnd then you can import the `RaveOptions` class for help in typing\n```ts\nimport { RaveOptions } from 'angular-rave';\n\n...\n  raveOptions: RaveOptions = {\n    amount: 3000,\n    customer: {\n      email: 'user@ravemail.com',\n      phonenumber: '09010910901',\n      name: 'Ekene Ashinze',\n    },\n    customizations: {\n      description: 'This is a flutterwave modal implemented using angular rave',\n      title: 'Angular Rave',\n      logo: 'https://angular.io/assets/images/logos/angular/angular.svg',\n    },\n    tx_ref: `${Math.random() * 1000000}`,\n  };\n```\nAnd then in the template\n```html\n\u003cbutton\n  angular-rave\n  [autoClose]=\"true\"\n  [raveOptions]=\"raveOptions\"\n\u003ePAY NOW\u003c/button\u003e\n```\n\n### Rave Key Specificity\nAlso, you can pass in a key in the component and the directive, in such situation,\nthis key is given a higher preference over the global `forRoot` key.\nFor example, if you have this is your module file\n\n```ts\n@NgModule({\n  imports: [\n    AngularRaveModule.forRoot('FLWPUBK-1000'),\n  ]\n})\n```\nand this in your component\n```html\n\u003cbutton\n  angular-rave\n  [public_key]=\"FLWPUBK-2000\"\n  [raveOptions]=\"paymentOptions\"\n\u003e\n  PAY NOW\n\u003c/button\u003e\n```\nThen `FLWPUBK-2000` would be used instead\n\n**NOTE:**\n\n- When using the component, the rave's payment popup shows once the component is rendered while using the directive the popup shows on click\n- Always generate a sensible unique reference for every transaction (unlike what I did up there 😉)\n- After successful payment always perform server verification\n\n## OPTIONS\n\n| Name                    | Type                      | Required          | Default Value   | Description                                      |\n|-------------------------|---------------------------|-------------------|:---------------:|:--------------------------------------------------|\n| public_key              | string                    | true              | -               | Merchant public key\n| tx_ref                  | string                    | true              | -               | Your transaction reference. This MUST be unique for every transaction\n| amount                  | number                    | true              | -               | Amount to charge the customer.\n| currency                | string                    | false             | 'NGN'           | currency to charge in. Defaults to 'NGN'\n| integrity_hash          | string                    | false             | -               | This is a sha256 hash of your FlutterwaveCheckout values, it is used for passing secured values to the payment gateway.\n| paymentOptions          | `PaymentOptionsEnum[]`    | false             | -               |This specifies the payment options to be displayed e.g - card, mobilemoney, ussd and so on.\n| payment_plan            | string                    | false             | -               | This is the payment plan ID used for Recurring billing\n| subaccounts             | `RaveSubAcccount[]`       | false             | -               |This is an array of objects containing the subaccount IDs to split the payment into. Check our Split Payment page for more info\n| redirect_url            | string                    | false             | -               | URL to redirect to when a transaction is completed. This is useful for 3DSecure payments so we can redirect your customer back to a custom page you want to show them.\n| customer                | RaveCustomer              | true              | -               | This is an object that can contains your customer details: e.g: `{ 'email': 'example@example.com', 'phonenumber': '08012345678', 'name': 'Takeshi Kovacs'}`\n| meta                    | `{[key: string]: any}`    | false             | -               | This is an object that helps you include additional payment information to your request `{'consumer_id': 23,'consumer_mac': '92a3-912ba-1192a'}`\n| customizations          | `RaveCustomization`       | true              | -               | This is an object that contains title, logo, and description you want to display on the modal e.g `{'title': 'Pied Piper Payments', 'description': 'Middleout isn't free. Pay the price', 'logo': 'https://assets.piedpiper.com/logo.png'}`\n| init                    | `() =\u003e void`              | false             | -               | A function to be called when payment is about to begin\n| onclose                 | function()                | false             | -               | A function to be called when the pay modal is closed before a transaction is completed.\n| callback                | (res: RavePaymentData) =\u003e void     | true              | -               | A function to be called on successful card charge. Users can always be redirected to a successful or failed page supplied by the merchant here based on response.\n\n\u003e You can get more information from [rave's documentation](https://flutterwavedevelopers.readme.io/)  \n\u003e Type definitions can be found [here](./projects/angular-rave/src/lib/rave-options.ts)\n\n## CONTRIBUTING\n\nFeel free to create issues and submit pull requests to make corrections or enhance functionality\n\nTwo projects exist in this repository\n- The `Angular-rave` package: [`./projects/angular-rave`](./projects/angular-rave)\n- The `Angular-rave-lib` demo: [`./src`](./src)\n\n### Angular-rave project\n- Found at `./projects/angular-rave/src/lib`.\n- The artifacts ([README.md](./projects/angular-rave/README.md), [CHANGELOG.md](./projects/angular-rave/CHANGELOG.md) and [LICENSE.md](./projects/angular-rave/LICENSE.md)) in the `./projects/angular-rave/` folder are overwritten on [build](./package.json#L7)\n- Running `npm run build` on the main folder builds this project by [default](./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](./tsconfig.json#L23) from the `angular-rave` 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- To build this project, run `npm run build angular-rave-lib`. The compiled files are built to the `docs` folder for GitHub Pages.\n- This project is also served on github pages at https://ashinzekene.github.io/angular-rave/\n\n## Release\n- Checkout to a new release branch `release/new-version` eg `release/3.0.0`\n- cd into `projects/angular-rave` \n- Run `npm version patch|minor|major`\n- cd into the main directory and run `npm build`\n- Run `git add . \u0026\u0026 git commit -m new-version`\n- Run `git tag -a new-version \"release notes...\"`\n- cd into `dist/angular-rave` and run `npm publish`\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":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fashinzekene%2Fangular-rave","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fashinzekene%2Fangular-rave","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fashinzekene%2Fangular-rave/lists"}