{"id":16497603,"url":"https://github.com/raisiqueira/ng-input-payments","last_synced_at":"2026-05-11T08:12:01.770Z","repository":{"id":57310995,"uuid":"319442536","full_name":"raisiqueira/ng-input-payments","owner":"raisiqueira","description":"Angular Directive to help with payment card input fields.","archived":false,"fork":false,"pushed_at":"2021-02-09T20:30:53.000Z","size":662,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-05-02T05:34:04.876Z","etag":null,"topics":["angular","angular-directives","credit-card","reactive-forms"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/ngx-payment-inputs","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/raisiqueira.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"ko_fi":"raisiqueira"}},"created_at":"2020-12-07T20:57:53.000Z","updated_at":"2021-02-09T20:30:55.000Z","dependencies_parsed_at":"2022-09-07T10:20:21.367Z","dependency_job_id":null,"html_url":"https://github.com/raisiqueira/ng-input-payments","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raisiqueira%2Fng-input-payments","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raisiqueira%2Fng-input-payments/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raisiqueira%2Fng-input-payments/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raisiqueira%2Fng-input-payments/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/raisiqueira","download_url":"https://codeload.github.com/raisiqueira/ng-input-payments/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241381519,"owners_count":19953749,"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","angular-directives","credit-card","reactive-forms"],"created_at":"2024-10-11T14:44:52.006Z","updated_at":"2026-05-11T08:11:56.719Z","avatar_url":"https://github.com/raisiqueira.png","language":"TypeScript","funding_links":["https://ko-fi.com/raisiqueira"],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003engx-payment-inputs\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\nA set of Angular Directives to validate and format credit card inputs.\n\u003c/p\u003e\n\n![npm](https://img.shields.io/npm/v/ngx-payment-inputs?color=%23076e95) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/ngx-payment-inputs?color=%23076e95) ![npm](https://img.shields.io/npm/dw/ngx-payment-inputs?color=%23076e95)\n\n## Install\n\nBefore install the library, check if your Angular version are \u003e=10.0.0\n\nNPM\n\n```bash\nnpm i --save ngx-payment-inputs\n```\n\nYarn\n\n```bash\nyarn add ngx-payment-inputs\n```\n\n## Usage\n\nAre you lazy? Go to [Public API spec](#public-apis).\n\nImport the main module into your feature module (example.: `app.module.ts`):\n\n```diff\nimport { PaymentInputsModule } from 'ngx-payment-inputs';\n\n// rest of code...\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [\n      BrowserModule,\n      ReactiveFormsModule,\n+     PaymentInputsModule,\n    ],\n  providers: [],\n  bootstrap: [AppComponent],\n})\nexport class AppModule {}\n```\n\nNow, go to your formGroup (or FormControl), and create all controls necessaries for usage (card number, card expiry date, card cvc).\n\n```ts\n// your feature component\n// rest of code...\n\n  ngOnInit(): void {\n    this.form = this.fb.group({\n      cardNumber: [null],\n      cardCvc: [null],\n      cardValidate: [null],\n    });\n  }\n\n  // rest of code...\n```\n\nInto your HTML, add `jstCardNumber`, `jstCardExpireDate` and `jstCardCvv` for respectives inputs.\n\n```html\n\u003cform [formGroup]=\"form\"\u003e\n  \u003cdiv\u003e\n    \u003clabel for=\"card-number\"\u003eCard Number\u003c/label\u003e\n    \u003cinput id=\"card-number\" formControlName=\"cardNumber\" jstCardNumber /\u003e\n  \u003c/div\u003e\n\n  \u003cdiv\u003e\n    \u003clabel for=\"card-date\"\u003eCard Date\u003c/label\u003e\n    \u003cinput id=\"card-date\" formControlName=\"cardValidate\" jstCardExpireDate /\u003e\n  \u003c/div\u003e\n\n  \u003cdiv\u003e\n    \u003clabel for=\"card-cvv\"\u003eCard CVV\u003c/label\u003e\n    \u003cinput id=\"card-cvv\" formControlName=\"cardCvc\" jstCardCvv /\u003e\n  \u003c/div\u003e\n\u003c/form\u003e\n```\n\n## Using custom validators\n\n`ngx-payment-inputs` provides three custom validators to help to show errors form all credit card inputs.\n\n- `PaymentInputValidators.cardNumber()`\n- `PaymentInputValidators.expiryDate()`\n- `PaymentInputValidators.CVC()`\n\nExample of usage:\n\n```ts\n// rest of code\nimport { CardTypeService, PaymentInputValidators } from 'ngx-payment-inputs';\n// ...\n\n  ngOnInit(): void {\n    this.form = this.fb.group({\n      cardNumber: [null, [PaymentInputValidators.cardNumber()],\n      cardCvc: [null, [PaymentInputValidators.expiryDate()],\n      cardValidate: [null, [PaymentInputValidators.CVC()],\n    });\n  }\n```\n\n## Hacking your forms with `ngx-payment-inputs` service\n\nThis library not provide a component (yet 😏) with all credit card inputs, instead of this, provide three Angular Directives that made all job for you, and let the developer free to customize the input, but you can improve the user experience showing the credit card brand, for example.\n\nTo help the developer, we provide a service that exposes the card type as observable, see the below example:\n\n```ts\n// rest of code\nimport { CardTypeService } from 'ngx-payment-inputs';\n\n@Component({\n  selector: 'jst-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.scss'],\n})\nexport class AppComponent implements OnInit {\n  type: string;\n\n  constructor(private cardTypeService: CardTypeService) {}\n\n  ngOnInit(): void {\n    this.cardTypeService.cardType.subscribe((type) =\u003e (this.type = type.type));\n  }\n}\n```\n\nWith this, you can show a credit card brand into your HTML based into type returned from our service.\n\nSee all credit card types (all values are _lowercase_):\n\n- visa\n- mastercard\n- amex\n- dinersclub\n- discover\n- jcb\n- unionpay\n- maestro\n- elo\n- hipercard\n\n## Public APIs\n\nList with all public api exposed to use or extends:\n\n| API                    | Type                      | Description                                                                            |\n| ---------------------- | ------------------------- | -------------------------------------------------------------------------------------- |\n| PaymentInputsModule    | Module                    | Module for Payment Inputs Directives and services                                      |\n| jstCardNumber          | Directive                 | Formatter for card. number                                                             |\n| jstCardExpireDate      | Directive                 | Formatter for card expiry date .                                                       |\n| jstCardCvv             | Directive                 | Formatter for card cvc.                                                                |\n| CardTypeService        | Service                   | Service with all card input refs and card type.                                        |\n| CardTypesModel         | Interface/Type definition | Type definition for Card Type list (internal list used for identify a card by number). |\n| PaymentInputValidators | Class                     | Class with validators for: Card number, card expiry date and card CVC.                 |\n\n## Contributing\n\nFork the project and help us to improve the project.\n\nInstall dependencies with NPM: `npm i`. The project are into _packages_ folder.\n\nTo build the project, run `npm run build:payment-inputs`, the artifact goes to `dist/packages` folder.\n\n### Running unit tests\n\n\u003e WIP 🚧\n\nRun `nx test payment-inputs` to execute the unit tests.\n\n## License\n\nMIT @ Rai Siqueira\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraisiqueira%2Fng-input-payments","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fraisiqueira%2Fng-input-payments","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraisiqueira%2Fng-input-payments/lists"}