@benbraide/inlinejs-stripe 2.0.4 → 2.0.6

package/lib/common/components/field.js

@@ -20,7 +20,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StripeFieldElementCompact = exports.StripeFieldElement = void 0;
 const inlinejs_1 = require("@benbraide/inlinejs");
 const inlinejs_element_1 = require("@benbraide/inlinejs-element");
-class StripeFieldElement extends inlinejs_element_1.CustomElement {
+const generic_field_1 = require("./generic-field");
+class StripeFieldElement extends generic_field_1.StripeGenericField {
     constructor() {
         super();
         this.stripeField_ = null;
@@ -29,13 +30,15 @@ class StripeFieldElement extends inlinejs_element_1.CustomElement {
         this.lastError_ = null;
         this.readyWaiters_ = new Array();
         this.changeListeners = new Array();
-        this.stripe = null;
         this.options = null;
         this.type = '';
         this.onready = '';
         this.oncomplete = '';
         this.onerrors = '';
     }
+    IsInteractive() {
+        return true;
+    }
     WaitReady() {
         return new Promise(resolve => {
             this.isReady_ ? resolve() : this.readyWaiters_.push(() => resolve());
@@ -61,16 +64,12 @@ class StripeFieldElement extends inlinejs_element_1.CustomElement {
     }
     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();
-        });
+        super.HandleElementScopeCreated_(Object.assign({ scope }, rest), postAttributesCallback);
         scope.AddPostProcessCallback(() => {
             var _a;
-            (_a = this.GetStripe_()) === null || _a === void 0 ? void 0 : _a.WaitInstance().then((stripe) => {
+            (_a = this.GetStripe_()) === null || _a === void 0 ? void 0 : _a.WaitInstance().then((details) => {
                 var _a;
-                if (!stripe) {
+                if (!(details === null || details === void 0 ? void 0 : details.stripe)) {
                     return;
                 }
                 let type = '';
@@ -80,8 +79,8 @@ class StripeFieldElement extends inlinejs_element_1.CustomElement {
                 else if (['card', 'cardNumber', 'cardExpiry', 'cardCvc', 'postalCode', 'paymentRequestButton', 'iban', 'idealBank'].includes(this.type)) {
                     type = this.type;
                 }
-                if (type) {
-                    this.stripeField_ = stripe.elements().create(type, (this.options || ((_a = this.GetStripe_()) === null || _a === void 0 ? void 0 : _a.options) || undefined));
+                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 && (0, inlinejs_1.EvaluateLater)({
@@ -124,13 +123,7 @@ class StripeFieldElement extends inlinejs_element_1.CustomElement {
             this.stripeField_ = null;
         });
     }
-    GetStripe_() {
-        return (this.stripe || (0, inlinejs_1.FindAncestor)(this, ancestor => ('AddStripeField' in ancestor)));
-    }
 }
-__decorate([
-    (0, inlinejs_element_1.Property)({ type: 'object', checkStoredObject: true })
-], StripeFieldElement.prototype, "stripe", void 0);
 __decorate([
     (0, inlinejs_element_1.Property)({ type: 'object', checkStoredObject: true })
 ], StripeFieldElement.prototype, "options", void 0);

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

@@ -0,0 +1,15 @@
+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 {
+    stripe: IStripeElement | null;
+    IsInteractive(): boolean;
+    WaitReady(): Promise<void>;
+    AddChangeListener(listener: StripeFieldChangeHandlerType): void;
+    RemoveChangeListener(listener: StripeFieldChangeHandlerType): void;
+    ToggleFocus(focused: boolean): void;
+    Reset(): void;
+    AddDetails(details: IStripePaymentDetails): void;
+    protected HandleElementScopeCreated_({ scope, ...rest }: IElementScopeCreatedCallbackParams, postAttributesCallback?: () => void): void;
+    protected GetStripe_(): IStripeElement | null;
+}

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

@@ -0,0 +1,54 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StripeGenericField = void 0;
+const inlinejs_1 = require("@benbraide/inlinejs");
+const inlinejs_element_1 = require("@benbraide/inlinejs-element");
+class StripeGenericField extends inlinejs_element_1.CustomElement {
+    constructor() {
+        super(...arguments);
+        this.stripe = null;
+    }
+    IsInteractive() {
+        return false;
+    }
+    WaitReady() {
+        return Promise.resolve();
+    }
+    AddChangeListener(listener) { }
+    RemoveChangeListener(listener) { }
+    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();
+        });
+    }
+    GetStripe_() {
+        return (this.stripe || (0, inlinejs_1.FindAncestor)(this, ancestor => ('AddStripeField' in ancestor)));
+    }
+}
+__decorate([
+    (0, inlinejs_element_1.Property)({ type: 'object', checkStoredObject: true })
+], StripeGenericField.prototype, "stripe", void 0);
+exports.StripeGenericField = StripeGenericField;

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

@@ -1,14 +1,9 @@
 /// <reference types="stripe-v3" />
-import { CustomElement } from "@benbraide/inlinejs-element";
-import { IStripeField, IStripePaymentDetails, StripeFieldChangeHandlerType } from "../types";
-export declare class StripePaymentMenthodElement extends CustomElement implements IStripeField {
+import { IStripePaymentDetails } from "../types";
+import { StripeGenericField } from "./generic-field";
+export declare class StripePaymentMenthodElement extends StripeGenericField {
     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;
 }
 export declare function StripePaymentMenthodElementCompact(): void;

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

@@ -8,7 +8,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StripePaymentMenthodElementCompact = exports.StripePaymentMenthodElement = void 0;
 const inlinejs_element_1 = require("@benbraide/inlinejs-element");
-class StripePaymentMenthodElement extends inlinejs_element_1.CustomElement {
+const generic_field_1 = require("./generic-field");
+class StripePaymentMenthodElement extends generic_field_1.StripeGenericField {
     constructor() {
         super({
             isTemplate: true,
@@ -16,13 +17,6 @@ class StripePaymentMenthodElement extends inlinejs_element_1.CustomElement {
         });
         this.value = '';
     }
-    WaitReady() {
-        return Promise.resolve();
-    }
-    AddChangeListener(listener) { }
-    RemoveChangeListener(listener) { }
-    ToggleFocus(focused) { }
-    Reset() { }
     AddDetails(details) {
         this.value && (details.method = this.value);
     }

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

@@ -1,9 +1,10 @@
 /// <reference types="stripe-v3" />
 import { IElementScopeCreatedCallbackParams } from "@benbraide/inlinejs";
 import { CustomElement } from "@benbraide/inlinejs-element";
-import { IStripeElement, IStripeField } from "../types";
+import { IStripeDetails, IStripeElement, IStripeField } from "../types";
 export declare class StripeElement extends CustomElement implements IStripeElement {
     protected stripe_: stripe.Stripe | null;
+    protected elements_: stripe.elements.Elements | null;
     protected mounting_: boolean;
     protected mounted_: boolean;
     protected isReady_: boolean;
@@ -11,6 +12,7 @@ export declare class StripeElement extends CustomElement implements IStripeEleme
     protected fields_: Array<IStripeField> | null;
     protected readyFields_: Array<IStripeField> | null;
     protected instanceWaiters_: (() => void)[];
+    protected interactiveFields_: Array<IStripeField> | null;
     protected completeFields_: Array<IStripeField> | null;
     protected errorFields_: Array<IStripeField> | null;
     options: stripe.elements.ElementsOptions | null;
@@ -24,8 +26,9 @@ export declare class StripeElement extends CustomElement implements IStripeEleme
     AddStripeField(field: IStripeField): void;
     RemoveStripeField(field: IStripeField): void;
     FocusNextField(field: IStripeField): void;
+    GetDetails(): IStripeDetails;
     GetInstance(): stripe.Stripe | null;
-    WaitInstance(): Promise<stripe.Stripe | null>;
+    WaitInstance(): Promise<IStripeDetails | null>;
     Mount(): void;
     Pay(clientSecret: string, save?: boolean): Promise<false | stripe.PaymentIntentResponse>;
     Setup(clientSecret: string): Promise<false | stripe.PaymentIntentResponse>;

package/lib/common/components/stripe.js

@@ -24,6 +24,7 @@ class StripeElement extends inlinejs_element_1.CustomElement {
     constructor() {
         super();
         this.stripe_ = null;
+        this.elements_ = null;
         this.mounting_ = false;
         this.mounted_ = false;
         this.isReady_ = false;
@@ -31,6 +32,7 @@ class StripeElement extends inlinejs_element_1.CustomElement {
         this.fields_ = null;
         this.readyFields_ = null;
         this.instanceWaiters_ = new Array();
+        this.interactiveFields_ = null;
         this.completeFields_ = null;
         this.errorFields_ = null;
         this.options = null;
@@ -47,6 +49,10 @@ class StripeElement extends inlinejs_element_1.CustomElement {
         field.WaitReady().then(() => {
             this.readyFields_ = (this.readyFields_ || []);
             this.readyFields_.push(field);
+            if (field.IsInteractive()) {
+                this.interactiveFields_ = (this.interactiveFields_ || []);
+                this.interactiveFields_.push(field);
+            }
             (this.fields_ && this.readyFields_ && this.fields_.length <= this.readyFields_.length) && (0, inlinejs_1.JournalTry)(() => {
                 this.isReady_ = true;
                 this.onready && (0, inlinejs_1.EvaluateLater)({
@@ -64,11 +70,11 @@ class StripeElement extends inlinejs_element_1.CustomElement {
                 this.completeFields_ = (this.completeFields_ || []);
                 if (data && !this.completeFields_.includes(field)) {
                     this.completeFields_.push(field);
-                    changed = !!(this.readyFields_ && this.completeFields_.length == this.readyFields_.length);
+                    changed = !!(this.interactiveFields_ && this.completeFields_.length == this.interactiveFields_.length);
                 }
                 else if (!data && this.completeFields_.includes(field)) {
                     this.completeFields_ = this.completeFields_.filter(x => x !== field);
-                    changed = !!(this.readyFields_ && (this.completeFields_.length == (this.readyFields_.length - 1)));
+                    changed = !!(this.interactiveFields_ && (this.completeFields_.length == (this.interactiveFields_.length - 1)));
                 }
                 changed && this.oncomplete && (0, inlinejs_1.EvaluateLater)({
                     componentId: this.componentId_,
@@ -103,6 +109,9 @@ class StripeElement extends inlinejs_element_1.CustomElement {
     RemoveStripeField(field) {
         this.fields_ && (this.fields_ = this.fields_.filter(x => x !== field));
         this.readyFields_ && (this.readyFields_ = this.readyFields_.filter(x => x !== field));
+        this.interactiveFields_ && (this.interactiveFields_ = this.interactiveFields_.filter(x => x !== field));
+        this.completeFields_ && (this.completeFields_ = this.completeFields_.filter(x => x !== field));
+        this.errorFields_ && (this.errorFields_ = this.errorFields_.filter(x => x !== field));
     }
     FocusNextField(field) {
         if (this.fields_) {
@@ -110,12 +119,18 @@ class StripeElement extends inlinejs_element_1.CustomElement {
             (index >= 0 && index < this.fields_.length - 1) && this.fields_[index + 1].ToggleFocus(true);
         }
     }
+    GetDetails() {
+        return {
+            stripe: this.stripe_,
+            elements: this.elements_,
+        };
+    }
     GetInstance() {
         return this.stripe_;
     }
     WaitInstance() {
         return new Promise(resolve => {
-            this.mounted_ ? resolve(this.stripe_) : this.instanceWaiters_.push(() => resolve(this.stripe_));
+            this.mounted_ ? resolve(this.GetDetails()) : this.instanceWaiters_.push(() => resolve(this.GetDetails()));
         });
     }
     Mount() {
@@ -127,6 +142,7 @@ class StripeElement extends inlinejs_element_1.CustomElement {
             this.mounting_ = false;
             this.mounted_ = true;
             this.stripe_ = Stripe(this.publicKey);
+            this.elements_ = this.stripe_.elements();
             this.instanceWaiters_.splice(0).forEach(waiter => (0, inlinejs_1.JournalTry)(waiter));
         });
     }
@@ -149,37 +165,37 @@ class StripeElement extends inlinejs_element_1.CustomElement {
     }
     PayOrSetup_(pay, clientSecret, save = false) {
         return new Promise((resolve, reject) => {
-            this.WaitInstance().then((stripe) => {
+            this.WaitInstance().then((details) => {
                 var _a, _b;
-                if (!stripe) {
+                if (!(details === null || details === void 0 ? void 0 : details.stripe)) {
                     return resolve(false);
                 }
-                const details = {};
-                (_a = this.fields_) === null || _a === void 0 ? void 0 : _a.forEach(field => field.AddDetails(details));
-                if (!details.method) {
+                const paymentDetails = {};
+                (_a = this.fields_) === null || _a === void 0 ? void 0 : _a.forEach(field => field.AddDetails(paymentDetails));
+                if (!paymentDetails.method) {
                     return resolve(false);
                 }
                 let cardDetails;
-                if (typeof details.method !== 'string') {
+                if (typeof paymentDetails.method !== 'string') {
                     cardDetails = {
                         payment_method: {
-                            card: details.method,
-                            billing_details: details.billingDetails,
+                            card: paymentDetails.method,
+                            billing_details: paymentDetails.billingDetails,
                         },
                     };
                 }
                 else {
                     cardDetails = {
-                        payment_method: details.method,
+                        payment_method: paymentDetails.method,
                     };
                 }
                 if (pay) {
-                    ((_b = details.billingDetails) === null || _b === void 0 ? void 0 : _b.email) && (cardDetails.receipt_email = details.billingDetails.email);
+                    ((_b = paymentDetails.billingDetails) === null || _b === void 0 ? void 0 : _b.email) && (cardDetails.receipt_email = paymentDetails.billingDetails.email);
                     save && (cardDetails.setup_future_usage = 'off_session');
-                    stripe.confirmCardPayment(clientSecret, cardDetails).then(resolve).catch(reject);
+                    details.stripe.confirmCardPayment(clientSecret, cardDetails).then(resolve).catch(reject);
                 }
                 else {
-                    stripe.confirmCardSetup(clientSecret, cardDetails).then(resolve).catch(reject);
+                    details.stripe.confirmCardSetup(clientSecret, cardDetails).then(resolve).catch(reject);
                 }
             }).catch(reject);
         });

package/lib/common/types.d.ts

@@ -6,6 +6,7 @@ export interface IStripePaymentDetails {
 export declare type StripeFieldChangeType = 'error' | 'complete';
 export declare type StripeFieldChangeHandlerType = (type: StripeFieldChangeType, data: any) => void;
 export interface IStripeField {
+    IsInteractive(): boolean;
     WaitReady(): Promise<void>;
     AddChangeListener(listener: StripeFieldChangeHandlerType): void;
     RemoveChangeListener(listener: StripeFieldChangeHandlerType): void;
@@ -13,12 +14,17 @@ export interface IStripeField {
     Reset(): void;
     AddDetails(details: IStripePaymentDetails): void;
 }
+export interface IStripeDetails {
+    stripe: stripe.Stripe | null;
+    elements: stripe.elements.Elements | null;
+}
 export interface IStripeElement {
     options: stripe.elements.ElementsOptions | null;
     AddStripeField(field: IStripeField): void;
     RemoveStripeField(field: IStripeField): void;
     FocusNextField(field: IStripeField): void;
+    GetDetails(): IStripeDetails | null;
     GetInstance(): stripe.Stripe | null;
-    WaitInstance(): Promise<stripe.Stripe | null>;
+    WaitInstance(): Promise<IStripeDetails | null>;
     Mount(): void;
 }

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

@@ -1,13 +1,10 @@
-import { CustomElement } from "@benbraide/inlinejs-element";
-import { IStripeField, IStripePaymentDetails, StripeFieldChangeHandlerType } from "../types";
-export declare class StripeDetailElement extends CustomElement implements IStripeField {
+import { IStripePaymentDetails } from "../types";
+import { StripeGenericField } from "./generic-field";
+export declare class StripeDetailElement extends StripeGenericField {
     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

@@ -4,19 +4,15 @@ 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;
 };
-import { CustomElement, Property, RegisterCustomElement } from "@benbraide/inlinejs-element";
-export class StripeDetailElement extends CustomElement {
+import { Property, RegisterCustomElement } from "@benbraide/inlinejs-element";
+import { StripeGenericField } from "./generic-field";
+export class StripeDetailElement extends StripeGenericField {
     constructor() {
         super();
         this.input = null;
         this.name = '';
         this.value = '';
     }
-    WaitReady() {
-        return Promise.resolve();
-    }
-    AddChangeListener(listener) { }
-    RemoveChangeListener(listener) { }
     ToggleFocus(focused) {
         const input = this.GetInput_();
         input && (focused ? input.focus() : input.blur());

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

@@ -1,21 +1,21 @@
 /// <reference types="stripe-v3" />
 import { IElementScopeCreatedCallbackParams } from "@benbraide/inlinejs";
-import { CustomElement } from "@benbraide/inlinejs-element";
-import { IStripeElement, IStripeField, IStripePaymentDetails, StripeFieldChangeHandlerType } from "../types";
-export declare class StripeFieldElement extends CustomElement implements IStripeField {
+import { IStripePaymentDetails, StripeFieldChangeHandlerType } from "../types";
+import { StripeGenericField } from "./generic-field";
+export declare class StripeFieldElement extends StripeGenericField {
     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;
     onready: string;
     oncomplete: string;
     onerrors: string;
     constructor();
+    IsInteractive(): boolean;
     WaitReady(): Promise<void>;
     AddChangeListener(listener: StripeFieldChangeHandlerType): void;
     RemoveChangeListener(listener: StripeFieldChangeHandlerType): void;
@@ -23,6 +23,5 @@ export declare class StripeFieldElement extends CustomElement implements IStripe
     Reset(): void;
     AddDetails(details: IStripePaymentDetails): void;
     protected HandleElementScopeCreated_({ scope, ...rest }: IElementScopeCreatedCallbackParams, postAttributesCallback?: () => void): void;
-    protected GetStripe_(): IStripeElement | null;
 }
 export declare function StripeFieldElementCompact(): void;

package/lib/esm/components/field.js

@@ -15,9 +15,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { EvaluateLater, FindAncestor, JournalTry } from "@benbraide/inlinejs";
-import { CustomElement, Property, RegisterCustomElement } from "@benbraide/inlinejs-element";
-export class StripeFieldElement extends CustomElement {
+import { EvaluateLater, JournalTry } from "@benbraide/inlinejs";
+import { Property, RegisterCustomElement } from "@benbraide/inlinejs-element";
+import { StripeGenericField } from "./generic-field";
+export class StripeFieldElement extends StripeGenericField {
     constructor() {
         super();
         this.stripeField_ = null;
@@ -26,13 +27,15 @@ export class StripeFieldElement extends CustomElement {
         this.lastError_ = null;
         this.readyWaiters_ = new Array();
         this.changeListeners = new Array();
-        this.stripe = null;
         this.options = null;
         this.type = '';
         this.onready = '';
         this.oncomplete = '';
         this.onerrors = '';
     }
+    IsInteractive() {
+        return true;
+    }
     WaitReady() {
         return new Promise(resolve => {
             this.isReady_ ? resolve() : this.readyWaiters_.push(() => resolve());
@@ -58,16 +61,12 @@ export class StripeFieldElement extends CustomElement {
     }
     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();
-        });
+        super.HandleElementScopeCreated_(Object.assign({ scope }, rest), postAttributesCallback);
         scope.AddPostProcessCallback(() => {
             var _a;
-            (_a = this.GetStripe_()) === null || _a === void 0 ? void 0 : _a.WaitInstance().then((stripe) => {
+            (_a = this.GetStripe_()) === null || _a === void 0 ? void 0 : _a.WaitInstance().then((details) => {
                 var _a;
-                if (!stripe) {
+                if (!(details === null || details === void 0 ? void 0 : details.stripe)) {
                     return;
                 }
                 let type = '';
@@ -77,8 +76,8 @@ export class StripeFieldElement extends CustomElement {
                 else if (['card', 'cardNumber', 'cardExpiry', 'cardCvc', 'postalCode', 'paymentRequestButton', 'iban', 'idealBank'].includes(this.type)) {
                     type = this.type;
                 }
-                if (type) {
-                    this.stripeField_ = stripe.elements().create(type, (this.options || ((_a = this.GetStripe_()) === null || _a === void 0 ? void 0 : _a.options) || undefined));
+                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({
@@ -121,13 +120,7 @@ export class StripeFieldElement extends CustomElement {
             this.stripeField_ = null;
         });
     }
-    GetStripe_() {
-        return (this.stripe || FindAncestor(this, ancestor => ('AddStripeField' in ancestor)));
-    }
 }
-__decorate([
-    Property({ type: 'object', checkStoredObject: true })
-], StripeFieldElement.prototype, "stripe", void 0);
 __decorate([
     Property({ type: 'object', checkStoredObject: true })
 ], StripeFieldElement.prototype, "options", void 0);

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

@@ -0,0 +1,15 @@
+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 {
+    stripe: IStripeElement | null;
+    IsInteractive(): boolean;
+    WaitReady(): Promise<void>;
+    AddChangeListener(listener: StripeFieldChangeHandlerType): void;
+    RemoveChangeListener(listener: StripeFieldChangeHandlerType): void;
+    ToggleFocus(focused: boolean): void;
+    Reset(): void;
+    AddDetails(details: IStripePaymentDetails): void;
+    protected HandleElementScopeCreated_({ scope, ...rest }: IElementScopeCreatedCallbackParams, postAttributesCallback?: () => void): void;
+    protected GetStripe_(): IStripeElement | null;
+}

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

@@ -0,0 +1,50 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 {
+    constructor() {
+        super(...arguments);
+        this.stripe = null;
+    }
+    IsInteractive() {
+        return false;
+    }
+    WaitReady() {
+        return Promise.resolve();
+    }
+    AddChangeListener(listener) { }
+    RemoveChangeListener(listener) { }
+    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();
+        });
+    }
+    GetStripe_() {
+        return (this.stripe || FindAncestor(this, ancestor => ('AddStripeField' in ancestor)));
+    }
+}
+__decorate([
+    Property({ type: 'object', checkStoredObject: true })
+], StripeGenericField.prototype, "stripe", void 0);

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

@@ -1,14 +1,9 @@
 /// <reference types="stripe-v3" />
-import { CustomElement } from "@benbraide/inlinejs-element";
-import { IStripeField, IStripePaymentDetails, StripeFieldChangeHandlerType } from "../types";
-export declare class StripePaymentMenthodElement extends CustomElement implements IStripeField {
+import { IStripePaymentDetails } from "../types";
+import { StripeGenericField } from "./generic-field";
+export declare class StripePaymentMenthodElement extends StripeGenericField {
     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;
 }
 export declare function StripePaymentMenthodElementCompact(): void;

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

@@ -4,8 +4,9 @@ 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;
 };
-import { CustomElement, Property, RegisterCustomElement } from "@benbraide/inlinejs-element";
-export class StripePaymentMenthodElement extends CustomElement {
+import { Property, RegisterCustomElement } from "@benbraide/inlinejs-element";
+import { StripeGenericField } from "./generic-field";
+export class StripePaymentMenthodElement extends StripeGenericField {
     constructor() {
         super({
             isTemplate: true,
@@ -13,13 +14,6 @@ export class StripePaymentMenthodElement extends CustomElement {
         });
         this.value = '';
     }
-    WaitReady() {
-        return Promise.resolve();
-    }
-    AddChangeListener(listener) { }
-    RemoveChangeListener(listener) { }
-    ToggleFocus(focused) { }
-    Reset() { }
     AddDetails(details) {
         this.value && (details.method = this.value);
     }