ngx-stripe - npm Package Compare versions

Comparing version 0.0.3 to 0.1.0

bundles/ngx-stripe.umd.js

@@ -12,2 +12,6 @@ (function (global, factory) {
 
+var Observable_1$1 = require('../../Observable');
+var combineLatest_1 = require('../../observable/combineLatest');
+Observable_1$1.Observable.combineLatest = combineLatest_1.combineLatest;
+
 var WindowRef = (function () {
@@ -231,2 +235,61 @@ function WindowRef() {
 ]; };
+var StripeCardComponent = (function () {
+    /**
+     * @param {?} stripeService
+     */
+    function StripeCardComponent(stripeService) {
+        this.stripeService = stripeService;
+        this.onCard = new _angular_core.EventEmitter();
+        this.options$ = new rxjs_BehaviorSubject.BehaviorSubject(null);
+    }
+    Object.defineProperty(StripeCardComponent.prototype, "options", {
+        /**
+         * @param {?} options
+         * @return {?}
+         */
+        set: function (options) {
+            this.options$.next(options);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * @return {?}
+     */
+    StripeCardComponent.prototype.ngOnInit = function () {
+        var _this = this;
+        rxjs_Observable.Observable
+            .combineLatest(this.stripeService.elements(), this.options$.filter(function (options) { return Boolean(options); }))
+            .subscribe(function (_a) {
+            var elements = _a[0], options = _a[1];
+            _this.element = elements.create('card', options);
+            _this.element.mount(_this.card.nativeElement);
+            _this.onCard.emit(_this.element);
+        });
+    };
+    /**
+     * @return {?}
+     */
+    StripeCardComponent.prototype.getCard = function () {
+        return this.element;
+    };
+    return StripeCardComponent;
+}());
+StripeCardComponent.decorators = [
+    { type: _angular_core.Component, args: [{
+                selector: 'ngx-stripe-card',
+                template: "<div class=\"field\" #card></div>"
+            },] },
+];
+/**
+ * @nocollapse
+ */
+StripeCardComponent.ctorParameters = function () { return [
+    { type: StripeService, },
+]; };
+StripeCardComponent.propDecorators = {
+    'onCard': [{ type: _angular_core.Output },],
+    'card': [{ type: _angular_core.ViewChild, args: ['card',] },],
+    'options': [{ type: _angular_core.Input },],
+};
 var NgxStripeModule = (function () {
@@ -262,3 +325,10 @@ function NgxStripeModule() {
 NgxStripeModule.decorators = [
-    { type: _angular_core.NgModule, args: [{},] },
+    { type: _angular_core.NgModule, args: [{
+                declarations: [
+                    StripeCardComponent
+                ],
+                exports: [
+                    StripeCardComponent
+                ]
+            },] },
 ];
@@ -271,2 +341,3 @@ /**
 exports.NgxStripeModule = NgxStripeModule;
+exports.StripeCardComponent = StripeCardComponent;
 exports.StripeService = StripeService;
@@ -273,0 +344,0 @@ exports.LazyStripeAPILoader = LazyStripeAPILoader;

bundles/ngx-stripe.umd.min.js

@@ -1,2 +0,2 @@
-!function(global,factory){"object"==typeof exports&&"undefined"!=typeof module?factory(exports,require("@angular/core"),require("rxjs/BehaviorSubject"),require("rxjs/Observable"),require("rxjs/add/observable/fromPromise"),require("rxjs/add/operator/filter"),require("rxjs/add/operator/map")):"function"==typeof define&&define.amd?define(["exports","@angular/core","rxjs/BehaviorSubject","rxjs/Observable","rxjs/add/observable/fromPromise","rxjs/add/operator/filter","rxjs/add/operator/map"],factory):factory((global.ng=global.ng||{},global.ng.stripe=global.ng.stripe||{}),global.ng.core,global.Rx,global.Rx)}(this,function(exports,_angular_core,rxjs_BehaviorSubject,rxjs_Observable){"use strict";function isSourceData(sourceData){return"type"in sourceData}function isBankAccount(account){return"bank_account"===account}function isBankAccountData(bankAccountData){return"country"in bankAccountData&&"currency"in bankAccountData&&"routing_number"in bankAccountData&&"account_number"in bankAccountData&&"account_holder_name"in bankAccountData&&"account_holder_type"in bankAccountData&&("individual"===bankAccountData.account_holder_type||"company"===bankAccountData.account_holder_type)}function isPii(pii){return"pii"===pii}function isPiiData(piiData){return"personal_id_number"in piiData}var Observable_1=require("../../Observable"),do_1=require("../../operator/do");Observable_1.Observable.prototype.do=do_1._do,Observable_1.Observable.prototype._do=do_1._do;var WindowRef=function(){function WindowRef(){}return WindowRef.prototype.getNativeWindow=function(){return window},WindowRef}(),DocumentRef=function(){function DocumentRef(){}return DocumentRef.prototype.getNativeDocument=function(){return document},DocumentRef}(),LazyStripeAPILoader=function(){function LazyStripeAPILoader(window,document){this.window=window,this.document=document,this.status=new rxjs_BehaviorSubject.BehaviorSubject({error:!1,loaded:!1,loading:!1})}return LazyStripeAPILoader.prototype.asStream=function(){return this.load(),this.status.asObservable()},LazyStripeAPILoader.prototype.isReady=function(){return this.status.getValue().loaded},LazyStripeAPILoader.prototype.load=function(){var _this=this;if(this.window.getNativeWindow().hasOwnProperty("Stripe"))this.status.next({error:!1,loaded:!0,loading:!1});else if(!this.status.getValue().loaded&&!this.status.getValue().loading){this.status.next(Object.assign({},this.status.getValue(),{loading:!0}));var script=this.document.getNativeDocument().createElement("script");script.type="text/javascript",script.async=!0,script.defer=!0,script.src="https://js.stripe.com/v3/",script.onload=function(){_this.status.next({error:!1,loaded:!0,loading:!1})},script.onerror=function(){_this.status.next({error:!0,loaded:!1,loading:!1})},this.document.getNativeDocument().body.appendChild(script)}},LazyStripeAPILoader}();LazyStripeAPILoader.decorators=[{type:_angular_core.Injectable}],LazyStripeAPILoader.ctorParameters=function(){return[{type:WindowRef},{type:DocumentRef}]};var STRIPE_PUBLISHABLE_KEY=new _angular_core.InjectionToken("Stripe Publishable Key"),STRIPE_OPTIONS=new _angular_core.InjectionToken("Stripe Options"),StripeService=function(){function StripeService(key,loader,window){var _this=this;this.key=key,this.loader=loader,this.window=window,this.loader.asStream().filter(function(status){return!0===status.loaded}).do(function(){var Stripe=_this.window.getNativeWindow().Stripe;_this.stripe=Stripe(_this.key)}).subscribe()}return StripeService.prototype.elements=function(){var _this=this;return this.loader.asStream().filter(function(status){return!0===status.loaded}).map(function(){return _this.stripe.elements()})},StripeService.prototype.createToken=function(a,b){return isBankAccount(a)&&isBankAccountData(b)?rxjs_Observable.Observable.fromPromise(this.stripe.createToken(a,b)):(isPii(a)&&isPiiData(b),rxjs_Observable.Observable.fromPromise(this.stripe.createToken(a,b)))},StripeService.prototype.createSource=function(a,b){return isSourceData(a)?rxjs_Observable.Observable.fromPromise(this.stripe.createSource(a)):rxjs_Observable.Observable.fromPromise(this.stripe.createSource(a,b))},StripeService.prototype.retrieveSource=function(source){return rxjs_Observable.Observable.fromPromise(this.stripe.retrieveSource(source))},StripeService}();StripeService.decorators=[{type:_angular_core.Injectable}],StripeService.ctorParameters=function(){return[{type:void 0,decorators:[{type:_angular_core.Inject,args:[STRIPE_PUBLISHABLE_KEY]}]},{type:LazyStripeAPILoader},{type:WindowRef}]};var NgxStripeModule=function(){function NgxStripeModule(){}return NgxStripeModule.forRoot=function(publishableKey,options){return{ngModule:NgxStripeModule,providers:[LazyStripeAPILoader,StripeService,WindowRef,DocumentRef,{provide:STRIPE_PUBLISHABLE_KEY,useValue:publishableKey},{provide:STRIPE_OPTIONS,useValue:options}]}},NgxStripeModule}();NgxStripeModule.decorators=[{type:_angular_core.NgModule,args:[{}]}],NgxStripeModule.ctorParameters=function(){return[]},exports.NgxStripeModule=NgxStripeModule,exports.StripeService=StripeService,exports.LazyStripeAPILoader=LazyStripeAPILoader,exports.WindowRef=WindowRef,exports.DocumentRef=DocumentRef,exports.isSourceData=isSourceData,exports.STRIPE_PUBLISHABLE_KEY=STRIPE_PUBLISHABLE_KEY,exports.STRIPE_OPTIONS=STRIPE_OPTIONS,exports.isBankAccount=isBankAccount,exports.isBankAccountData=isBankAccountData,exports.isPii=isPii,exports.isPiiData=isPiiData,Object.defineProperty(exports,"__esModule",{value:!0})});
+!function(global,factory){"object"==typeof exports&&"undefined"!=typeof module?factory(exports,require("@angular/core"),require("rxjs/BehaviorSubject"),require("rxjs/Observable"),require("rxjs/add/observable/fromPromise"),require("rxjs/add/operator/filter"),require("rxjs/add/operator/map")):"function"==typeof define&&define.amd?define(["exports","@angular/core","rxjs/BehaviorSubject","rxjs/Observable","rxjs/add/observable/fromPromise","rxjs/add/operator/filter","rxjs/add/operator/map"],factory):factory((global.ng=global.ng||{},global.ng.stripe=global.ng.stripe||{}),global.ng.core,global.Rx,global.Rx)}(this,function(exports,_angular_core,rxjs_BehaviorSubject,rxjs_Observable){"use strict";function isSourceData(sourceData){return"type"in sourceData}function isBankAccount(account){return"bank_account"===account}function isBankAccountData(bankAccountData){return"country"in bankAccountData&&"currency"in bankAccountData&&"routing_number"in bankAccountData&&"account_number"in bankAccountData&&"account_holder_name"in bankAccountData&&"account_holder_type"in bankAccountData&&("individual"===bankAccountData.account_holder_type||"company"===bankAccountData.account_holder_type)}function isPii(pii){return"pii"===pii}function isPiiData(piiData){return"personal_id_number"in piiData}var Observable_1=require("../../Observable"),do_1=require("../../operator/do");Observable_1.Observable.prototype.do=do_1._do,Observable_1.Observable.prototype._do=do_1._do;var Observable_1$1=require("../../Observable"),combineLatest_1=require("../../observable/combineLatest");Observable_1$1.Observable.combineLatest=combineLatest_1.combineLatest;var WindowRef=function(){function WindowRef(){}return WindowRef.prototype.getNativeWindow=function(){return window},WindowRef}(),DocumentRef=function(){function DocumentRef(){}return DocumentRef.prototype.getNativeDocument=function(){return document},DocumentRef}(),LazyStripeAPILoader=function(){function LazyStripeAPILoader(window,document){this.window=window,this.document=document,this.status=new rxjs_BehaviorSubject.BehaviorSubject({error:!1,loaded:!1,loading:!1})}return LazyStripeAPILoader.prototype.asStream=function(){return this.load(),this.status.asObservable()},LazyStripeAPILoader.prototype.isReady=function(){return this.status.getValue().loaded},LazyStripeAPILoader.prototype.load=function(){var _this=this;if(this.window.getNativeWindow().hasOwnProperty("Stripe"))this.status.next({error:!1,loaded:!0,loading:!1});else if(!this.status.getValue().loaded&&!this.status.getValue().loading){this.status.next(Object.assign({},this.status.getValue(),{loading:!0}));var script=this.document.getNativeDocument().createElement("script");script.type="text/javascript",script.async=!0,script.defer=!0,script.src="https://js.stripe.com/v3/",script.onload=function(){_this.status.next({error:!1,loaded:!0,loading:!1})},script.onerror=function(){_this.status.next({error:!0,loaded:!1,loading:!1})},this.document.getNativeDocument().body.appendChild(script)}},LazyStripeAPILoader}();LazyStripeAPILoader.decorators=[{type:_angular_core.Injectable}],LazyStripeAPILoader.ctorParameters=function(){return[{type:WindowRef},{type:DocumentRef}]};var STRIPE_PUBLISHABLE_KEY=new _angular_core.InjectionToken("Stripe Publishable Key"),STRIPE_OPTIONS=new _angular_core.InjectionToken("Stripe Options"),StripeService=function(){function StripeService(key,loader,window){var _this=this;this.key=key,this.loader=loader,this.window=window,this.loader.asStream().filter(function(status){return!0===status.loaded}).do(function(){var Stripe=_this.window.getNativeWindow().Stripe;_this.stripe=Stripe(_this.key)}).subscribe()}return StripeService.prototype.elements=function(){var _this=this;return this.loader.asStream().filter(function(status){return!0===status.loaded}).map(function(){return _this.stripe.elements()})},StripeService.prototype.createToken=function(a,b){return isBankAccount(a)&&isBankAccountData(b)?rxjs_Observable.Observable.fromPromise(this.stripe.createToken(a,b)):(isPii(a)&&isPiiData(b),rxjs_Observable.Observable.fromPromise(this.stripe.createToken(a,b)))},StripeService.prototype.createSource=function(a,b){return isSourceData(a)?rxjs_Observable.Observable.fromPromise(this.stripe.createSource(a)):rxjs_Observable.Observable.fromPromise(this.stripe.createSource(a,b))},StripeService.prototype.retrieveSource=function(source){return rxjs_Observable.Observable.fromPromise(this.stripe.retrieveSource(source))},StripeService}();StripeService.decorators=[{type:_angular_core.Injectable}],StripeService.ctorParameters=function(){return[{type:void 0,decorators:[{type:_angular_core.Inject,args:[STRIPE_PUBLISHABLE_KEY]}]},{type:LazyStripeAPILoader},{type:WindowRef}]};var StripeCardComponent=function(){function StripeCardComponent(stripeService){this.stripeService=stripeService,this.onCard=new _angular_core.EventEmitter,this.options$=new rxjs_BehaviorSubject.BehaviorSubject(null)}return Object.defineProperty(StripeCardComponent.prototype,"options",{set:function(options){this.options$.next(options)},enumerable:!0,configurable:!0}),StripeCardComponent.prototype.ngOnInit=function(){var _this=this;rxjs_Observable.Observable.combineLatest(this.stripeService.elements(),this.options$.filter(function(options){return Boolean(options)})).subscribe(function(_a){var elements=_a[0],options=_a[1];_this.element=elements.create("card",options),_this.element.mount(_this.card.nativeElement),_this.onCard.emit(_this.element)})},StripeCardComponent.prototype.getCard=function(){return this.element},StripeCardComponent}();StripeCardComponent.decorators=[{type:_angular_core.Component,args:[{selector:"ngx-stripe-card",template:'<div class="field" #card></div>'}]}],StripeCardComponent.ctorParameters=function(){return[{type:StripeService}]},StripeCardComponent.propDecorators={onCard:[{type:_angular_core.Output}],card:[{type:_angular_core.ViewChild,args:["card"]}],options:[{type:_angular_core.Input}]};var NgxStripeModule=function(){function NgxStripeModule(){}return NgxStripeModule.forRoot=function(publishableKey,options){return{ngModule:NgxStripeModule,providers:[LazyStripeAPILoader,StripeService,WindowRef,DocumentRef,{provide:STRIPE_PUBLISHABLE_KEY,useValue:publishableKey},{provide:STRIPE_OPTIONS,useValue:options}]}},NgxStripeModule}();NgxStripeModule.decorators=[{type:_angular_core.NgModule,args:[{declarations:[StripeCardComponent],exports:[StripeCardComponent]}]}],NgxStripeModule.ctorParameters=function(){return[]},exports.NgxStripeModule=NgxStripeModule,exports.StripeCardComponent=StripeCardComponent,exports.StripeService=StripeService,exports.LazyStripeAPILoader=LazyStripeAPILoader,exports.WindowRef=WindowRef,exports.DocumentRef=DocumentRef,exports.isSourceData=isSourceData,exports.STRIPE_PUBLISHABLE_KEY=STRIPE_PUBLISHABLE_KEY,exports.STRIPE_OPTIONS=STRIPE_OPTIONS,exports.isBankAccount=isBankAccount,exports.isBankAccountData=isBankAccountData,exports.isPii=isPii,exports.isPiiData=isPiiData,Object.defineProperty(exports,"__esModule",{value:!0})});
 //# sourceMappingURL=ngx-stripe.umd.min.js.map

index.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":3,"metadata":{"NgxStripeModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":["publishableKey","options"],"value":{"ngModule":{"__symbolic":"reference","name":"NgxStripeModule"},"providers":[{"__symbolic":"reference","name":"LazyStripeAPILoader"},{"__symbolic":"reference","name":"StripeService"},{"__symbolic":"reference","name":"WindowRef"},{"__symbolic":"reference","name":"DocumentRef"},{"provide":{"__symbolic":"reference","name":"STRIPE_PUBLISHABLE_KEY"},"useValue":{"__symbolic":"reference","name":"publishableKey"}},{"provide":{"__symbolic":"reference","name":"STRIPE_OPTIONS"},"useValue":{"__symbolic":"reference","name":"options"}}]}}}},"StripeService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","name":"STRIPE_PUBLISHABLE_KEY"}]}],null,null],"parameters":[{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"LazyStripeAPILoader"},{"__symbolic":"reference","name":"WindowRef"}]}],"elements":[{"__symbolic":"method"}],"createToken":[{"__symbolic":"method"}],"createSource":[{"__symbolic":"method"}],"retrieveSource":[{"__symbolic":"method"}]}},"LazyStripeAPILoader":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"WindowRef"},{"__symbolic":"reference","name":"DocumentRef"}]}],"asStream":[{"__symbolic":"method"}],"isReady":[{"__symbolic":"method"}],"load":[{"__symbolic":"method"}]}},"WindowRef":{"__symbolic":"class","members":{"getNativeWindow":[{"__symbolic":"method"}]}},"DocumentRef":{"__symbolic":"class","members":{"getNativeDocument":[{"__symbolic":"method"}]}},"Element":{"__symbolic":"interface"},"ElementOptions":{"__symbolic":"interface"},"ElementStyleAttributes":{"__symbolic":"interface"},"Elements":{"__symbolic":"interface"},"ElementsOptions":{"__symbolic":"interface"},"FontElement":{"__symbolic":"interface"},"Source":{"__symbolic":"interface"},"SourceParams":{"__symbolic":"interface"},"SourceData":{"__symbolic":"interface"},"isSourceData":{"__symbolic":"function","parameters":["sourceData"],"value":{"__symbolic":"binop","operator":"in","left":"type","right":{"__symbolic":"reference","name":"sourceData"}}},"SourceResult":{"__symbolic":"interface"},"STRIPE_PUBLISHABLE_KEY":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken"},"arguments":["Stripe Publishable Key"]},"STRIPE_OPTIONS":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken"},"arguments":["Stripe Options"]},"StripeJS":{"__symbolic":"interface"},"Options":{"__symbolic":"interface"},"Token":{"__symbolic":"interface"},"CardDataOptions":{"__symbolic":"interface"},"TokenResult":{"__symbolic":"interface"},"BankAccountData":{"__symbolic":"interface"},"PiiData":{"__symbolic":"interface"},"isBankAccount":{"__symbolic":"function","parameters":["account"],"value":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"reference","name":"account"},"right":"bank_account"}},"isBankAccountData":{"__symbolic":"function","parameters":["bankAccountData"],"value":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"in","left":"country","right":{"__symbolic":"reference","name":"bankAccountData"}},"right":{"__symbolic":"binop","operator":"in","left":"currency","right":{"__symbolic":"reference","name":"bankAccountData"}}},"right":{"__symbolic":"binop","operator":"in","left":"routing_number","right":{"__symbolic":"reference","name":"bankAccountData"}}},"right":{"__symbolic":"binop","operator":"in","left":"account_number","right":{"__symbolic":"reference","name":"bankAccountData"}}},"right":{"__symbolic":"binop","operator":"in","left":"account_holder_name","right":{"__symbolic":"reference","name":"bankAccountData"}}},"right":{"__symbolic":"binop","operator":"in","left":"account_holder_type","right":{"__symbolic":"reference","name":"bankAccountData"}}},"right":{"__symbolic":"binop","operator":"||","left":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"bankAccountData"},"member":"account_holder_type"},"right":"individual"},"right":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"bankAccountData"},"member":"account_holder_type"},"right":"company"}}}},"isPii":{"__symbolic":"function","parameters":["pii"],"value":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"reference","name":"pii"},"right":"pii"}},"isPiiData":{"__symbolic":"function","parameters":["piiData"],"value":{"__symbolic":"binop","operator":"in","left":"personal_id_number","right":{"__symbolic":"reference","name":"piiData"}}},"Error":{"__symbolic":"interface"},"Address":{"__symbolic":"interface"}},"origins":{"NgxStripeModule":"./src/modules/ngx-stripe.module","StripeService":"./src/services/stripe.service","LazyStripeAPILoader":"./src/services/api-loader.service","WindowRef":"./src/services/window-ref","DocumentRef":"./src/services/document-ref","Element":"./src/interfaces/element","ElementEventType":"./src/interfaces/element","ElementType":"./src/interfaces/element","ElementOptions":"./src/interfaces/element","ElementStyleAttributes":"./src/interfaces/element","Elements":"./src/interfaces/elements","ElementsOptions":"./src/interfaces/elements","FontElement":"./src/interfaces/elements","Source":"./src/interfaces/sources","UsageTypes":"./src/interfaces/sources","FlowTypes":"./src/interfaces/sources","SourceParams":"./src/interfaces/sources","SourceData":"./src/interfaces/sources","isSourceData":"./src/interfaces/sources","SourceResult":"./src/interfaces/sources","STRIPE_PUBLISHABLE_KEY":"./src/interfaces/stripe","STRIPE_OPTIONS":"./src/interfaces/stripe","StripeJS":"./src/interfaces/stripe","Options":"./src/interfaces/stripe","Token":"./src/interfaces/token","FieldCheck":"./src/interfaces/token","CardDataOptions":"./src/interfaces/token","TokenResult":"./src/interfaces/token","BankAccount":"./src/interfaces/token","BankAccountData":"./src/interfaces/token","Pii":"./src/interfaces/token","PiiData":"./src/interfaces/token","isBankAccount":"./src/interfaces/token","isBankAccountData":"./src/interfaces/token","isPii":"./src/interfaces/token","isPiiData":"./src/interfaces/token","Error":"./src/interfaces/utils","Address":"./src/interfaces/utils"},"importAs":"ngx-stripe"}
+{"__symbolic":"module","version":3,"metadata":{"NgxStripeModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","name":"StripeCardComponent"}],"exports":[{"__symbolic":"reference","name":"StripeCardComponent"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":["publishableKey","options"],"value":{"ngModule":{"__symbolic":"reference","name":"NgxStripeModule"},"providers":[{"__symbolic":"reference","name":"LazyStripeAPILoader"},{"__symbolic":"reference","name":"StripeService"},{"__symbolic":"reference","name":"WindowRef"},{"__symbolic":"reference","name":"DocumentRef"},{"provide":{"__symbolic":"reference","name":"STRIPE_PUBLISHABLE_KEY"},"useValue":{"__symbolic":"reference","name":"publishableKey"}},{"provide":{"__symbolic":"reference","name":"STRIPE_OPTIONS"},"useValue":{"__symbolic":"reference","name":"options"}}]}}}},"StripeCardComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-stripe-card","template":"<div class=\"field\" #card></div>"}]}],"members":{"onCard":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"card":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["card"]}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"StripeService"}]}],"ngOnInit":[{"__symbolic":"method"}],"getCard":[{"__symbolic":"method"}]}},"StripeService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","name":"STRIPE_PUBLISHABLE_KEY"}]}],null,null],"parameters":[{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"LazyStripeAPILoader"},{"__symbolic":"reference","name":"WindowRef"}]}],"elements":[{"__symbolic":"method"}],"createToken":[{"__symbolic":"method"}],"createSource":[{"__symbolic":"method"}],"retrieveSource":[{"__symbolic":"method"}]}},"LazyStripeAPILoader":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"WindowRef"},{"__symbolic":"reference","name":"DocumentRef"}]}],"asStream":[{"__symbolic":"method"}],"isReady":[{"__symbolic":"method"}],"load":[{"__symbolic":"method"}]}},"WindowRef":{"__symbolic":"class","members":{"getNativeWindow":[{"__symbolic":"method"}]}},"DocumentRef":{"__symbolic":"class","members":{"getNativeDocument":[{"__symbolic":"method"}]}},"Element":{"__symbolic":"interface"},"ElementOptions":{"__symbolic":"interface"},"ElementStyleAttributes":{"__symbolic":"interface"},"Elements":{"__symbolic":"interface"},"ElementsOptions":{"__symbolic":"interface"},"FontElement":{"__symbolic":"interface"},"Source":{"__symbolic":"interface"},"SourceParams":{"__symbolic":"interface"},"SourceData":{"__symbolic":"interface"},"isSourceData":{"__symbolic":"function","parameters":["sourceData"],"value":{"__symbolic":"binop","operator":"in","left":"type","right":{"__symbolic":"reference","name":"sourceData"}}},"SourceResult":{"__symbolic":"interface"},"STRIPE_PUBLISHABLE_KEY":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken"},"arguments":["Stripe Publishable Key"]},"STRIPE_OPTIONS":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken"},"arguments":["Stripe Options"]},"StripeJS":{"__symbolic":"interface"},"Options":{"__symbolic":"interface"},"Token":{"__symbolic":"interface"},"CardDataOptions":{"__symbolic":"interface"},"TokenResult":{"__symbolic":"interface"},"BankAccountData":{"__symbolic":"interface"},"PiiData":{"__symbolic":"interface"},"isBankAccount":{"__symbolic":"function","parameters":["account"],"value":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"reference","name":"account"},"right":"bank_account"}},"isBankAccountData":{"__symbolic":"function","parameters":["bankAccountData"],"value":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"in","left":"country","right":{"__symbolic":"reference","name":"bankAccountData"}},"right":{"__symbolic":"binop","operator":"in","left":"currency","right":{"__symbolic":"reference","name":"bankAccountData"}}},"right":{"__symbolic":"binop","operator":"in","left":"routing_number","right":{"__symbolic":"reference","name":"bankAccountData"}}},"right":{"__symbolic":"binop","operator":"in","left":"account_number","right":{"__symbolic":"reference","name":"bankAccountData"}}},"right":{"__symbolic":"binop","operator":"in","left":"account_holder_name","right":{"__symbolic":"reference","name":"bankAccountData"}}},"right":{"__symbolic":"binop","operator":"in","left":"account_holder_type","right":{"__symbolic":"reference","name":"bankAccountData"}}},"right":{"__symbolic":"binop","operator":"||","left":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"bankAccountData"},"member":"account_holder_type"},"right":"individual"},"right":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"bankAccountData"},"member":"account_holder_type"},"right":"company"}}}},"isPii":{"__symbolic":"function","parameters":["pii"],"value":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"reference","name":"pii"},"right":"pii"}},"isPiiData":{"__symbolic":"function","parameters":["piiData"],"value":{"__symbolic":"binop","operator":"in","left":"personal_id_number","right":{"__symbolic":"reference","name":"piiData"}}},"Error":{"__symbolic":"interface"},"Address":{"__symbolic":"interface"}},"origins":{"NgxStripeModule":"./src/modules/ngx-stripe.module","StripeCardComponent":"./src/components/stripe-card.component","StripeService":"./src/services/stripe.service","LazyStripeAPILoader":"./src/services/api-loader.service","WindowRef":"./src/services/window-ref","DocumentRef":"./src/services/document-ref","Element":"./src/interfaces/element","ElementEventType":"./src/interfaces/element","ElementType":"./src/interfaces/element","ElementOptions":"./src/interfaces/element","ElementStyleAttributes":"./src/interfaces/element","Elements":"./src/interfaces/elements","ElementsOptions":"./src/interfaces/elements","FontElement":"./src/interfaces/elements","Source":"./src/interfaces/sources","UsageTypes":"./src/interfaces/sources","FlowTypes":"./src/interfaces/sources","SourceParams":"./src/interfaces/sources","SourceData":"./src/interfaces/sources","isSourceData":"./src/interfaces/sources","SourceResult":"./src/interfaces/sources","STRIPE_PUBLISHABLE_KEY":"./src/interfaces/stripe","STRIPE_OPTIONS":"./src/interfaces/stripe","StripeJS":"./src/interfaces/stripe","Options":"./src/interfaces/stripe","Token":"./src/interfaces/token","FieldCheck":"./src/interfaces/token","CardDataOptions":"./src/interfaces/token","TokenResult":"./src/interfaces/token","BankAccount":"./src/interfaces/token","BankAccountData":"./src/interfaces/token","Pii":"./src/interfaces/token","PiiData":"./src/interfaces/token","isBankAccount":"./src/interfaces/token","isBankAccountData":"./src/interfaces/token","isPii":"./src/interfaces/token","isPiiData":"./src/interfaces/token","Error":"./src/interfaces/utils","Address":"./src/interfaces/utils"},"importAs":"ngx-stripe"}

modules/ngx-stripe.es5.js

@@ -1,2 +0,2 @@
-import { Inject, Injectable, InjectionToken, NgModule } from '@angular/core';
+import { Component, EventEmitter, Inject, Injectable, InjectionToken, Input, NgModule, Output, ViewChild } from '@angular/core';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@@ -8,2 +8,3 @@ import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/do';
+import 'rxjs/add/observable/combineLatest';
 var WindowRef = (function () {
@@ -227,2 +228,61 @@ function WindowRef() {
 ]; };
+var StripeCardComponent = (function () {
+    /**
+     * @param {?} stripeService
+     */
+    function StripeCardComponent(stripeService) {
+        this.stripeService = stripeService;
+        this.onCard = new EventEmitter();
+        this.options$ = new BehaviorSubject(null);
+    }
+    Object.defineProperty(StripeCardComponent.prototype, "options", {
+        /**
+         * @param {?} options
+         * @return {?}
+         */
+        set: function (options) {
+            this.options$.next(options);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * @return {?}
+     */
+    StripeCardComponent.prototype.ngOnInit = function () {
+        var _this = this;
+        Observable
+            .combineLatest(this.stripeService.elements(), this.options$.filter(function (options) { return Boolean(options); }))
+            .subscribe(function (_a) {
+            var elements = _a[0], options = _a[1];
+            _this.element = elements.create('card', options);
+            _this.element.mount(_this.card.nativeElement);
+            _this.onCard.emit(_this.element);
+        });
+    };
+    /**
+     * @return {?}
+     */
+    StripeCardComponent.prototype.getCard = function () {
+        return this.element;
+    };
+    return StripeCardComponent;
+}());
+StripeCardComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'ngx-stripe-card',
+                template: "<div class=\"field\" #card></div>"
+            },] },
+];
+/**
+ * @nocollapse
+ */
+StripeCardComponent.ctorParameters = function () { return [
+    { type: StripeService, },
+]; };
+StripeCardComponent.propDecorators = {
+    'onCard': [{ type: Output },],
+    'card': [{ type: ViewChild, args: ['card',] },],
+    'options': [{ type: Input },],
+};
 var NgxStripeModule = (function () {
@@ -258,3 +318,10 @@ function NgxStripeModule() {
 NgxStripeModule.decorators = [
-    { type: NgModule, args: [{},] },
+    { type: NgModule, args: [{
+                declarations: [
+                    StripeCardComponent
+                ],
+                exports: [
+                    StripeCardComponent
+                ]
+            },] },
 ];
@@ -272,3 +339,3 @@ /**
  */
-export { NgxStripeModule, StripeService, LazyStripeAPILoader, WindowRef, DocumentRef, isSourceData, STRIPE_PUBLISHABLE_KEY, STRIPE_OPTIONS, isBankAccount, isBankAccountData, isPii, isPiiData };
+export { NgxStripeModule, StripeCardComponent, StripeService, LazyStripeAPILoader, WindowRef, DocumentRef, isSourceData, STRIPE_PUBLISHABLE_KEY, STRIPE_OPTIONS, isBankAccount, isBankAccountData, isPii, isPiiData };
 //# sourceMappingURL=ngx-stripe.es5.js.map

modules/ngx-stripe.js

@@ -1,2 +0,2 @@
-import { Inject, Injectable, InjectionToken, NgModule } from '@angular/core';
+import { Component, EventEmitter, Inject, Injectable, InjectionToken, Input, NgModule, Output, ViewChild } from '@angular/core';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@@ -8,2 +8,3 @@ import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/do';
+import 'rxjs/add/observable/combineLatest';
 
@@ -224,2 +225,55 @@ class WindowRef {
 
+class StripeCardComponent {
+    /**
+     * @param {?} stripeService
+     */
+    constructor(stripeService) {
+        this.stripeService = stripeService;
+        this.onCard = new EventEmitter();
+        this.options$ = new BehaviorSubject(null);
+    }
+    /**
+     * @param {?} options
+     * @return {?}
+     */
+    set options(options) {
+        this.options$.next(options);
+    }
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+        Observable
+            .combineLatest(this.stripeService.elements(), this.options$.filter((options) => Boolean(options)))
+            .subscribe(([elements, options]) => {
+            this.element = elements.create('card', options);
+            this.element.mount(this.card.nativeElement);
+            this.onCard.emit(this.element);
+        });
+    }
+    /**
+     * @return {?}
+     */
+    getCard() {
+        return this.element;
+    }
+}
+StripeCardComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'ngx-stripe-card',
+                template: `<div class="field" #card></div>`
+            },] },
+];
+/**
+ * @nocollapse
+ */
+StripeCardComponent.ctorParameters = () => [
+    { type: StripeService, },
+];
+StripeCardComponent.propDecorators = {
+    'onCard': [{ type: Output },],
+    'card': [{ type: ViewChild, args: ['card',] },],
+    'options': [{ type: Input },],
+};
+
 class NgxStripeModule {
@@ -252,3 +306,10 @@ /**
 NgxStripeModule.decorators = [
-    { type: NgModule, args: [{},] },
+    { type: NgModule, args: [{
+                declarations: [
+                    StripeCardComponent
+                ],
+                exports: [
+                    StripeCardComponent
+                ]
+            },] },
 ];
@@ -270,3 +331,3 @@ /**
 
-export { NgxStripeModule, StripeService, LazyStripeAPILoader, WindowRef, DocumentRef, isSourceData, STRIPE_PUBLISHABLE_KEY, STRIPE_OPTIONS, isBankAccount, isBankAccountData, isPii, isPiiData };
+export { NgxStripeModule, StripeCardComponent, StripeService, LazyStripeAPILoader, WindowRef, DocumentRef, isSourceData, STRIPE_PUBLISHABLE_KEY, STRIPE_OPTIONS, isBankAccount, isBankAccountData, isPii, isPiiData };
 //# sourceMappingURL=ngx-stripe.js.map

package.json

 {
     "name": "ngx-stripe",
-    "version": "0.0.3",
+    "version": "0.1.0",
     "description": "Angular 2+ wrapper for StripeJS",
@@ -5,0 +5,0 @@ "main": "./bundles/ngx-stripe.umd.js",

README.md

@@ -72,15 +72,21 @@ # ngx-stripe
 ```xml
-<div id="card-element" class="field" #card></div>
+<form novalidate (ngSubmit)="buy($event)" [formGroup]="stripeTest">
+  <input type="text" formControlName="name" placeholder="Jane Doe">
+  <div id="card-element" class="field" #card></div>
+  <button type="submit">
+    BUY
+  </button>
+</form>
 ```
 ```typescript
 import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
-import { StripeService } from "ngx-stripe";
-import { Elements, Element as StripeElement } from "ngx-stripe";
+import { FormGroup, FormBuilder, Validators } from "@angular/forms";
 
-@IonicPage({name: 'page-stripe'})
+import { StripeService, Elements, Element as StripeElement } from "ngx-stripe";
+
 @Component({
-  selector: 'page-stripe',
+  selector: 'app-stripe-test',
   templateUrl: 'stripe.html'
 })
-export class StripePage implements OnInit {
+export class StripeTestComponent implements OnInit {
   elements: Elements;
@@ -90,5 +96,12 @@ card: StripeElement;
 
-  constructor(private stripeService: StripeService) {}
+  stripeTest: FormGroup;
 
+  constructor(
+    private fb: FormBuilder,
+    private stripeService: StripeService) {}
+
   ngOnInit() {
+    this.stripeTest = this.fb.group({
+      name: ['', [Validators.required]]
+    });
     this.stripeService.elements()
@@ -124,5 +137,11 @@ .subscribe(elements => {
       .subscribe(token => {
-        console.log('Token created correctly');
-        console.log(token);
-      })
+        if (result.token) {
+          // Use the token to create a charge or a customer
+          // https://stripe.com/docs/charges
+          console.log(result.token);
+        } else if (result.error) {
+          // Error creating the token
+          console.log(result.error.message);
+        }
+      });
   }
@@ -132,2 +151,80 @@ }
 
+## StripeCardComponent
+
+As an alternative to the previous example, you could use the StripeCardComponent.
+
+It will make a little bit easier to mount the card.
+
+To fetch the Stripe Element, you could you use either the (onCard) output, or, 
+by using a ViewChild, the public method getCard()
+
+//stripe.html
+```xml
+<form novalidate (ngSubmit)="buy($event)" [formGroup]="stripeTest">
+  <input type="text" formControlName="name" placeholder="Jane Doe">
+  <ngx-stripe-card [options]="cardOptions"></ngx-stripe-card>
+  <button type="submit">
+    BUY
+  </button>
+</form>
+```
+```typescript
+import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from "@angular/forms";
+
+import { StripeService, StripeCardComponent } from "ngx-stripe";
+
+@Component({
+  selector: 'app-stripe-test',
+  templateUrl: 'stripe.html'
+})
+export class StripeTestComponent implements OnInit {
+  @ViewChild(StripeCardComponent) card: StripeCardComponent;
+
+  cardOptions = {
+    style: {
+      base: {
+        iconColor: '#666EE8',
+        color: '#31325F',
+        lineHeight: '40px',
+        fontWeight: 300,
+        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
+        fontSize: '18px',
+        '::placeholder': {
+          color: '#CFD7E0'
+        }
+      }
+    }
+  };
+
+  stripeTest: FormGroup;
+
+  constructor(
+    private fb: FormBuilder,
+    private stripeService: StripeService) {}
+
+  ngOnInit() {
+    this.stripeTest = this.fb.group({
+      name: ['', [Validators.required]]
+    });
+  }
+
+  buy() {
+    const name = this.stripeTest.get('name').value;
+    this.stripeService
+      .createToken(this.card.getCard(), { name })
+      .subscribe(result => {
+        if (result.token) {
+          // Use the token to create a charge or a customer
+          // https://stripe.com/docs/charges
+          console.log(result.token.id);
+        } else if (result.error) {
+          // Error creating the token
+          console.log(result.error.message);
+        }
+      });
+  }
+}
+```
+
 ## Testing
@@ -134,0 +231,0 @@ The following command run unit & integration tests that are in the `tests` folder, and unit tests that are in `src` folder:

src/ngx-stripe.d.ts

 export { NgxStripeModule } from './modules/ngx-stripe.module';
+export { StripeCardComponent } from './components/stripe-card.component';
 export { StripeService } from './services/stripe.service';
@@ -3,0 +4,0 @@ export { LazyStripeAPILoader } from './services/api-loader.service';

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

166300

increased by21.49%

Number of package files

27

increased by3.85%

Lines of code

1365

increased by19.11%

Number of lines in readme file

266

increased by57.4%

No dependency changes