@benbraide/inlinejs-stripe 2.2.0 → 2.3.1

package/lib/esm/components/field.js

@@ -4,18 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { EvaluateLater, JournalTry } from "@benbraide/inlinejs";
+import { EvaluateLater, JournalError, JournalTry, JournalWarn } from "@benbraide/inlinejs";
 import { Property, RegisterCustomElement } from "@benbraide/inlinejs-element";
 import { StripeGenericField } from "./generic-field";
 export class StripeFieldElement extends StripeGenericField {
@@ -29,9 +18,9 @@ export class StripeFieldElement extends StripeGenericField {
         this.changeListeners = new Array();
         this.options = null;
         this.type = '';
-        this.onready = '';
-        this.oncomplete = '';
-        this.onerrors = '';
+        this.oncustomready = '';
+        this.oncustomcomplete = '';
+        this.oncustomerror = '';
     }
     IsInteractive() {
         return true;
@@ -59,66 +48,66 @@ export class StripeFieldElement extends StripeGenericField {
     AddDetails(details) {
         (this.stripeField_ && (this.type === 'card' || this.type === 'number' || this.type === 'cardNumber')) && (details.method = this.stripeField_);
     }
-    HandleElementScopeCreated_(_a, postAttributesCallback) {
-        var { scope } = _a, rest = __rest(_a, ["scope"]);
-        super.HandleElementScopeCreated_(Object.assign({ scope }, rest), postAttributesCallback);
-        scope.AddPostProcessCallback(() => {
+    HandleElementScopeDestroyed_(scope) {
+        var _a;
+        super.HandleElementScopeDestroyed_(scope);
+        (_a = this.GetStripe_()) === null || _a === void 0 ? void 0 : _a.RemoveStripeField(this);
+        this.stripeField_ = null;
+    }
+    HandlePostProcess_() {
+        var _a;
+        super.HandlePostProcess_();
+        (_a = this.GetStripe_()) === null || _a === void 0 ? void 0 : _a.WaitInstance().then((details) => {
             var _a;
-            (_a = this.GetStripe_()) === null || _a === void 0 ? void 0 : _a.WaitInstance().then((details) => {
-                var _a;
-                if (!(details === null || details === void 0 ? void 0 : details.stripe)) {
-                    return;
-                }
-                let type = '';
-                if (['number', 'expiry', 'cvc'].includes(this.type)) {
-                    type = `card${this.type.substring(0, 1).toUpperCase()}${this.type.substring(1)}`;
-                }
-                else if (['card', 'cardNumber', 'cardExpiry', 'cardCvc', 'postalCode', 'paymentRequestButton', 'iban', 'idealBank'].includes(this.type)) {
-                    type = this.type;
+            if (!(details === null || details === void 0 ? void 0 : details.stripe) || !details.elements) {
+                return;
+            }
+            let type = '';
+            if (['number', 'expiry', 'cvc'].includes(this.type)) {
+                type = `card${this.type.substring(0, 1).toUpperCase()}${this.type.substring(1)}`;
+            }
+            else if (['card', 'cardNumber', 'cardExpiry', 'cardCvc', 'postalCode', 'paymentRequestButton', 'iban', 'idealBank'].includes(this.type)) {
+                type = this.type;
+            }
+            if (!type) {
+                JournalWarn('The element type provided is invalid.', 'StripeField.Mount', this);
+                return;
+            }
+            this.stripeField_ = details.elements.create(type, (this.options || ((_a = this.GetStripe_()) === null || _a === void 0 ? void 0 : _a.options) || undefined));
+            this.stripeField_.on('ready', () => {
+                this.isReady_ = true;
+                this.oncustomready && EvaluateLater({
+                    componentId: this.componentId_,
+                    contextElement: this,
+                    expression: this.oncustomready,
+                    disableFunctionCall: false,
+                })();
+                this.readyWaiters_.splice(0).forEach(waiter => JournalTry(waiter));
+            });
+            this.stripeField_.on('change', (event) => {
+                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);
+                    this.oncustomerror && EvaluateLater({
+                        componentId: this.componentId_,
+                        contextElement: this,
+                        expression: this.oncustomerror,
+                        disableFunctionCall: false,
+                    })(undefined, [this.lastError_], { error: this.lastError_ });
+                    this.changeListeners.forEach(listener => JournalTry(() => listener('error', this.lastError_)));
                 }
-                if (type && details.elements) {
-                    this.stripeField_ = details.elements.create(type, (this.options || ((_a = this.GetStripe_()) === null || _a === void 0 ? void 0 : _a.options) || undefined));
-                    this.stripeField_.on('ready', () => {
-                        this.isReady_ = true;
-                        this.onready && EvaluateLater({
-                            componentId: this.componentId_,
-                            contextElement: this,
-                            expression: this.onready,
-                            disableFunctionCall: false,
-                        })();
-                        this.readyWaiters_.splice(0).forEach(waiter => JournalTry(waiter));
-                    });
-                    this.stripeField_.on('change', (event) => {
-                        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, [this.lastError_], { error: this.lastError_ });
-                            this.changeListeners.forEach(listener => JournalTry(() => listener('error', this.lastError_)));
-                        }
-                        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,
-                            })(undefined, [this.isComplete_], { complete: this.isComplete_ });
-                            this.changeListeners.forEach(listener => JournalTry(() => listener('complete', this.isComplete_)));
-                        }
-                    });
-                    this.stripeField_.mount(this);
+                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);
+                    this.oncustomcomplete && EvaluateLater({
+                        componentId: this.componentId_,
+                        contextElement: this,
+                        expression: this.oncustomcomplete,
+                        disableFunctionCall: false,
+                    })(undefined, [this.isComplete_], { complete: this.isComplete_ });
+                    this.changeListeners.forEach(listener => JournalTry(() => listener('complete', this.isComplete_)));
                 }
             });
-        });
-        scope.AddUninitCallback(() => {
-            var _a;
-            (_a = this.GetStripe_()) === null || _a === void 0 ? void 0 : _a.RemoveStripeField(this);
-            this.stripeField_ = null;
-        });
+            this.stripeField_.mount(this);
+        }).catch(err => JournalError(err, 'StripeField.Mount', this));
     }
 }
 __decorate([
@@ -129,13 +118,13 @@ __decorate([
 ], StripeFieldElement.prototype, "type", void 0);
 __decorate([
     Property({ type: 'string' })
-], StripeFieldElement.prototype, "onready", void 0);
+], StripeFieldElement.prototype, "oncustomready", void 0);
 __decorate([
     Property({ type: 'string' })
-], StripeFieldElement.prototype, "oncomplete", void 0);
+], StripeFieldElement.prototype, "oncustomcomplete", void 0);
 __decorate([
     Property({ type: 'string' })
-], StripeFieldElement.prototype, "onerrors", void 0);
+], StripeFieldElement.prototype, "oncustomerror", void 0);
 export function StripeFieldElementCompact() {
     RegisterCustomElement(StripeFieldElement, 'stripe-field');
 }

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

