{"_id":"@decahedron/ngx-stripe","_rev":"5-7a1b2d20aa33dd7e5e7b396226c7abc2","name":"@decahedron/ngx-stripe","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@decahedron/ngx-stripe","version":"1.0.0","description":"Angular 2+ wrapper for StripeJS","main":"./bundles/ngx-stripe.umd.js","module":"./modules/ngx-stripe.es5.js","es2015":"./modules/ngx-stripe.js","scripts":{"build":"node build.js","test":"karma start","pack-lib":"npm pack ./dist","publish-lib":"npm publish ./dist","compodoc":"compodoc -p tsconfig.json","compodoc-serve":"compodoc -s"},"typings":"./index.d.ts","author":"","repository":{"type":"git","url":"git+https://github.com/richnologies/ngx-stripe.git"},"bugs":{"url":"https://github.com/richnologies/ngx-stripe/issues"},"homepage":"https://github.com/richnologies/ngx-stripe","keywords":["angular","javascript","typescript"],"license":"MIT","peerDependencies":{"@angular/common":"^6.0.0-beta.6","@angular/core":"^6.0.0-beta.6"},"devDependencies":{"@angular/animations":"^6.0.0-beta.6","@angular/common":"^6.0.0-beta.6","@angular/compiler":"^6.0.0-beta.6","@angular/compiler-cli":"^6.0.0-beta.6","@angular/core":"^6.0.0-beta.6","@angular/platform-browser":"^6.0.0-beta.6","@angular/platform-browser-dynamic":"^6.0.0-beta.6","@angular/platform-server":"^6.0.0-beta.6","@compodoc/compodoc":"1.0.0-beta.10","@types/jasmine":"2.5.52","@types/node":"8.0.1","chalk":"1.1.3","codelyzer":"3.1.1","core-js":"2.4.1","jasmine-core":"2.6.4","karma":"1.7.0","karma-chrome-launcher":"2.1.1","karma-jasmine":"1.1.0","karma-sourcemap-loader":"0.3.7","karma-spec-reporter":"0.0.31","karma-webpack":"2.0.3","reflect-metadata":"0.1.10","rollup":"0.43.0","rollup-plugin-node-resolve":"3.0.0","rxjs":"6.0.0-beta.0","shelljs":"0.7.8","sorcery":"0.10.0","source-map-loader":"0.2.1","ts-loader":"2.1.0","tslint":"5.4.3","typescript":"^2.7.2","uglify-js":"2.8.29","webpack":"3.0.0","yargs":"8.0.2","zone.js":"0.8.12"},"prettier":{"singleQuote":true},"_id":"@decahedron/ngx-stripe@1.0.0","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"phroggyy","email":"leo@decahedron.io"},"dist":{"integrity":"sha512-QmEXnnCKpXXrE3/kawzJv/SqZVdM8ggPYiIuWJbg+c8VpzpMG5hZeJj81+mWRj/zJ2Q8neIrzD0dq4L/kfADeA==","shasum":"361cf5b1e36c8733777bd758f833844f277a6c7e","tarball":"https://registry.npmjs.org/@decahedron/ngx-stripe/-/ngx-stripe-1.0.0.tgz","fileCount":27,"unpackedSize":163282,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB1Uu5k/Umr/j2XTdHKJDzPlOZYTWidXuZ85koybxpuWAiEAr9Bm1zd3un8LcNBn7qRfxwrEsCcTtmMx97bybS0bBv8="}]},"maintainers":[{"name":"decabot","email":"services@decahedron.io"},{"name":"phroggyy","email":"leo@decahedron.io"},{"name":"thomasruiz","email":"contact@thomasruiz.eu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-stripe_1.0.0_1521984581884_0.7187584712493791"},"_hasShrinkwrap":false},"1.0.1":{"name":"@decahedron/ngx-stripe","version":"1.0.1","description":"Angular 2+ wrapper for StripeJS","main":"./bundles/ngx-stripe.umd.js","module":"./modules/ngx-stripe.es5.js","es2015":"./modules/ngx-stripe.js","scripts":{"build":"node build.js","test":"karma start","pack-lib":"npm pack ./dist","publish-lib":"npm publish ./dist --access public","compodoc":"compodoc -p tsconfig.json","compodoc-serve":"compodoc -s"},"typings":"./index.d.ts","author":"","repository":{"type":"git","url":"git+https://github.com/richnologies/ngx-stripe.git"},"bugs":{"url":"https://github.com/richnologies/ngx-stripe/issues"},"homepage":"https://github.com/richnologies/ngx-stripe","keywords":["angular","javascript","typescript"],"license":"MIT","peerDependencies":{"@angular/common":"^6.0.0-beta.6","@angular/core":"^6.0.0-beta.6"},"devDependencies":{"@angular/animations":"^6.0.0-beta.6","@angular/common":"^6.0.0-beta.6","@angular/compiler":"^6.0.0-beta.6","@angular/compiler-cli":"^6.0.0-beta.6","@angular/core":"^6.0.0-beta.6","@angular/platform-browser":"^6.0.0-beta.6","@angular/platform-browser-dynamic":"^6.0.0-beta.6","@angular/platform-server":"^6.0.0-beta.6","@compodoc/compodoc":"1.0.0-beta.10","@types/jasmine":"2.5.52","@types/node":"8.0.1","chalk":"1.1.3","codelyzer":"3.1.1","core-js":"2.4.1","jasmine-core":"2.6.4","karma":"1.7.0","karma-chrome-launcher":"2.1.1","karma-jasmine":"1.1.0","karma-sourcemap-loader":"0.3.7","karma-spec-reporter":"0.0.31","karma-webpack":"2.0.3","reflect-metadata":"0.1.10","rollup":"0.43.0","rollup-plugin-node-resolve":"3.0.0","rxjs":"6.0.0-beta.0","shelljs":"0.7.8","sorcery":"0.10.0","source-map-loader":"0.2.1","ts-loader":"2.1.0","tslint":"5.4.3","typescript":"^2.7.2","uglify-js":"2.8.29","webpack":"3.0.0","yargs":"8.0.2","zone.js":"0.8.12"},"prettier":{"singleQuote":true},"_id":"@decahedron/ngx-stripe@1.0.1","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"phroggyy","email":"leo@decahedron.io"},"dist":{"integrity":"sha512-LGTXweGhv0UzZJ67wL2lzTekdZQhWjHr9hYhHPOvbDQFDeWYUQwVfGBilDofkWTHSspi779aylMqyS0CXmjGug==","shasum":"ca7d2d1dcae0bb9048c556b0f6920f4ae3cacf4f","tarball":"https://registry.npmjs.org/@decahedron/ngx-stripe/-/ngx-stripe-1.0.1.tgz","fileCount":27,"unpackedSize":163207,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD9veVOPpOMjLTnIHm6oeZjNM9RKCJHdWT2Cq+pQbBzEgIhALqEhmU4K6xHHCWpLSorhChnbc4CrPqvvnRfs61Sqw8U"}]},"maintainers":[{"name":"decabot","email":"services@decahedron.io"},{"name":"phroggyy","email":"leo@decahedron.io"},{"name":"thomasruiz","email":"contact@thomasruiz.eu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-stripe_1.0.1_1522147619707_0.6936792720642304"},"_hasShrinkwrap":false},"1.0.2":{"name":"@decahedron/ngx-stripe","version":"1.0.2","description":"Angular 2+ wrapper for StripeJS","main":"./bundles/ngx-stripe.js","module":"./modules/ngx-stripe.es5.js","es2015":"./modules/ngx-stripe.js","scripts":{"build":"node build.js","test":"karma start","pack-lib":"npm pack ./dist","publish-lib":"npm publish ./dist --access public","compodoc":"compodoc -p tsconfig.json","compodoc-serve":"compodoc -s"},"typings":"./index.d.ts","author":"","repository":{"type":"git","url":"git+https://github.com/richnologies/ngx-stripe.git"},"bugs":{"url":"https://github.com/richnologies/ngx-stripe/issues"},"homepage":"https://github.com/richnologies/ngx-stripe","keywords":["angular","javascript","typescript"],"license":"MIT","peerDependencies":{"@angular/common":"^6.0.0-rc.0","@angular/core":"^6.0.0-rc.0"},"devDependencies":{"@angular/animations":"^6.0.0-rc.0","@angular/common":"^6.0.0-rc.0","@angular/compiler":"^6.0.0-rc.0","@angular/compiler-cli":"^6.0.0-rc.0","@angular/core":"^6.0.0-rc.0","@angular/platform-browser":"^6.0.0-rc.0","@angular/platform-browser-dynamic":"^6.0.0-rc.0","@angular/platform-server":"^6.0.0-beta.rc.0","@compodoc/compodoc":"1.0.0-beta.10","@types/jasmine":"2.5.52","@types/node":"8.0.1","chalk":"1.1.3","codelyzer":"3.1.1","core-js":"2.4.1","jasmine-core":"2.6.4","karma":"1.7.0","karma-chrome-launcher":"2.1.1","karma-jasmine":"1.1.0","karma-sourcemap-loader":"0.3.7","karma-spec-reporter":"0.0.31","karma-webpack":"2.0.3","reflect-metadata":"0.1.10","rollup":"0.43.0","rollup-plugin-node-resolve":"3.0.0","rxjs":"6.0.0-beta.0","shelljs":"0.7.8","sorcery":"0.10.0","source-map-loader":"0.2.1","ts-loader":"2.1.0","tslint":"5.4.3","typescript":"^2.7.2","uglify-js":"2.8.29","webpack":"3.0.0","yargs":"8.0.2","zone.js":"0.8.12"},"prettier":{"singleQuote":true},"_id":"@decahedron/ngx-stripe@1.0.2","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"phroggyy","email":"leo@decahedron.io"},"dist":{"integrity":"sha512-iUj3PwjGG9x5Blct5CEgs3dwj2CLnG09t7C+364nbfX5AOgFrXwyUkb/Y7uV/x7jbjjTSKoOUTrgzMLCpg1vZg==","shasum":"ce445ae6f2c7129d8862cbc353bf5d109c7ea4d6","tarball":"https://registry.npmjs.org/@decahedron/ngx-stripe/-/ngx-stripe-1.0.2.tgz","fileCount":27,"unpackedSize":163184,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4Z2LX7a+it7IRBhRnqJl5xKUyrNPu6PkeaHU4pYFyEAIgU2O9l5H2guWM24K+IAgJIGWXqLlWpltCkbEHktppQnQ="}]},"maintainers":[{"name":"decabot","email":"services@decahedron.io"},{"name":"phroggyy","email":"leo@decahedron.io"},{"name":"thomasruiz","email":"contact@thomasruiz.eu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-stripe_1.0.2_1522160942106_0.3822762239754285"},"_hasShrinkwrap":false}},"time":{"created":"2018-03-25T13:29:41.831Z","1.0.0":"2018-03-25T13:29:42.006Z","modified":"2022-05-23T14:47:22.250Z","1.0.1":"2018-03-27T10:46:59.790Z","1.0.2":"2018-03-27T14:29:02.205Z"},"maintainers":[{"email":"leo.sjoberg@gmail.com","name":"phroggyy"},{"email":"contact@thomasruiz.eu","name":"thomasruiz"}],"description":"Angular 2+ wrapper for StripeJS","homepage":"https://github.com/richnologies/ngx-stripe","keywords":["angular","javascript","typescript"],"repository":{"type":"git","url":"git+https://github.com/richnologies/ngx-stripe.git"},"bugs":{"url":"https://github.com/richnologies/ngx-stripe/issues"},"license":"MIT","readme":"# ngx-stripe\n\n[![version](https://img.shields.io/npm/v/ngx-stripe.svg)](https://www.npmjs.com/package/ngx-stripe)\n[![license](https://img.shields.io/npm/l/express.svg)](https://www.npmjs.com/package/ngx-stripe)\n\nAngular 2+ wrapper for StripeJS\n\n## Features\n\n* Stripe Service\n* Lazy script loading\n\n## Installation\n\nTo install this library, run:\n\n```bash\n$ npm install ngx-stripe --save\n```\n\n## Using the library\n\nImport the `NgxStripeModule` into the application\n\nThe module takes the same parameters as the global Stripe object. The APIKey and the optional options to use Stripe connect\n\n* apiKey: string\n* options: {\n  stripeAccount?: string;\n}\n\n```typescript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppComponent } from './app.component';\n\n// Import your library\nimport { NgxStripeModule } from 'ngx-stripe';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    NgxStripeModule.forRoot('***your-stripe-publishable key***'),\n    LibraryModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n## Stripe Service\n\nOnce imported, you can inject the StripeService anywhere you need. The stripe script will be loaded the first time the service is injected.\n\nThe stripe service exposes the same methods as the StripeJS instance but with typescript types. The API is based on Observables so it can be combined with other actions.\n\nIn the example below, the component mounts the card in the [OnInit](https://angular.io/guide/lifecycle-hooks#oninit) lifecycle. The buy button creates a Stripe token the could be sent to the server for further actions. In this example we just log that token to the console:\n\nExample component (more HTML and CSS examples can be found at the [Stripe Elements Examples](https://stripe.com/docs/elements/examples)):\n```xml\n<form novalidate (ngSubmit)=\"buy($event)\" [formGroup]=\"stripeTest\">\n  <input type=\"text\" formControlName=\"name\" placeholder=\"Jane Doe\">\n  <div id=\"card-element\" class=\"field\"></div>\n  <button type=\"submit\">\n    BUY\n  </button>\n</form>\n```\n```typescript\nimport { Component, OnInit, ViewChild, ElementRef } from '@angular/core';\nimport { FormGroup, FormBuilder, Validators } from \"@angular/forms\";\n\nimport { StripeService, Elements, Element as StripeElement, ElementsOptions } from \"ngx-stripe\";\n\n@Component({\n  selector: 'app-stripe-test',\n  templateUrl: 'stripe.html'\n})\nexport class StripeTestComponent implements OnInit {\n  elements: Elements;\n  card: StripeElement;\n\n  // optional parameters\n  elementsOptions: ElementsOptions = {\n    locale: 'es'\n  };\n\n  stripeTest: FormGroup;\n\n  constructor(\n    private fb: FormBuilder,\n    private stripeService: StripeService) {}\n\n  ngOnInit() {\n    this.stripeTest = this.fb.group({\n      name: ['', [Validators.required]]\n    });\n    this.stripeService.elements(elementsOptions)\n      .subscribe(elements => {\n        this.elements = elements;\n        // Only mount the element the first time\n        if (!this.card) {\n          this.card = this.elements.create('card', {\n            style: {\n              base: {\n                iconColor: '#666EE8',\n                color: '#31325F',\n                lineHeight: '40px',\n                fontWeight: 300,\n                fontFamily: '\"Helvetica Neue\", Helvetica, sans-serif',\n                fontSize: '18px',\n                '::placeholder': {\n                  color: '#CFD7E0'\n                }\n              }\n            }\n          });\n          this.card.mount('#card-element');\n        }\n      });\n  }\n\n  buy() {\n    const name = this.stripeTest.get('name').value;\n    this.stripeService\n      .createToken(this.card, { name })\n      .subscribe(token => {\n        if (result.token) {\n          // Use the token to create a charge or a customer\n          // https://stripe.com/docs/charges\n          console.log(result.token);\n        } else if (result.error) {\n          // Error creating the token\n          console.log(result.error.message);\n        }\n      });\n  }\n}\n```\n\n## StripeCardComponent\n\nAs an alternative to the previous example, you could use the StripeCardComponent.\n\nIt will make a little bit easier to mount the card.\n\nTo fetch the Stripe Element, you could you use either the (onCard) output, or, \nby using a ViewChild, the public method getCard()\n\n//stripe.html\n```xml\n<form novalidate (ngSubmit)=\"buy($event)\" [formGroup]=\"stripeTest\">\n  <input type=\"text\" formControlName=\"name\" placeholder=\"Jane Doe\">\n  <ngx-stripe-card [options]=\"cardOptions\" [elementsOptions]=\"elementsOptions\"></ngx-stripe-card>\n  <button type=\"submit\">\n    BUY\n  </button>\n</form>\n```\n```typescript\nimport { Component, OnInit, ViewChild, ElementRef } from '@angular/core';\nimport { FormGroup, FormBuilder, Validators } from \"@angular/forms\";\n\nimport { StripeService, StripeCardComponent, ElementOptions, ElementsOptions } from \"ngx-stripe\";\n\n@Component({\n  selector: 'app-stripe-test',\n  templateUrl: 'stripe.html'\n})\nexport class StripeTestComponent implements OnInit {\n  @ViewChild(StripeCardComponent) card: StripeCardComponent;\n\n  cardOptions: ElementOptions = {\n    style: {\n      base: {\n        iconColor: '#666EE8',\n        color: '#31325F',\n        lineHeight: '40px',\n        fontWeight: 300,\n        fontFamily: '\"Helvetica Neue\", Helvetica, sans-serif',\n        fontSize: '18px',\n        '::placeholder': {\n          color: '#CFD7E0'\n        }\n      }\n    }\n  };\n\n  elementsOptions: ElementsOptions = {\n    locale: 'es'\n  };\n\n  stripeTest: FormGroup;\n\n  constructor(\n    private fb: FormBuilder,\n    private stripeService: StripeService) {}\n\n  ngOnInit() {\n    this.stripeTest = this.fb.group({\n      name: ['', [Validators.required]]\n    });\n  }\n\n  buy() {\n    const name = this.stripeTest.get('name').value;\n    this.stripeService\n      .createToken(this.card.getCard(), { name })\n      .subscribe(result => {\n        if (result.token) {\n          // Use the token to create a charge or a customer\n          // https://stripe.com/docs/charges\n          console.log(result.token.id);\n        } else if (result.error) {\n          // Error creating the token\n          console.log(result.error.message);\n        }\n      });\n  }\n}\n```\n\n## Testing\nThe following command runs unit & integration tests that are in the `tests` folder, and unit tests that are in `src` folder: \n```Shell\nnpm test \n```\n\n## Building\nThe following command:\n```Shell\nnpm run build\n```\n- starts _TSLint_ with _Codelyzer_\n- starts _AoT compilation_ using _ngc_ compiler\n- creates `dist` folder with all the files of distribution\n\nTo test the npm package locally, use the following command:\n```Shell\nnpm run pack-lib\n```\nYou can then run the following to install it in an app to test it:\n```Shell\nnpm install [path]to-library-[version].tgz\n```\n\n## Publishing\n\n```Shell\nnpm run publish-lib\n```\n\n## Documentation\nTo generate the documentation, this starter uses [compodoc](https://github.com/compodoc/compodoc):\n```Shell\nnpm run compodoc\nnpm run compodoc-serve \n```\n\n## License\n\nMIT © [Ricardo Sánchez Gregorio](mailto:me@richnologies.io)\n","readmeFilename":"README.md"}