{"id":20051728,"url":"https://github.com/seerbit/seerbit-angular","last_synced_at":"2025-08-10T04:33:16.368Z","repository":{"id":36567665,"uuid":"228428739","full_name":"seerbit/seerbit-angular","owner":"seerbit","description":"The official SeerBit  library for Angular","archived":false,"fork":false,"pushed_at":"2024-01-11T02:39:36.000Z","size":1041,"stargazers_count":0,"open_issues_count":2,"forks_count":3,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-30T21:17:33.193Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/seerbit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"zenodo":null}},"created_at":"2019-12-16T16:29:53.000Z","updated_at":"2023-10-09T11:06:50.000Z","dependencies_parsed_at":"2025-05-05T11:34:57.150Z","dependency_job_id":"c2e71f28-e9f7-4284-8b7d-d7feeb096391","html_url":"https://github.com/seerbit/seerbit-angular","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/seerbit/seerbit-angular","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seerbit%2Fseerbit-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seerbit%2Fseerbit-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seerbit%2Fseerbit-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seerbit%2Fseerbit-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/seerbit","download_url":"https://codeload.github.com/seerbit/seerbit-angular/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seerbit%2Fseerbit-angular/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268576350,"owners_count":24273055,"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","status":"online","status_checked_at":"2025-08-03T02:00:12.545Z","response_time":2577,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-11-13T12:05:37.202Z","updated_at":"2025-08-10T04:33:16.336Z","avatar_url":"https://github.com/seerbit.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\u003cp align=\"center\"\u003e\n\u003cimg width=\"400\" valign=\"top\" src=\"https://assets.seerbitapi.com/images/seerbit_logo_type.png\" data-canonical-src=\"https://res.cloudinary.com/dpejkbof5/image/upload/v1620323718/Seerbit_logo_png_ddcor4.png\" style=\"max-width:100%; \"\u003e\n\u003c/p\u003e\n\n\n\u003ch1 align=\"center\"\u003e\n  \u003cimg width=\"40\" valign=\"bottom\" src=\"https://angular.io/assets/images/logos/angular/angular.svg\"\u003e\n  seerbit-angular\n\u003c/h1\u003e\n\n\u003ch4 align=\"center\"\u003e\n  An Angular 16 Library for SeerBit payment gateway\n\u003c/h4\u003e\n\n\n## Features\n\n* The library enables easy integration with Angular.\n* Integrate as a Component\n* Integrate as a Directive\n\n## Getting started\n\n* A full getting started guide for integrating SeerBit can be found at [getting started docs](https://doc.seerbit.com)\n* Register for a merchant account on [Seerbit Merchant Dashboard](https://dashboard.seerbitapi.com) to get access to integration keys.\n\n## Documentation\n\nThe documentation, installation guide, detailed description of the SeerBit API and all of its features is [available on the documentation website](https://doc.seerbit.com/api/library).\n\n\n## Requirements\n\n* Angular 16 and higher\n\n\n## Installation\nYou can use NPM to include the library in your project\n\n### NPM\n\n```bash\nnpm install --save seerbit-angular\n```\n\n## Inject the library\n\nImport the `NgSeerBitModule` into your application (most likely your checkout module)\n\n```ts\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport {NgSeerBitModule} from 'seerbit-angular';\n\nimport { AppComponent } from './app.component';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,NgSeerBitModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n\n## Implementation in your Application\n```ts\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.css']\n})\nexport class AppComponent {\n  title = 'seerbit-anguar-demo';\n  \n  PaymentDone(res) {/*event handler with a response after a complete transaction*/\n    const {response, closeModal} = res;\n    console.log('response', response)\n    closeModal();\n  }\n  PaymentCancel(response) {/*event handler when shopper closes payment modal*/\n    console.log(response)\n  }\n\n  options = {\n       tranref: new Date().getTime(),\n       currency: 'NGN',\n       description: 'TEST PAYMENT',\n       country: 'NG',\n       email: 'samsmart@emaildomain.com',\n       mobile_no: '08011111111',\n       full_name: 'Sam Smart',\n       amount: 2000,\n       setAmountByCustomer: false, \n       close_prompt: false,\n       close_on_success: false,\n       callbackurl: '', // Replace this with URL available on the WWW\n       public_key: 'public_key_from_your_merchant_dashboard', // replace this with your own public key from your Merchant Dashboard\n       customization: {\n                theme: {\n                  border_color: \"#000000\",\n                  background_color: \"#004C64\",\n                  button_color: \"#0084A0\",\n                },\n                payment_method: [\"card\", \"account\", \"transfer\", \"wallet\", 'ussd'],\n                display_fee: true, // false\n                logo: \"logo_url || base64\", \n              },\n       tokenize: false,\n       planId: \"\"\n  };\n}\n```\n\n## Implementation in your Component Template\n\n## As a Component\n\n```html\n\u003cseerbit-ng class=\"your-custom-class\" (callback)=\"PaymentDone($event)\" (close)=\"PaymentCancel($event)\" [options]=\"options\"\u003e\nTrigger Payment Modal as a Component\n\u003c/seerbit-ng\u003e\n```\nA caveat for implementing as a component requires your styling to available globally for the component to inherit them.\u003cbr\u003e\n\n## As a Directive\n\n```html\n\u003cbutton class=\"your-custom-class\" seerbit-ng (callback)=\"PaymentDone($event)\" (close)=\"PaymentCancel($event)\" [options]=\"options\"\u003e\nTrigger Payment Modal as a Component\n\u003c/button\u003e\n```\n## Examples\n\nYou can also check the [projects/seerbit-anguar-demo folder](https://github.com/seerbit/seerbit-angular/tree/master/projects/seerbit-anguar-demo) in this repository for more examples of usage.\n\n## A Shopping cart example\n\n```html\n\u003cstrong\u003eApp Component\u003c/strong\u003e\n```\n\n```ts\nimport { Component } from '@angular/core';\nimport {PRODUCTS} from './mock.products';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.css']\n})\nexport class AppComponent {\n  title = 'seerbit-anguar-demo';\n  cart = [...PRODUCTS];\n  cart_total = 0;\n  cart_total_cost = 0;\n  available_quantities = [1, 2, 3];\n\n  options = {\n    tranref: new Date().getTime(),\n    currency: \"NGN\",\n    description: \"TEST\",\n    country: \"NG\",\n    email: \"test@emaildomain.com\",\n    mobile_no: \"08011111111\",\n    full_name: \"test test\",\n    amount: this.cart_total_cost,\n    setAmountByCustomer: false,\n    close_prompt: false,\n    close_on_success: false,\n    callbackurl: \"\", // Replace this with URL available on the WWW\n    public_key: \"public_key_from_your_merchant_dashboard\", // replace this with your own public key from your Merchant Dashboard\n    customization: {\n      theme: {\n        border_color: \"#4c4c4c\",\n        background_color: \"#61bc6e\",\n        button_color: \"#0000000\",\n      },\n      // payment_method: [\"card\", \"account\", \"transfer\", \"wallet\", 'ussd'],\n      // logo: \"logo_url || base64\",\n    },\n    tokenize: false,\n    planId: \"\"\n  };\n\n  PaymentDone(response) {\n    console.log('callback');\n    console.log(response); /*response of transaction*/\n  }\n  PaymentCancel(response) {\n    console.log('cancel');\n    console.log(response);\n  }\n\n  PaymentPayloadValidationError(error) {\n    console.log('payload validation error');\n    console.log(error);\n  }\n\n  cartTotalCost = () =\u003e {\n    let total = 0;\n    this.cart.map(item =\u003e {\n      total += item.price * item.qty;\n    });\n    this.cart_total_cost = total;\n    this.options.amount = total;\n\n  }\n\n  cartTotal = () =\u003e {\n    let total = 0;\n    this.cart.map( item =\u003e { total = total + Math.floor(item.qty);  });\n    this.cartTotalCost();\n    return total;\n  }\n\n  removeItem(product) {\n    this.cart = this.cart.filter( item =\u003e item.id != product.id);\n  }\n\n  updateCart(product, qty: number) {\n    this.cart.map( item =\u003e {\n        item.id == product.id ? item.qty = Math.floor(qty) : null;\n        return item;\n      }\n    );\n    this.cartTotalCost();\n\n  }\n}\n```\n\n```html\n\u003cstrong\u003eProduct mock data and product type\u003c/strong\u003e\n```\n\n```ts\nexport class Product {\n  id: number;\n  name: string;\n  description:string;\n  price:number;\n  qty:number\n}\n\n```\n\n```ts\nimport { Product } from './product';\n\nexport const PRODUCTS: Product[] = [\n  { id: 11, name: 'Product 1', price:4000, description:'A description of product 1',qty:1 },\n  { id: 12, name: 'Product 2', price:8000, description:'A description of product 2',qty:1 },\n];\n```\n\n\n```html\n\u003cstrong\u003eComponent Template\u003c/strong\u003e\n\u003cdiv class=\"center-wrapper\"\u003e\n  \u003cdiv class=\"content\"\u003e\n    \u003cnav\u003e\n      \u003ca href=\"#\" class=\"menu\"\u003eMenu\u003c/a\u003e\n      \u003ch1 class=\"logo\"\u003edemo Shop\u003c/h1\u003e\n      \u003cdiv class=\"icons\"\u003e\n        \u003ci class=\"fas fa-search\"\u003e\u003c/i\u003e\n        \u003ci class=\"fas fa-shopping-bag\"\u003e\u003c/i\u003e\u003cspan style=\"margin-left: 0.3rem;\"\u003e{{cartTotal()}}\u003c/span\u003e\n      \u003c/div\u003e\n    \u003c/nav\u003e\n    \u003cdiv class=\"top-bar\"\u003e\n      \u003ci class=\"fas fa-arrow-left\"\u003e\u003c/i\u003e\n      \u003cspan\u003eContinue shopping\u003c/span\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"bag\"\u003e\n      \u003cp class=\"bag-head\"\u003e\u003cspan style=\"text-transform: uppercase\"\u003eYour Bag\u003c/span\u003e - {{cartTotal()}} item\u003c/p\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"bag-product\" *ngFor=\"let product of cart\"\u003e\n      \u003cdiv class=\"description\"\u003e\n\n        \u003ch1\u003e{{product.name}}\u003c/h1\u003e\n        \u003cp class=\"description-text\"\u003e{{product.description}}.\u003c/p\u003e\n        \u003ch2\u003eN{{product.price}}\u003c/h2\u003e\n        \u003cdiv class=\"quantity-wrapper\"\u003e\n          \u003cdiv\u003e\n            \u003clabel for=\"quantity\" style=\"margin-right: 0.5rem;\"\u003eQuantity:\u003c/label\u003e\n            \u003cselect name=\"quantity\" style=\"margin-bottom: 1rem;\" (change)=\"updateCart(product, $event.target.value)\"\u003e\n              \u003coption value disabled\u003ePlease select\u003c/option\u003e\n              \u003coption value={{qty}} [selected]=\"qty == product.qty\" *ngFor=\"let qty of available_quantities\"\u003e{{qty}}\u003c/option\u003e\n\n            \u003c/select\u003e\n          \u003c/div\u003e\n          \u003cbutton class=\"btn-remove\" (click)=\"removeItem(product)\"\u003eRemove\u003c/button\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"bag-total\"\u003e\n      \u003cdiv class=\"subtotal\"\u003e\n        \u003cp class=\"small\"\u003eSubtotal:\u003c/p\u003e\n        \u003cp class=\"small\"\u003eN{{cart_total_cost}}\u003c/p\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"delivery\"\u003e\n        \u003cp class=\"small\"\u003eDelivery (Standard - 2 working days):\u003c/p\u003e\n        \u003cp class=\"small\"\u003eFree\u003c/p\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"total\"\u003e\n        \u003ch3\u003eTotal:\u003c/h3\u003e\n        \u003ch3\u003eN{{cart_total_cost}}\u003c/h3\u003e\n      \u003c/div\u003e\n      \u003cbutton class=\"btn-go-checkout\" seerbit-ng (callback)=\"PaymentDone($event)\" (close)=\"PaymentCancel($event)\"\n              [options]=\"options\"\u003e\n        \u003ci class=\"fas fa-lock\"\u003e\u003c/i\u003e\n        \u003cspan\u003ePay (Button as a Directive)\u003c/span\u003e\n      \u003c/button\u003e\n      \u003cseerbit-ng class=\"btn-go-checkout\" (callback)=\"PaymentDone($event)\" (close)=\"PaymentCancel($event)\" [options]=\"options\"\u003e\n        Pay (Button as a Component)\n      \u003c/seerbit-ng\u003e\n\n    \u003c/div\u003e\n\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n\n```html\n\u003cstrong\u003eComponent Template CSS\u003c/strong\u003e\n```\n\n```css\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nhtml,\nbody {\n  height: 100%;\n  font-size: 16px;\n  font-weight: 400;\n}\n\n.center-wrapper {\n  padding: 0.5rem;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  min-height: 100%;\n}\n\n.content {\n  margin: 0 auto;\n  max-width: 600px;\n  width: 500px;\n  border: 1px solid lemonchiffon;\n  background: white;\n}\n\nnav,\n.top-bar,\n.bag,\n.bag-total,\n.help {\n  padding: 0.5rem 1rem;\n}\n\nnav,\na,\n.btn-go-checkout {\n  color: white;\n}\n\nnav {\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: space-between;\n  align-items: center;\n  background: #03375E;\n}\n\na {\n  padding: 0.2rem 0.5rem;\n  border: 2px solid white;\n  text-decoration: none;\n}\n\n.logo {\n  font-family: \"Space Mono\", sans-serif;\n}\n\n.logo,\nbutton {\n  text-transform: uppercase;\n}\n\n.top-bar,\n.bag-head::after,\n.bag-total::before {\n  background: whitesmoke;\n}\n\n.bag-head::after,\n.bag-total::before,\n.btn-remove {\n  display: block;\n}\n\n.bag-head::after,\n.bag-total::before,\n.description-text{\n  margin: 0.5rem 0;\n}\n\n.bag-head::after,\n.bag-total::before {\n  content: \"\";\n  width: 100%;\n  height: 3px;\n}\n\n.muted {\n  color: grey;\n}\n\nh1 {\n  font-size: 1rem;\n}\n\nh2 {\n  font-size: .8rem;\n}\n\n.image {\n  width: 40%;\n}\n.image img.product-image {\n  max-width: 100%;\n}\n\n.description {\n  padding: 1rem;\n  width: 100%;\n}\n\nselect {\n  padding: 0.3rem;\n  width: 80px;\n}\n\nselect,\nbutton,\ninput[type=\"text\"] {\n  height: 20px;\n}\n\nbutton {\n  cursor: pointer;\n  width: 100px;\n  background: none;\n  border: 2px solid #0D6CB4;\n}\n\n.quantity-wrapper {\n  align-items: flex-start;\n  flex-flow: row wrap;\n  margin: 1rem 0 0.5rem;\n}\n\nselect {\n  width: 50px;\n  margin-right: 1rem;\n}\n\n.bag-product,\n.quantity-wrapper,\n.subtotal,\n.delivery,\n.total {\n  display: flex;\n  justify-content: space-between;\n}\n\n.subtotal,\n.delivery,\ninput[type=\"checkbox\"],\n.help {\n  margin-bottom: 0.5rem;\n}\n\n.total {\n  margin-bottom: 1rem;\n}\n\n\ninput[type=\"text\"],\n.btn-go-checkout {\n  font-size: 1rem;\n}\n\ninput[type=\"text\"] {\n  width: calc(100% - 100px - 1rem);\n  padding: 0.5rem;\n}\n\n.btn-go-checkout {\n  margin-top: 1rem;\n  width: 100%;\n  height: 40px;\n  background: #0D6CB4;\n  box-shadow: 0 3px 6px 2px gainsboro;\n}\n```\n\n## Website\n* https://seerbit.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseerbit%2Fseerbit-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fseerbit%2Fseerbit-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseerbit%2Fseerbit-angular/lists"}