{"_id":"@croeminc/croem-card-widget","_rev":"5-4fbda444bd2cf2c3346fa913195058af","name":"@croeminc/croem-card-widget","dist-tags":{"latest":"0.8.0"},"versions":{"0.6.0-beta.2":{"name":"@croeminc/croem-card-widget","version":"0.6.0-beta.2","keywords":["angular","credit-card","payment-gateway","payment","widget","validation","tokenization"],"author":{"name":"Croem Inc."},"license":"MIT","_id":"@croeminc/croem-card-widget@0.6.0-beta.2","maintainers":[{"name":"croeminc","email":"croempak@gmail.com"}],"dist":{"shasum":"ded41f74d6c4276c88e6055b705a012226c42265","tarball":"https://registry.npmjs.org/@croeminc/croem-card-widget/-/croem-card-widget-0.6.0-beta.2.tgz","fileCount":44,"integrity":"sha512-Q4MZZQ/BFJ1Glv+c6LnAfhyOydjieDlIQQ6uGd8A4WgDuBK6j/XlFuIKi1m9/B2hrP4Rw97RgEtiEhNmSrI18w==","signatures":[{"sig":"MEUCIQCTgfb8IO1CaHpvKR+e+vBDEgef0k156xCthyUQ495BbQIgD6ElWinScYNkzjA+TlXyRQmQxrzedHD26rjN2kWh6VI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":613156},"es2020":"fesm2020/croeminc-croem-card-widget.mjs","module":"fesm2015/croeminc-croem-card-widget.mjs","esm2020":"esm2020/croeminc-croem-card-widget.mjs","exports":{".":{"node":"./fesm2015/croeminc-croem-card-widget.mjs","types":"./index.d.ts","es2015":"./fesm2015/croeminc-croem-card-widget.mjs","es2020":"./fesm2020/croeminc-croem-card-widget.mjs","default":"./fesm2020/croeminc-croem-card-widget.mjs","esm2020":"./esm2020/croeminc-croem-card-widget.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"2008b28332178b6fb98f9bc598fec3d60d10f017","typings":"index.d.ts","_npmUser":{"name":"croeminc","email":"croempak@gmail.com"},"fesm2015":"fesm2015/croeminc-croem-card-widget.mjs","fesm2020":"fesm2020/croeminc-croem-card-widget.mjs","repository":{"url":"git+https://croeminc@dev.azure.com/croeminc/AMP/_git/AMP.Web","type":"git"},"_npmVersion":"10.9.2","description":"An Angular credit card input validation, tokenization, and payment processing widget component.","directories":{},"sideEffects":false,"_nodeVersion":"22.17.0","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0","card-validator":"^9.1.0","@angular/common":"^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0"},"_npmOperationalInternal":{"tmp":"tmp/croem-card-widget_0.6.0-beta.2_1783510907583_0.05207259983838486","host":"s3://npm-registry-packages-npm-production"}},"0.7.0":{"name":"@croeminc/croem-card-widget","version":"0.7.0","keywords":["angular","credit-card","payment-gateway","payment","widget","validation","tokenization"],"author":{"name":"Croem Inc."},"license":"MIT","_id":"@croeminc/croem-card-widget@0.7.0","maintainers":[{"name":"haiderali777","email":"haiderali777@hotmail.com"},{"name":"amamrahmed","email":"ammar.ahmad@croeminc.com"},{"name":"uzairhaider","email":"Uzair.Haider@croeminc.com"},{"name":"jabranshafique999","email":"Jabran.Shafique@croeminc.com"},{"name":"jabranshafique","email":"jabranshafique74@gmail.com"},{"name":"mirza_croem","email":"MirzaJahangeer786@gmail.com"},{"name":"croeminc","email":"croempak@gmail.com"}],"dist":{"shasum":"56210217da1b4a8986f4ba416489d374e1e4a01d","tarball":"https://registry.npmjs.org/@croeminc/croem-card-widget/-/croem-card-widget-0.7.0.tgz","fileCount":44,"integrity":"sha512-vuCoSE5mNOqZVCaE4yxIMZtVBBXbLjrZbLPlCkOuF8ol0FOwQg5HDolGi+63f9YwGjZsvIFbsjgVSqDLzZU0xg==","signatures":[{"sig":"MEUCIQCsLSxH6FNbkaNUFVuqhHaG8dObYQYsb6CKmfp0Mgu2yAIgaI8fHK/JHZAjMC1X3rMvBBpfDMp1hjVrqi4BapddlHY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":614941},"es2020":"fesm2020/croeminc-croem-card-widget.mjs","module":"fesm2015/croeminc-croem-card-widget.mjs","esm2020":"esm2020/croeminc-croem-card-widget.mjs","exports":{".":{"node":"./fesm2015/croeminc-croem-card-widget.mjs","types":"./index.d.ts","es2015":"./fesm2015/croeminc-croem-card-widget.mjs","es2020":"./fesm2020/croeminc-croem-card-widget.mjs","default":"./fesm2020/croeminc-croem-card-widget.mjs","esm2020":"./esm2020/croeminc-croem-card-widget.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"e2d8f21f9e7c23ac0b42dd00388d94e5fdfe4795","typings":"index.d.ts","_npmUser":{"name":"croeminc","email":"croempak@gmail.com"},"fesm2015":"fesm2015/croeminc-croem-card-widget.mjs","fesm2020":"fesm2020/croeminc-croem-card-widget.mjs","repository":{"url":"git+https://croeminc@dev.azure.com/croeminc/AMP/_git/AMP.Web","type":"git"},"_npmVersion":"10.9.2","description":"An Angular credit card input validation, tokenization, and payment processing widget component.","directories":{},"sideEffects":false,"_nodeVersion":"22.17.0","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0","card-validator":"^9.1.0","@angular/common":"^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0"},"_npmOperationalInternal":{"tmp":"tmp/croem-card-widget_0.7.0_1784269835026_0.5831863143658678","host":"s3://npm-registry-packages-npm-production"}},"0.8.0":{"name":"@croeminc/croem-card-widget","version":"0.8.0","description":"An Angular credit card input validation, tokenization, and payment processing widget component.","keywords":["angular","credit-card","payment-gateway","payment","widget","validation","tokenization"],"author":{"name":"Croem Inc."},"license":"MIT","repository":{"type":"git","url":"git+https://croeminc@dev.azure.com/croeminc/AMP/_git/AMP.Web"},"peerDependencies":{"@angular/common":">=12.0.0","@angular/core":">=12.0.0","@angular/forms":">=12.0.0","card-validator":"^8.0.0 || ^9.0.0"},"dependencies":{"tslib":"^2.3.0"},"sideEffects":false,"module":"fesm2015/croeminc-croem-card-widget.mjs","es2020":"fesm2020/croeminc-croem-card-widget.mjs","esm2020":"esm2020/croeminc-croem-card-widget.mjs","fesm2020":"fesm2020/croeminc-croem-card-widget.mjs","fesm2015":"fesm2015/croeminc-croem-card-widget.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2020":"./esm2020/croeminc-croem-card-widget.mjs","es2020":"./fesm2020/croeminc-croem-card-widget.mjs","es2015":"./fesm2015/croeminc-croem-card-widget.mjs","node":"./fesm2015/croeminc-croem-card-widget.mjs","default":"./fesm2020/croeminc-croem-card-widget.mjs"}},"_id":"@croeminc/croem-card-widget@0.8.0","gitHead":"e2d8f21f9e7c23ac0b42dd00388d94e5fdfe4795","_nodeVersion":"22.17.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-5mYSL+eRkivKpOBrehKqBNwwzfMiOEd0g8fvqwDgP1tIqHtViNJMISDIN6dk3VdA6V7dWSXHIrhHwpMJzEX/5g==","shasum":"b99162698a60eb5d8238768c5165e7228e553a63","tarball":"https://registry.npmjs.org/@croeminc/croem-card-widget/-/croem-card-widget-0.8.0.tgz","fileCount":44,"unpackedSize":617804,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQC/CygyW5yEY1Oe0QvlxbCo8uDMidvBhDSJNvdLMZ222QIhAJjDUR7C6fizAyJMGXcNbzRP2qfPcAiZDxnWqkokOqUC"}]},"_npmUser":{"name":"croeminc","email":"croempak@gmail.com"},"directories":{},"maintainers":[{"name":"haiderali777","email":"haiderali777@hotmail.com"},{"name":"amamrahmed","email":"ammar.ahmad@croeminc.com"},{"name":"uzairhaider","email":"Uzair.Haider@croeminc.com"},{"name":"jabranshafique999","email":"Jabran.Shafique@croeminc.com"},{"name":"jabranshafique","email":"jabranshafique74@gmail.com"},{"name":"mirza_croem","email":"MirzaJahangeer786@gmail.com"},{"name":"croeminc","email":"croempak@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/croem-card-widget_0.8.0_1784620692806_0.7220927047903414"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-08T11:41:47.474Z","modified":"2026-07-21T07:58:13.117Z","0.6.0-beta.2":"2026-07-08T11:41:47.739Z","0.7.0":"2026-07-17T06:30:35.171Z","0.8.0":"2026-07-21T07:58:12.945Z"},"author":{"name":"Croem Inc."},"license":"MIT","keywords":["angular","credit-card","payment-gateway","payment","widget","validation","tokenization"],"repository":{"type":"git","url":"git+https://croeminc@dev.azure.com/croeminc/AMP/_git/AMP.Web"},"description":"An Angular credit card input validation, tokenization, and payment processing widget component.","maintainers":[{"name":"haiderali777","email":"haiderali777@hotmail.com"},{"name":"amamrahmed","email":"ammar.ahmad@croeminc.com"},{"name":"uzairhaider","email":"Uzair.Haider@croeminc.com"},{"name":"jabranshafique999","email":"Jabran.Shafique@croeminc.com"},{"name":"jabranshafique","email":"jabranshafique74@gmail.com"},{"name":"mirza_croem","email":"MirzaJahangeer786@gmail.com"},{"name":"croeminc","email":"croempak@gmail.com"}],"readme":"# @croem/croem-card-widget\n\nAn Angular UI library designed to provide a secure, validation-compliant, and responsive card payment interface. It facilitates card tokenization, card detail management, and transaction execution.\n\n---\n\n## Features\n\n- **Robust Card Validation**: Uses advanced validation rules for card numbers, expiration dates, and CVVs.\n- **AMP Theme Compliant**: Clean, modern, responsive styling designed to integrate with the AMP ecosystem.\n- **Multiple Integration Modes**:\n  - **Add Card Widget**: Collect card details securely to generate tokenized credentials.\n  - **Update Card Widget**: Manage and update existing tokenized cards.\n  - **Payment Widget**: Execute sales or pre-authorization transactions directly using card tokens.\n\n---\n\n## Installation\n\nInstall the package via npm:\n\n```bash\nnpm install @croem/croem-card-widget\n```\n\n### Dependencies\n\nEnsure your project has the required peer dependencies installed:\n\n```bash\nnpm install card-validator\n```\n\n---\n\n## Setup & Usage\n\n### 1. Import the Module\n\nImport `CroemCardWidgetModule` into your Angular application module:\n\n```typescript\nimport { NgModule } from '@angular/core';\nimport { CroemCardWidgetModule } from '@croem/croem-card-widget';\n\n@NgModule({\n  imports: [\n    CroemCardWidgetModule\n  ]\n})\nexport class AppModule { }\n```\n\n### 2. Available Components\n\nThe library provides three main components for different stages of the payment lifecycle:\n\n#### A. Add Card Component (`croem-add-card-widget`)\nUsed for collecting new card details and generating a secure payment token.\n\n**HTML Template:**\n```html\n<croem-add-card-widget \n  [inputParamsForWidget]=\"inputParams\" \n  (fieldResponseEmitter)=\"onFormFieldsReceived($event)\" \n  (widgetResponseEmitter)=\"onApiResponse($event)\" \n  (HandleError)=\"onError($event)\">\n</croem-add-card-widget>\n```\n\n#### B. Update Card Component (`croem-update-card-widget`)\nUsed for editing details of an already registered card token.\n\n**HTML Template:**\n```html\n<croem-update-card-widget \n  [inputParamsForWidgetForUpdate]=\"inputParams\" \n  (fieldResponseEmitter)=\"onFormFieldsReceived($event)\" \n  (widgetResponseEmitter)=\"onApiResponse($event)\" \n  (HandleError)=\"onError($event)\">\n</croem-update-card-widget>\n```\n\n#### C. Payment Card Component (`croem-payment-card-widget`)\nUsed for processing transactions directly using a card token.\n\n**HTML Template:**\n```html\n<croem-payment-card-widget \n  [inputParamsForWidgetForPayment]=\"inputParams\" \n  (fieldResponseEmitter)=\"onFormFieldsReceived($event)\" \n  (widgetResponseEmitter)=\"onApiResponse($event)\" \n  (HandleError)=\"onError($event)\">\n</croem-payment-card-widget>\n```\n\n---\n\n## Configuration API\n\nAll widgets accept configuration parameters through their respective input bindings.\n\n### Input Parameters (`InputParamsForWidget`)\n\n| Parameter | Type | Required | Description |\n| :--- | :--- | :--- | :--- |\n| `APIKey` | `string` | Yes | The merchant API key. |\n| `Token` | `string` | No | Card account token (required for Update & Payment modes). |\n| `Culture` | `string` | No | Language locale code (e.g. `'en'`, `'es'`). Defaults to `'en'`. |\n| `IsSale` | `boolean` | No | Set to `true` for sale/charge transactions; `false` for authorizations. |\n| `DtrUrl` | `string` | Yes | The Gateway DTR service endpoint URL. |\n| `Keys` | `object` | Yes | DSA Encryption Keys (`EncKey1` and `EncKey2`). |\n| `Mode` | `CardMode` | Yes | Component interaction mode (`CardMode.Add`, `CardMode.Edit`, `CardMode.Show`). |\n\n### Event Emitters\n\n- **`fieldResponseEmitter`**: Fires when form validation status or input controls change.\n- **`widgetResponseEmitter`**: Fires on successful communication with the gateway API, returning the response payload.\n- **`HandleError`**: Fires when an error occurs during token validation or transaction processing.\n\n---\n\n## License\n\nThis project is licensed under the MIT License.","readmeFilename":"README.md"}