@benbraide/inlinejs-stripe 2.0.1 → 2.0.3

package/lib/common/components/field.js

@@ -25,7 +25,10 @@ class StripeFieldElement extends inlinejs_element_1.CustomElement {
         super();
         this.stripeField_ = null;
         this.isReady_ = false;
+        this.isComplete_ = false;
+        this.lastError_ = null;
         this.readyWaiters_ = new Array();
+        this.changeListeners = new Array();
         this.stripe = null;
         this.options = null;
         this.type = '';
@@ -38,6 +41,13 @@ class StripeFieldElement extends inlinejs_element_1.CustomElement {
             this.isReady_ ? resolve() : this.readyWaiters_.push(() => resolve());
         });
     }
+    AddChangeListener(listener) {
+        this.changeListeners.push(listener);
+    }
+    RemoveChangeListener(listener) {
+        const index = this.changeListeners.indexOf(listener);
+        (index >= 0) && this.changeListeners.splice(index, 1);
+    }
     ToggleFocus(focused) {
         var _a, _b;
         (this.stripeField_ && (focused ? (_a = this.stripeField_) === null || _a === void 0 ? void 0 : _a.focus() : (_b = this.stripeField_) === null || _b === void 0 ? void 0 : _b.blur()));
@@ -83,23 +93,25 @@ class StripeFieldElement extends inlinejs_element_1.CustomElement {
                         this.readyWaiters_.splice(0).forEach(waiter => (0, inlinejs_1.JournalTry)(waiter));
                     });
                     this.stripeField_.on('change', (event) => {
-                        var _a;
-                        if (event === null || event === void 0 ? void 0 : event.error) {
+                        if (((event === null || event === void 0 ? void 0 : event.error) || null) !== this.lastError_) {
+                            this.lastError_ = ((event === null || event === void 0 ? void 0 : event.error) || null);
                             (0, inlinejs_1.EvaluateLater)({
                                 componentId: this.componentId_,
                                 contextElement: this,
                                 expression: this.onerrors,
                                 disableFunctionCall: false,
-                            })(undefined, [], { error: event.error });
+                            })(undefined, [this.lastError_], { error: this.lastError_ });
+                            this.changeListeners.forEach(listener => (0, inlinejs_1.JournalTry)(() => listener('error', this.lastError_)));
                         }
-                        else if (event === null || event === void 0 ? void 0 : event.complete) {
+                        if (((event === null || event === void 0 ? void 0 : event.complete) || false) != this.isComplete_) {
+                            this.isComplete_ = ((event === null || event === void 0 ? void 0 : event.complete) || false);
                             (0, inlinejs_1.EvaluateLater)({
                                 componentId: this.componentId_,
                                 contextElement: this,
                                 expression: this.oncomplete,
                                 disableFunctionCall: false,
-                            })();
-                            (_a = this.GetStripe_()) === null || _a === void 0 ? void 0 : _a.FocusNextField(this);
+                            })(undefined, [this.isComplete_], { complete: this.isComplete_ });
+                            this.changeListeners.forEach(listener => (0, inlinejs_1.JournalTry)(() => listener('complete', this.isComplete_)));
                         }
                     });
                     this.stripeField_.mount(this);

package/lib/common/components/payment-method.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="stripe-v3" />
 import { CustomElement } from "@benbraide/inlinejs-element";
