{"_id":"@alexandru-paun/ngx-stripe","name":"@alexandru-paun/ngx-stripe","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@alexandru-paun/ngx-stripe","version":"1.0.0","repository":{"type":"git","url":"git+https://github.com/AlexandruPaun4Ness/ngx-stripe.git"},"keywords":["angular","stripe","payments"],"license":"MIT","scripts":{"ng":"ng","build:lib":"ng-packagr -p projects/ngx-stripe/ng-package.json","build:app":"ng build ngx-stripe-tester --prod","pack:lib":"cd dist/ngx-stripe && npm pack","package":"npm run build:lib && npm run pack:lib","publish":"npm publish dist/ngx-stripe/ngx-stripe-X.X.X.tgz","start":"ng serve ngx-stripe-tester","test":"ng test ngx-stripe","lint":"ng lint","format":"prettier --config ./.prettierrc --list-different --write \"projects/**/src/**/*{.ts,.html,.css,.scss}\"","e2e":"ng e2e","build:modern":"ng build --plugin ngx-build-modern --prod","build:modern:ngx-stripe-tester":"ng build --plugin ngx-build-modern --project ngx-stripe-tester --prod"},"private":false,"dependencies":{"@angular/animations":"^10.0.3","@angular/cdk":"^10.0.1","@angular/common":"^10.0.3","@angular/compiler":"^10.0.3","@angular/core":"^10.0.3","@angular/flex-layout":"^10.0.0-beta.32","@angular/forms":"^10.0.3","@angular/material":"^10.0.1","@angular/platform-browser":"^10.0.3","@angular/platform-browser-dynamic":"^10.0.3","@angular/pwa":"^0.1000.2","@angular/router":"^10.0.3","@angular/service-worker":"^10.0.3","@stripe/stripe-js":"^1.7.0","core-js":"^2.5.4","hammerjs":"^2.0.8","ngx-build-modern":"^1.1.10","ngx-build-plus":"^9.0.6","rxjs":"~6.6.0","tslib":"^1.10.0","zone.js":"~0.10.2"},"devDependencies":{"@angular-devkit/build-angular":"~0.1000.2","@angular-devkit/build-ng-packagr":"~0.1000.2","@angular/cli":"~10.0.2","@angular/compiler-cli":"~10.0.3","@angular/language-service":"~10.0.3","@types/jasmine":"~3.5.0","@types/jasminewd2":"~2.0.3","@types/node":"^12.11.1","codelyzer":"^5.1.2","jasmine-core":"~3.5.0","jasmine-spec-reporter":"~4.2.1","karma":"~4.3.0","karma-chrome-launcher":"~3.1.0","karma-coverage-istanbul-reporter":"~2.1.0","karma-jasmine":"~2.0.1","karma-jasmine-html-reporter":"^1.4.2","ng-packagr":"^10.0.1","prettier":"^2.0.5","protractor":"~5.4.3","ts-node":"~8.3.0","tsickle":">=0.37.1","tslint":"~5.18.0","typescript":"~3.9.6"},"gitHead":"4dbd4b618b001ada20c549ace60ae5da7fe06223","description":"An Angular 6+ wrapper for StripeJS elements","bugs":{"url":"https://github.com/AlexandruPaun4Ness/ngx-stripe/issues"},"homepage":"https://github.com/AlexandruPaun4Ness/ngx-stripe#readme","_id":"@alexandru-paun/ngx-stripe@1.0.0","_nodeVersion":"16.19.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-ylf23hXU/o68kPZ0EPu5+QfSwjnNnYvi/pqEe8J8A3Lz5PSuZUV4fmDU8M/xpLfFn4lKj8Jh2pvraIme9WqO9Q==","shasum":"e733f255e05c39fe5aed880fca8777b8b1c8994b","tarball":"https://registry.npmjs.org/@alexandru-paun/ngx-stripe/-/ngx-stripe-1.0.0.tgz","fileCount":107,"unpackedSize":218451,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCCH+W9JQOwVs//Vbtng6Wdc8y6HqXM1CV+p9TR5w85yAIgKyNbQjC3yqwK+mIXnND9r3vOudWIkWrWfD4vcfdk5ww="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSUf9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmomuA/+K2iPj48XmDTkv2REhmxTUK0nfcAgd/vF+yQpXWQeLA8ecIIX\r\nuM/YBZAetlOYxz3ZeHTDOxMcwgdlRxT+DOD8GQlUwigfh7aKcP14oc25rRBg\r\nRmyqPi2G2UL7tRlkp5VRg3HgQNZQV8Z22WgKsLexvh1kfqVvIEWyBC618BHI\r\nCpsmGi6NbcS8ebbj4mc1PB8GrQKVuPFqKiUJ/kQw/GuXzWnNbqKVJuwz6SvD\r\nXPUXdCAo887yW698WIURmlMhAAyKiJjy+XgGLtd98O9QuTabXxZl03ZGjpIi\r\nLXTTlRO/SRktMEePMS+5BSM1T2ZlJl7fxaxj1KgByvHRAz2nUAIHpkmabk4N\r\nG3FbLmlxGX5XmWqMkC6vZtl7aPpj0vuHHt2Z8LOYLw8TJw0Qn/AzxZssPltb\r\no1mupcDZ7kx2efVNzJPnrS7zDuYW4xjcdCKht0f5fLXd1otTWL0k2zjaQvIn\r\n6ITdfQd/+mx6fDSvE6Zp1iT9kJFqgvpn+6T3uoFxmNrSbvrV7RPRSbAIaFPD\r\nbAZWvSMT7p2vq1Tbt5CHFpRqhMSNOmOTlsvn5uEP1JUDTvDeq2UyXHl90Spv\r\nna1M2n9Kus3B1bui2B561b+/yINyB72vIApSwkxxYzQpLmg1QCfY5rLYMS1C\r\n12H4bc8QNaRMgLuhXuxio4m6DRfonh/jZaw=\r\n=6SbV\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alexandru-paun","email":"paunalexandrusilviu@gmail.com"},"directories":{},"maintainers":[{"name":"alexandru-paun","email":"paunalexandrusilviu@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-stripe_1.0.0_1682524157636_0.8584013134762922"},"_hasShrinkwrap":false}},"time":{"created":"2023-04-26T15:49:17.566Z","1.0.0":"2023-04-26T15:49:17.842Z","modified":"2023-04-26T15:49:18.025Z"},"maintainers":[{"name":"alexandru-paun","email":"paunalexandrusilviu@gmail.com"}],"description":"An Angular 6+ wrapper for StripeJS elements","homepage":"https://github.com/AlexandruPaun4Ness/ngx-stripe#readme","keywords":["angular","stripe","payments"],"repository":{"type":"git","url":"git+https://github.com/AlexandruPaun4Ness/ngx-stripe.git"},"bugs":{"url":"https://github.com/AlexandruPaun4Ness/ngx-stripe/issues"},"license":"MIT","readme":"An Angular 6+ wrapper for StripeJS elements\r\n\r\n[![version](https://img.shields.io/npm/v/ngx-stripe.svg)](https://www.npmjs.com/package/ngx-stripe)\r\n[![license](https://img.shields.io/npm/l/express.svg)](https://www.npmjs.com/package/ngx-stripe)\r\n\r\n

\r\n \r\n ngx-stripe\r\n

\r\n\r\nNgx Stripe is a thin wrapper around [`Stripe Elements`](https://stripe.com/docs/stripe-js). It allows adding Elements to any Angular app.\r\nThe [`StripeJS Reference`](https://stripe.com/docs/js) covers complete Elements customization details.\r\nYou can use Elements with any Stripe product to collect online payments. To find the right integration path for your business, explore [`Stripe Docs`](https://stripe.com/docs/stripe-js).\r\n\r\n- Learn how to use `ngx-stripe` on the **new** [docs site](https://richnologies.gitbook.io/ngx-stripe/) 🤓\r\n\r\n## Notice\r\n\r\nAfter reviewing the state of the art for React and Vue counterparts, some major changes are going to be introduced to align this project with [`Stripe Elements`](https://stripe.com/docs/stripe-js).\r\n\r\n1. `ngx-stripe` will no longer maintain its own interfaces. Instead, `@stripe/stripe-js` has been added as peer dependency. This will make the library easier to maintain and avoid mistakes.\r\n2. [`Stripe Service`](https://stripe.com/docs/js) has been updated with all the missing APIs from StripeJS\r\n3. All the missing [`Element Components`](https://stripe.com/docs/stripe-js/react#element-components) like IBAN, Ideal, FPX, ... have been added\r\n4. `Request Payment Button` now has full support\r\n5. Added [`Container Style`](https://stripe.com/docs/js/element/the_element_container) functionality support\r\n6. A [`Migration`](https://github.com/richnologies/ngx-stripe/blob/main/MIGRATION.md) guide has been added with details of what have changed\r\n7. The new version of library is compatible from Angular 6+ major versions. Check the `Installation` section to see how to install an older version.\r\n8. All documentation has been moved to a new [docs site](https://richnologies.gitbook.io/ngx-stripe/)\r\n\r\nIn order to ease the transition, we are naming the old version of the library `legacy` and we have created some `npm tags` to make it easy to install older versions.\r\n\r\n## Features\r\n\r\n- Lazy script loading\r\n- Element Components\r\n- Stripe Observable wrapper\r\n\r\n## Installation\r\n\r\n**Active Versions**\r\n\r\nTo install the last active version:\r\n\r\n```bash\r\n$ npm install ngx-stripe @stripe/stripe-js\r\n```\r\n\r\nTo install an specific version for an older Angular major, use the lts npm tags or check the table below to pick the right version, for example, for v8:\r\n\r\n```bash\r\n$ npm install ngx-stripe@v8-lts @stripe/stripe-js\r\n```\r\n\r\n**Legacy Versions**\r\n\r\nTo install some of the older versions of the library use the legacy npm tags or check the table below to pick the right version, for example, for v7:\r\n\r\n```bash\r\n$ npm install ngx-stripe@v7-legacy\r\n```\r\n\r\nChoose the version corresponding to your Angular version:\r\n\r\n| Angular | ngx-stripe (legacy) | ngx-stripe |\r\n| ------- | ------------------- | ----------------- |\r\n| 11 | **Not Available** | 11.x+ |\r\n| 10 | **Not Available** | 10.x+ |\r\n| 9 | v9-legacy / 9.0.x+ | v9-lts / 9.1.x+ |\r\n| 8 | v8-legacy / 7.4.4+ | v8-lts / 8.1.x+ |\r\n| 7 | v7-legacy / 7.x+ | v7-lts / 7.5.x+ |\r\n| 6 | v6-legacy / 0.6.x | v6-lts / 6.1.x+ |\r\n| 5 | 0.5.x or less | **Not Available** |\r\n| 4 | 0.4.x or less | **Not Available** |\r\n\r\n---\r\n\r\n## Using the library\r\n\r\nMost of the documentation has been moved to a new [docs site](https://richnologies.gitbook.io/ngx-stripe/). Only a very basic example has been left here:\r\n\r\nImport the `NgxStripeModule` into your application\r\n\r\nThe module takes the same parameters as the global Stripe object. The `APIKey` and the optional options to use Stripe connect\r\n\r\n- apiKey: string\r\n- options?: {\r\n stripeAccount?: string;\r\n }\r\n\r\n```typescript\r\nimport { BrowserModule } from '@angular/platform-browser';\r\nimport { NgModule } from '@angular/core';\r\n\r\nimport { AppComponent } from './app.component';\r\n\r\n// Import the library\r\nimport { NgxStripeModule } from 'ngx-stripe';\r\n\r\n@NgModule({\r\n declarations: [AppComponent],\r\n imports: [\r\n BrowserModule,\r\n ReactiveFormsModule,\r\n NgxStripeModule.forRoot('***your-stripe-publishable-key***'),\r\n LibraryModule\r\n ],\r\n providers: [],\r\n bootstrap: [AppComponent]\r\n})\r\nexport class AppModule {}\r\n```\r\n\r\n## Card Element Component\r\n\r\nOnce the module has been imported, you can collect credit card details using the ngx-stripe-card component.\r\n\r\nThen you can use the Stripe Service, which is basically an Obseravble wrapper around the stripejs object, to use that information. In this example we use it to create a token, but it can be use to confirm a Payment Intent, Setup Intent, etc...\r\n\r\nPlease check the [docs site](https://richnologies.gitbook.io/ngx-stripe/) to see a complete set of Stripe Element Components available and the full API of the Stripe Service.\r\n\r\n// stripe.html\r\n\r\n```xml\r\n
\r\n \r\n \r\n \r\n\r\n```\r\n\r\n```typescript\r\nimport { Component, OnInit, ViewChild } from '@angular/core';\r\nimport { FormGroup, FormBuilder, Validators } from '@angular/forms';\r\n\r\nimport { StripeService, StripeCardComponent } from 'ngx-stripe';\r\nimport {\r\n StripeCardElementOptions,\r\n StripeElementsOptions\r\n} from '@stripe/stripe-js';\r\n\r\n@Component({\r\n selector: 'app-create-token',\r\n templateUrl: 'stripe.html'\r\n})\r\nexport class StripeCreateTokenComponent implements OnInit {\r\n @ViewChild(StripeCardComponent) card: StripeCardComponent;\r\n\r\n cardOptions: StripeCardElementOptions = {\r\n style: {\r\n base: {\r\n iconColor: '#666EE8',\r\n color: '#31325F',\r\n fontWeight: '300',\r\n fontFamily: '\"Helvetica Neue\", Helvetica, sans-serif',\r\n fontSize: '18px',\r\n '::placeholder': {\r\n color: '#CFD7E0'\r\n }\r\n }\r\n }\r\n };\r\n\r\n elementsOptions: StripeElementsOptions = {\r\n locale: 'es'\r\n };\r\n\r\n stripeTest: FormGroup;\r\n\r\n constructor(private fb: FormBuilder, private stripeService: StripeService) {}\r\n\r\n ngOnInit(): void {\r\n this.stripeTest = this.fb.group({\r\n name: ['', [Validators.required]]\r\n });\r\n }\r\n\r\n createToken(): void {\r\n const name = this.stripeTest.get('name').value;\r\n this.stripeService\r\n .createToken(this.card.element, { name })\r\n .subscribe((result) => {\r\n if (result.token) {\r\n // Use the token\r\n console.log(result.token.id);\r\n } else if (result.error) {\r\n // Error creating the token\r\n console.log(result.error.message);\r\n }\r\n });\r\n }\r\n}\r\n```\r\n\r\n## License\r\n\r\nMIT © [Ricardo Sánchez Gregorio](mailto:me@richnologies.io)\r\n","readmeFilename":"README.md"}