@@ -1,4 +1,3 @@
-import { IElementScopeCreatedCallbackParams } from "@benbraide/inlinejs";
 import { CustomElement } from "@benbraide/inlinejs-element";
 import { IStripeElement, IStripeField, IStripePaymentDetails, StripeFieldChangeHandlerType } from "../types";
 export declare class StripeGenericField extends CustomElement implements IStripeField {
@@ -10,6 +9,6 @@ export declare class StripeGenericField extends CustomElement implements IStripe
     ToggleFocus(focused: boolean): void;
     Reset(): void;
     AddDetails(details: IStripePaymentDetails): void;
-    protected HandleElementScopeCreated_({ scope, ...rest }: IElementScopeCreatedCallbackParams, postAttributesCallback?: () => void): void;
+    protected HandlePostAttributesProcessPostfix_(): void;
     protected GetStripe_(): IStripeElement | null;
 }

package/lib/esm/components/generic-field.js

@@ -4,17 +4,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { FindAncestor } from "@benbraide/inlinejs";
 import { CustomElement, Property } from "@benbraide/inlinejs-element";
 export class StripeGenericField extends CustomElement {
@@ -33,13 +22,10 @@ export class StripeGenericField extends CustomElement {
     ToggleFocus(focused) { }
     Reset() { }
     AddDetails(details) { }
-    HandleElementScopeCreated_(_a, postAttributesCallback) {
-        var { scope } = _a, rest = __rest(_a, ["scope"]);
-        super.HandleElementScopeCreated_(Object.assign({ scope }, rest), () => {
-            var _a;
-            (_a = this.GetStripe_()) === null || _a === void 0 ? void 0 : _a.AddStripeField(this);
-            postAttributesCallback && postAttributesCallback();
-        });
+    HandlePostAttributesProcessPostfix_() {
+        var _a;
+        super.HandlePostAttributesProcessPostfix_();
+        (_a = this.GetStripe_()) === null || _a === void 0 ? void 0 : _a.AddStripeField(this);
     }
     GetStripe_() {
         return (this.stripe || FindAncestor(this, ancestor => ('AddStripeField' in ancestor)));

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

@@ -1,5 +1,5 @@
 /// <reference types="stripe-v3" />
-import { IElementScopeCreatedCallbackParams } from "@benbraide/inlinejs";
+import { IElementScope } from "@benbraide/inlinejs";
 import { CustomElement } from "@benbraide/inlinejs-element";
 import { IStripeDetails, IStripeElement, IStripeField } from "../types";
 export declare class StripeElement extends CustomElement implements IStripeElement {
@@ -17,9 +17,9 @@ export declare class StripeElement extends CustomElement implements IStripeEleme
     protected errorFields_: Array<IStripeField> | null;
     options: stripe.elements.ElementsOptions | null;
     publicKey: string;
-    onready: string;
-    oncomplete: string;
-    onerrors: string;
+    oncustomready: string;
+    oncustomcomplete: string;
+    oncustomerror: string;
     defer: boolean;
     focusnext: boolean;
     constructor();
@@ -33,7 +33,8 @@ export declare class StripeElement extends CustomElement implements IStripeEleme
     Pay(clientSecret: string, save?: boolean): Promise<false | stripe.PaymentIntentResponse>;
     Setup(clientSecret: string): Promise<false | stripe.PaymentIntentResponse>;
     WaitReady(): Promise<void>;
-    protected HandleElementScopeCreated_({ scope, ...rest }: IElementScopeCreatedCallbackParams, postAttributesCallback?: () => void): void;
+    protected HandleElementScopeDestroyed_(scope: IElementScope): void;
+    protected HandlePostProcess_(): void;
     protected PayOrSetup_(pay: boolean, clientSecret: string, save?: boolean): Promise<false | stripe.PaymentIntentResponse>;
 }
 export declare function StripeElementCompact(): void;

package/lib/esm/components/stripe.js

@@ -4,17 +4,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { EvaluateLater, JournalTry } from "@benbraide/inlinejs";
 import { CustomElement, Property, RegisterCustomElement } from "@benbraide/inlinejs-element";
 export class StripeElement extends CustomElement {
@@ -34,9 +23,9 @@ export class StripeElement extends CustomElement {
         this.errorFields_ = null;
         this.options = null;
         this.publicKey = '';
-        this.onready = '';
-        this.oncomplete = '';
-        this.onerrors = '';
+        this.oncustomready = '';
+        this.oncustomcomplete = '';
+        this.oncustomerror = '';
         this.defer = false;
         this.focusnext = false;
     }
@@ -52,10 +41,10 @@ export class StripeElement extends CustomElement {
             }
             (this.fields_ && this.readyFields_ && this.fields_.length <= this.readyFields_.length) && JournalTry(() => {
                 this.isReady_ = true;
-                this.onready && EvaluateLater({
+                this.oncustomready && EvaluateLater({
                     componentId: this.componentId_,
                     contextElement: this,
-                    expression: this.onready,
+                    expression: this.oncustomready,
                     disableFunctionCall: false,
                 })();
                 this.readyWaiters_.splice(0).forEach(waiter => JournalTry(waiter));
@@ -73,10 +62,10 @@ export class StripeElement extends CustomElement {
                     this.completeFields_ = this.completeFields_.filter(x => x !== field);
                     changed = !!(this.interactiveFields_ && (this.completeFields_.length == (this.interactiveFields_.length - 1)));
                 }
-                changed && this.oncomplete && EvaluateLater({
+                changed && this.oncustomcomplete && EvaluateLater({
                     componentId: this.componentId_,
                     contextElement: this,
-                    expression: this.oncomplete,
+                    expression: this.oncustomcomplete,
                     disableFunctionCall: false,
                 })(undefined, [!!data], { complete: !!data });
                 !!data && this.focusnext && this.FocusNextField(field);
@@ -94,10 +83,10 @@ export class StripeElement extends CustomElement {
                     this.errorFields_ = this.errorFields_.filter(x => x !== field);
                     changed = (this.errorFields_.length == 0);
                 }
-                changed && this.onerrors && EvaluateLater({
+                changed && this.oncustomerror && EvaluateLater({
                     componentId: this.componentId_,
                     contextElement: this,
-                    expression: this.onerrors,
+                    expression: this.oncustomerror,
                     disableFunctionCall: false,
                 })(undefined, [data], { error: data });
             }
@@ -154,11 +143,13 @@ export class StripeElement extends CustomElement {
             this.isReady_ ? resolve() : this.readyWaiters_.push(() => resolve());
         });
     }
-    HandleElementScopeCreated_(_a, postAttributesCallback) {
-        var { scope } = _a, rest = __rest(_a, ["scope"]);
-        super.HandleElementScopeCreated_(Object.assign({ scope }, rest), postAttributesCallback);
-        scope.AddPostProcessCallback(() => (!this.defer && this.Mount()));
-        scope.AddUninitCallback(() => (this.stripe_ = null));
+    HandleElementScopeDestroyed_(scope) {
+        super.HandleElementScopeDestroyed_(scope);
+        this.stripe_ = null;
+    }
+    HandlePostProcess_() {
+        super.HandlePostProcess_();
+        !this.defer && this.Mount();
     }
     PayOrSetup_(pay, clientSecret, save = false) {
         return new Promise((resolve, reject) => {
@@ -173,7 +164,12 @@ export class StripeElement extends CustomElement {
                     return resolve(false);
                 }
                 let cardDetails;
-                if (typeof paymentDetails.method !== 'string') {
+                if (typeof paymentDetails.method === 'string') { // Payment Method ID
+                    cardDetails = {
+                        payment_method: paymentDetails.method,
+                    };
+                }
+                else { // Stripe Element (e.g., CardElement)
                     cardDetails = {
                         payment_method: {
                             card: paymentDetails.method,
@@ -181,11 +177,6 @@ export class StripeElement extends CustomElement {
                         },
                     };
                 }
-                else {
-                    cardDetails = {
-                        payment_method: paymentDetails.method,
-                    };
-                }
                 if (pay) {
                     ((_b = paymentDetails.billingDetails) === null || _b === void 0 ? void 0 : _b.email) && (cardDetails.receipt_email = paymentDetails.billingDetails.email);
                     save && (cardDetails.setup_future_usage = 'off_session');
@@ -206,13 +197,13 @@ __decorate([
 ], StripeElement.prototype, "publicKey", void 0);
 __decorate([
     Property({ type: 'string' })
-], StripeElement.prototype, "onready", void 0);
+], StripeElement.prototype, "oncustomready", void 0);
 __decorate([
     Property({ type: 'string' })
-], StripeElement.prototype, "oncomplete", void 0);
+], StripeElement.prototype, "oncustomcomplete", void 0);
 __decorate([
     Property({ type: 'string' })
-], StripeElement.prototype, "onerrors", void 0);
+], StripeElement.prototype, "oncustomerror", void 0);
 __decorate([
     Property({ type: 'boolean' })
 ], StripeElement.prototype, "defer", void 0);

package/lib/esm/index.d.ts

@@ -2,5 +2,4 @@ export * from './components/stripe';
 export * from './components/field';
 export * from './components/detail';
 export * from './components/payment-method';
-export * from './directive/stripe';
 export * from './entry';

package/lib/esm/index.js

@@ -2,5 +2,4 @@ export * from './components/stripe';
 export * from './components/field';
 export * from './components/detail';
 export * from './components/payment-method';
-export * from './directive/stripe';
 export * from './entry';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@benbraide/inlinejs-stripe",
-  "version": "2.2.0",
+  "version": "2.3.1",
   "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",
@@ -54,8 +54,8 @@
     "webpack": "^5.41.0"
   },
   "dependencies": {
-    "@benbraide/inlinejs": "^1.3.1",
-    "@benbraide/inlinejs-element": "^2.2.0",
+    "@benbraide/inlinejs": "^1.4.7",
+    "@benbraide/inlinejs-element": "^2.2.3",
     "webpack-cli": "^4.7.2"
   }
 }

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

@@ -1,24 +0,0 @@
-/// <reference types="stripe-v3" />
-export interface IStripeStyle {
-    base?: stripe.elements.Style;
-    complete?: stripe.elements.Style;
-    empty?: stripe.elements.Style;
-    invalid?: stripe.elements.Style;
-    paymentRequestButton?: stripe.elements.PaymentRequestButtonStyleOptions;
-}
-export interface IStripeClass {
-    base?: string;
-    complete?: string;
-    empty?: string;
-    focus?: string;
-    invalid?: string;
-    webkitAutofill?: string;
-}
-export interface IStripeBillingDetails {
-    name: string;
-    email?: string;
-    phone?: string;
-    address?: string;
-}
-export declare const StripeDirectiveHandler: import("@benbraide/inlinejs").IDirectiveHandlerCallbackDetails;
-export declare function StripeDirectiveHandlerCompact(): void;