-import { IStripeField, IStripePaymentDetails } from "../types";
+import { IStripeField, IStripePaymentDetails, StripeFieldChangeHandlerType } from "../types";
 export declare class StripePaymentMenthodElement extends CustomElement implements IStripeField {
     value: stripe.elements.Element | string;
     constructor();
     WaitReady(): Promise<void>;
+    AddChangeListener(listener: StripeFieldChangeHandlerType): void;
+    RemoveChangeListener(listener: StripeFieldChangeHandlerType): void;
     ToggleFocus(focused: boolean): void;
     Reset(): void;
     AddDetails(details: IStripePaymentDetails): void;

package/lib/common/components/payment-method.js

@@ -19,6 +19,8 @@ class StripePaymentMenthodElement extends inlinejs_element_1.CustomElement {
     WaitReady() {
         return Promise.resolve();
     }
+    AddChangeListener(listener) { }
+    RemoveChangeListener(listener) { }
     ToggleFocus(focused) { }
     Reset() { }
     AddDetails(details) {

package/lib/common/components/stripe.d.ts

@@ -11,11 +11,15 @@ export declare class StripeElement extends CustomElement implements IStripeEleme
     protected fields_: Array<IStripeField> | null;
     protected readyFields_: Array<IStripeField> | null;
     protected instanceWaiters_: (() => void)[];
+    protected completeFields_: Array<IStripeField> | null;
+    protected errorFields_: Array<IStripeField> | null;
     options: stripe.elements.ElementsOptions | null;
     publicKey: string;
     onready: string;
+    oncomplete: string;
+    onerrors: string;
     defer: boolean;
-    autofocus: boolean;
+    focusnext: boolean;
     constructor();
     AddStripeField(field: IStripeField): void;
     RemoveStripeField(field: IStripeField): void;

package/lib/common/components/stripe.js

@@ -31,11 +31,15 @@ class StripeElement extends inlinejs_element_1.CustomElement {
         this.fields_ = null;
         this.readyFields_ = null;
         this.instanceWaiters_ = new Array();
+        this.completeFields_ = null;
+        this.errorFields_ = null;
         this.options = null;
         this.publicKey = '';
         this.onready = '';
+        this.oncomplete = '';
+        this.onerrors = '';
         this.defer = false;
-        this.autofocus = false;
+        this.focusnext = false;
     }
     AddStripeField(field) {
         this.fields_ = (this.fields_ || []);
@@ -54,13 +58,54 @@ class StripeElement extends inlinejs_element_1.CustomElement {
                 this.readyWaiters_.splice(0).forEach(waiter => (0, inlinejs_1.JournalTry)(waiter));
             });
         });
+        field.AddChangeListener((type, data) => {
+            if (type === 'complete') {
+                let changed = false;
+                this.completeFields_ = (this.completeFields_ || []);
+                if (data && !this.completeFields_.includes(field)) {
+                    this.completeFields_.push(field);
+                    changed = !!(this.readyFields_ && this.completeFields_.length == this.readyFields_.length);
+                }
+                else if (!data && this.completeFields_.includes(field)) {
+                    this.completeFields_ = this.completeFields_.filter(x => x !== field);
+                    changed = (this.completeFields_.length == 0);
+                }
+                changed && this.oncomplete && (0, inlinejs_1.EvaluateLater)({
+                    componentId: this.componentId_,
+                    contextElement: this,
+                    expression: this.oncomplete,
+                    disableFunctionCall: false,
+                })(undefined, [!!data], { complete: !!data });
+                !!data && this.focusnext && this.FocusNextField(field);
+            }
+            else if (type === 'error') {
+                let changed = false;
+                this.errorFields_ = (this.errorFields_ || []);
+                this.errorFields_.push(field);
+                this.errorFields_ = (this.errorFields_ || []);
+                if (data && !this.errorFields_.includes(field)) {
+                    this.errorFields_.push(field);
+                    changed = (this.errorFields_.length == 1);
+                }
+                else if (!data && this.errorFields_.includes(field)) {
+                    this.errorFields_ = this.errorFields_.filter(x => x !== field);
+                    changed = (this.errorFields_.length == 0);
+                }
+                changed && this.onerrors && (0, inlinejs_1.EvaluateLater)({
+                    componentId: this.componentId_,
+                    contextElement: this,
+                    expression: this.onerrors,
+                    disableFunctionCall: false,
+                })(undefined, [data], { error: data });
+            }
+        });
     }
     RemoveStripeField(field) {
         this.fields_ && (this.fields_ = this.fields_.filter(x => x !== field));
         this.readyFields_ && (this.readyFields_ = this.readyFields_.filter(x => x !== field));
     }
     FocusNextField(field) {
-        if (this.autofocus && this.fields_) {
+        if (this.fields_) {
             const index = this.fields_.indexOf(field);
             (index >= 0 && index < this.fields_.length - 1) && this.fields_[index + 1].ToggleFocus(true);
         }
@@ -149,12 +194,18 @@ __decorate([
 __decorate([
     (0, inlinejs_element_1.Property)({ type: 'string' })
 ], StripeElement.prototype, "onready", void 0);
+__decorate([
+    (0, inlinejs_element_1.Property)({ type: 'string' })
+], StripeElement.prototype, "oncomplete", void 0);
+__decorate([
+    (0, inlinejs_element_1.Property)({ type: 'string' })
+], StripeElement.prototype, "onerrors", void 0);
 __decorate([
     (0, inlinejs_element_1.Property)({ type: 'boolean' })
 ], StripeElement.prototype, "defer", void 0);
 __decorate([
     (0, inlinejs_element_1.Property)({ type: 'boolean' })
-], StripeElement.prototype, "autofocus", void 0);
+], StripeElement.prototype, "focusnext", void 0);
 exports.StripeElement = StripeElement;
 function StripeElementCompact() {
     (0, inlinejs_element_1.RegisterCustomElement)(StripeElement, 'stripe');

package/lib/common/types.d.ts

@@ -3,8 +3,12 @@ export interface IStripePaymentDetails {
     method?: stripe.elements.Element | string;
     billingDetails?: stripe.BillingDetails;
 }
+export declare type StripeFieldChangeType = 'error' | 'complete';
+export declare type StripeFieldChangeHandlerType = (type: StripeFieldChangeType, data: any) => void;
 export interface IStripeField {
     WaitReady(): Promise<void>;
+    AddChangeListener(listener: StripeFieldChangeHandlerType): void;
+    RemoveChangeListener(listener: StripeFieldChangeHandlerType): void;
     ToggleFocus(focused: boolean): void;
     Reset(): void;
     AddDetails(details: IStripePaymentDetails): void;

package/lib/esm/components/detail.d.ts

@@ -1,11 +1,13 @@
 import { CustomElement } from "@benbraide/inlinejs-element";
-import { IStripeField, IStripePaymentDetails } from "../types";
+import { IStripeField, IStripePaymentDetails, StripeFieldChangeHandlerType } from "../types";
 export declare class StripeDetailElement extends CustomElement implements IStripeField {
     input: HTMLInputElement | null;
     name: string;
     value: string;
     constructor();
     WaitReady(): Promise<void>;
+    AddChangeListener(listener: StripeFieldChangeHandlerType): void;
+    RemoveChangeListener(listener: StripeFieldChangeHandlerType): void;
     ToggleFocus(focused: boolean): void;
     Reset(): void;
     AddDetails(details: IStripePaymentDetails): void;

package/lib/esm/components/detail.js

@@ -15,6 +15,8 @@ export class StripeDetailElement extends CustomElement {
     WaitReady() {
         return Promise.resolve();
     }
+    AddChangeListener(listener) { }
+    RemoveChangeListener(listener) { }
     ToggleFocus(focused) {
         const input = this.GetInput_();
         input && (focused ? input.focus() : input.blur());
@@ -25,7 +27,7 @@ export class StripeDetailElement extends CustomElement {
     }
     AddDetails(details) {
         const input = this.GetInput_();
-        if (!this.name || (!input && !this.value)) {
+        if (!this.name || (!(input === null || input === void 0 ? void 0 : input.value) && !this.value)) {
             return;
         }
         details.billingDetails = (details.billingDetails || {});

package/lib/esm/components/field.d.ts

@@ -1,11 +1,14 @@
 /// <reference types="stripe-v3" />
 import { IElementScopeCreatedCallbackParams } from "@benbraide/inlinejs";
 import { CustomElement } from "@benbraide/inlinejs-element";
-import { IStripeElement, IStripeField, IStripePaymentDetails } from "../types";
+import { IStripeElement, IStripeField, IStripePaymentDetails, StripeFieldChangeHandlerType } from "../types";
 export declare class StripeFieldElement extends CustomElement implements IStripeField {
     protected stripeField_: stripe.elements.Element | null;
     protected isReady_: boolean;
+    protected isComplete_: boolean;
+    protected lastError_: stripe.Error | null;
     protected readyWaiters_: (() => void)[];
+    protected changeListeners: StripeFieldChangeHandlerType[];
     stripe: IStripeElement | null;
     options: stripe.elements.ElementsOptions | null;
     type: string;
@@ -14,6 +17,8 @@ export declare class StripeFieldElement extends CustomElement implements IStripe
     onerrors: string;
     constructor();
     WaitReady(): Promise<void>;
+    AddChangeListener(listener: StripeFieldChangeHandlerType): void;
+    RemoveChangeListener(listener: StripeFieldChangeHandlerType): void;
     ToggleFocus(focused: boolean): void;
     Reset(): void;
     AddDetails(details: IStripePaymentDetails): void;

package/lib/esm/components/field.js

@@ -22,7 +22,10 @@ export class StripeFieldElement extends CustomElement {
         super();
         this.stripeField_ = null;
         this.isReady_ = false;
+        this.isComplete_ = false;
+        this.lastError_ = null;
         this.readyWaiters_ = new Array();
+        this.changeListeners = new Array();
         this.stripe = null;
         this.options = null;
         this.type = '';
@@ -35,6 +38,13 @@ export class StripeFieldElement extends CustomElement {
             this.isReady_ ? resolve() : this.readyWaiters_.push(() => resolve());
         });
     }
+    AddChangeListener(listener) {
+        this.changeListeners.push(listener);
+    }
+    RemoveChangeListener(listener) {
+        const index = this.changeListeners.indexOf(listener);
+        (index >= 0) && this.changeListeners.splice(index, 1);
+    }
     ToggleFocus(focused) {
         var _a, _b;
         (this.stripeField_ && (focused ? (_a = this.stripeField_) === null || _a === void 0 ? void 0 : _a.focus() : (_b = this.stripeField_) === null || _b === void 0 ? void 0 : _b.blur()));
@@ -80,23 +90,25 @@ export class StripeFieldElement extends CustomElement {
                         this.readyWaiters_.splice(0).forEach(waiter => JournalTry(waiter));
                     });
                     this.stripeField_.on('change', (event) => {
-                        var _a;
-                        if (event === null || event === void 0 ? void 0 : event.error) {
+                        if (((event === null || event === void 0 ? void 0 : event.error) || null) !== this.lastError_) {
+                            this.lastError_ = ((event === null || event === void 0 ? void 0 : event.error) || null);
                             EvaluateLater({
                                 componentId: this.componentId_,
                                 contextElement: this,
                                 expression: this.onerrors,
                                 disableFunctionCall: false,
-                            })(undefined, [], { error: event.error });
+                            })(undefined, [this.lastError_], { error: this.lastError_ });
+                            this.changeListeners.forEach(listener => JournalTry(() => listener('error', this.lastError_)));
                         }
-                        else if (event === null || event === void 0 ? void 0 : event.complete) {
+                        if (((event === null || event === void 0 ? void 0 : event.complete) || false) != this.isComplete_) {
+                            this.isComplete_ = ((event === null || event === void 0 ? void 0 : event.complete) || false);
                             EvaluateLater({
                                 componentId: this.componentId_,
                                 contextElement: this,
                                 expression: this.oncomplete,
                                 disableFunctionCall: false,
-                            })();
-                            (_a = this.GetStripe_()) === null || _a === void 0 ? void 0 : _a.FocusNextField(this);
+                            })(undefined, [this.isComplete_], { complete: this.isComplete_ });
+                            this.changeListeners.forEach(listener => JournalTry(() => listener('complete', this.isComplete_)));
                         }
                     });
                     this.stripeField_.mount(this);

package/lib/esm/components/payment-method.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="stripe-v3" />
 import { CustomElement } from "@benbraide/inlinejs-element";
-import { IStripeField, IStripePaymentDetails } from "../types";
+import { IStripeField, IStripePaymentDetails, StripeFieldChangeHandlerType } from "../types";
 export declare class StripePaymentMenthodElement extends CustomElement implements IStripeField {
     value: stripe.elements.Element | string;
     constructor();
     WaitReady(): Promise<void>;
+    AddChangeListener(listener: StripeFieldChangeHandlerType): void;
+    RemoveChangeListener(listener: StripeFieldChangeHandlerType): void;
     ToggleFocus(focused: boolean): void;
     Reset(): void;
     AddDetails(details: IStripePaymentDetails): void;

package/lib/esm/components/payment-method.js

@@ -16,6 +16,8 @@ export class StripePaymentMenthodElement extends CustomElement {
     WaitReady() {
         return Promise.resolve();
     }
+    AddChangeListener(listener) { }
+    RemoveChangeListener(listener) { }
     ToggleFocus(focused) { }
     Reset() { }
     AddDetails(details) {

package/lib/esm/components/stripe.d.ts

@@ -11,11 +11,15 @@ export declare class StripeElement extends CustomElement implements IStripeEleme
     protected fields_: Array<IStripeField> | null;
     protected readyFields_: Array<IStripeField> | null;
     protected instanceWaiters_: (() => void)[];
+    protected completeFields_: Array<IStripeField> | null;
+    protected errorFields_: Array<IStripeField> | null;
     options: stripe.elements.ElementsOptions | null;
     publicKey: string;
     onready: string;
+    oncomplete: string;
+    onerrors: string;
     defer: boolean;
-    autofocus: boolean;
+    focusnext: boolean;
     constructor();
     AddStripeField(field: IStripeField): void;
     RemoveStripeField(field: IStripeField): void;

package/lib/esm/components/stripe.js

@@ -28,11 +28,15 @@ export class StripeElement extends CustomElement {
         this.fields_ = null;
         this.readyFields_ = null;
         this.instanceWaiters_ = new Array();
+        this.completeFields_ = null;
+        this.errorFields_ = null;
         this.options = null;
         this.publicKey = '';
         this.onready = '';
+        this.oncomplete = '';
+        this.onerrors = '';
         this.defer = false;
-        this.autofocus = false;
+        this.focusnext = false;
     }
     AddStripeField(field) {
         this.fields_ = (this.fields_ || []);
@@ -51,13 +55,54 @@ export class StripeElement extends CustomElement {
                 this.readyWaiters_.splice(0).forEach(waiter => JournalTry(waiter));
             });
         });
+        field.AddChangeListener((type, data) => {
+            if (type === 'complete') {
+                let changed = false;
+                this.completeFields_ = (this.completeFields_ || []);
+                if (data && !this.completeFields_.includes(field)) {
+                    this.completeFields_.push(field);
+                    changed = !!(this.readyFields_ && this.completeFields_.length == this.readyFields_.length);
+                }
+                else if (!data && this.completeFields_.includes(field)) {
+                    this.completeFields_ = this.completeFields_.filter(x => x !== field);
+                    changed = (this.completeFields_.length == 0);
+                }
+                changed && this.oncomplete && EvaluateLater({
+                    componentId: this.componentId_,
+                    contextElement: this,
+                    expression: this.oncomplete,
+                    disableFunctionCall: false,
+                })(undefined, [!!data], { complete: !!data });
+                !!data && this.focusnext && this.FocusNextField(field);
+            }
+            else if (type === 'error') {
+                let changed = false;
+                this.errorFields_ = (this.errorFields_ || []);
+                this.errorFields_.push(field);
+                this.errorFields_ = (this.errorFields_ || []);
+                if (data && !this.errorFields_.includes(field)) {
+                    this.errorFields_.push(field);
+                    changed = (this.errorFields_.length == 1);
+                }
+                else if (!data && this.errorFields_.includes(field)) {
+                    this.errorFields_ = this.errorFields_.filter(x => x !== field);
+                    changed = (this.errorFields_.length == 0);
+                }
+                changed && this.onerrors && EvaluateLater({
+                    componentId: this.componentId_,
+                    contextElement: this,
+                    expression: this.onerrors,
+                    disableFunctionCall: false,
+                })(undefined, [data], { error: data });
+            }
+        });
     }
     RemoveStripeField(field) {
         this.fields_ && (this.fields_ = this.fields_.filter(x => x !== field));
         this.readyFields_ && (this.readyFields_ = this.readyFields_.filter(x => x !== field));
     }
     FocusNextField(field) {
-        if (this.autofocus && this.fields_) {
+        if (this.fields_) {
             const index = this.fields_.indexOf(field);
             (index >= 0 && index < this.fields_.length - 1) && this.fields_[index + 1].ToggleFocus(true);
         }
@@ -146,12 +191,18 @@ __decorate([
 __decorate([
     Property({ type: 'string' })
 ], StripeElement.prototype, "onready", void 0);
+__decorate([
+    Property({ type: 'string' })
+], StripeElement.prototype, "oncomplete", void 0);
+__decorate([
+    Property({ type: 'string' })
+], StripeElement.prototype, "onerrors", void 0);
 __decorate([
     Property({ type: 'boolean' })
 ], StripeElement.prototype, "defer", void 0);
 __decorate([
     Property({ type: 'boolean' })
-], StripeElement.prototype, "autofocus", void 0);
+], StripeElement.prototype, "focusnext", void 0);
 export function StripeElementCompact() {
     RegisterCustomElement(StripeElement, 'stripe');
 }

package/lib/esm/types.d.ts

@@ -3,8 +3,12 @@ export interface IStripePaymentDetails {
     method?: stripe.elements.Element | string;
     billingDetails?: stripe.BillingDetails;
 }
+export declare type StripeFieldChangeType = 'error' | 'complete';
+export declare type StripeFieldChangeHandlerType = (type: StripeFieldChangeType, data: any) => void;
 export interface IStripeField {
     WaitReady(): Promise<void>;
+    AddChangeListener(listener: StripeFieldChangeHandlerType): void;
+    RemoveChangeListener(listener: StripeFieldChangeHandlerType): void;
     ToggleFocus(focused: boolean): void;
     Reset(): void;
     AddDetails(details: IStripePaymentDetails): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@benbraide/inlinejs-stripe",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "description": "Run javascript code by embedding them in your HTML using the element as context.",
   "main": "./lib/common/index.js",
   "module": "./lib/esm/index.js",