@benbraide/inlinejs-stripe 1.0.7 → 2.0.0

package/lib/common/components/field.js

@@ -0,0 +1,135 @@
+"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.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 {
+    constructor() {
+        super();
+        this.stripeField_ = null;
+        this.isReady_ = false;
+        this.readyWaiters_ = new Array();
+        this.stripe = null;
+        this.options = null;
+        this.type = '';
+        this.onready = '';
+        this.oncomplete = '';
+        this.onerrors = '';
+    }
+    WaitReady() {
+        return new Promise(resolve => {
+            this.isReady_ ? resolve() : this.readyWaiters_.push(() => resolve());
+        });
+    }
+    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()));
+    }
+    Reset() {
+        var _a;
+        this.stripeField_ && ((_a = this.stripeField_) === null || _a === void 0 ? void 0 : _a.clear());
+    }
+    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), () => {
+            var _a;
+            (_a = this.GetStripe_()) === null || _a === void 0 ? void 0 : _a.AddStripeField(this);
+            postAttributesCallback && postAttributesCallback();
+        });
+        scope.AddPostProcessCallback(() => {
+            var _a;
+            (_a = this.GetStripe_()) === null || _a === void 0 ? void 0 : _a.WaitInstance().then((stripe) => {
+                var _a;
+                if (!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 (type) {
+                    this.stripeField_ = stripe.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.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) {
+                            (0, inlinejs_1.EvaluateLater)({
+                                componentId: this.componentId_,
+                                contextElement: this,
+                                expression: this.onerrors,
+                                disableFunctionCall: false,
+                            })(undefined, [], { error: event.error });
+                        }
+                        else if (event === null || event === void 0 ? void 0 : event.complete) {
+                            (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);
+                        }
+                    });
+                    this.stripeField_.mount(this);
+                }
+            });
+        });
+        scope.AddUninitCallback(() => {
+            var _a;
+            (_a = this.GetStripe_()) === null || _a === void 0 ? void 0 : _a.RemoveStripeField(this);
+            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);
+__decorate([
+    (0, inlinejs_element_1.Property)({ type: 'string' })
+], StripeFieldElement.prototype, "type", void 0);
+__decorate([
+    (0, inlinejs_element_1.Property)({ type: 'string' })
+], StripeFieldElement.prototype, "onready", void 0);
+__decorate([
+    (0, inlinejs_element_1.Property)({ type: 'string' })
+], StripeFieldElement.prototype, "oncomplete", void 0);
+__decorate([
+    (0, inlinejs_element_1.Property)({ type: 'string' })
+], StripeFieldElement.prototype, "onerrors", void 0);
+exports.StripeFieldElement = StripeFieldElement;
+function StripeFieldElementCompact() {
+    (0, inlinejs_element_1.RegisterCustomElement)(StripeFieldElement, 'stripe-field');
+}
+exports.StripeFieldElementCompact = StripeFieldElementCompact;

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

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

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

@@ -0,0 +1,35 @@
+"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;
+};
+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 {
+    constructor() {
+        super({
+            isTemplate: true,
+            isHidden: true,
+        });
+        this.value = '';
+    }
+    WaitReady() {
+        return Promise.resolve();
+    }
+    ToggleFocus(focused) { }
+    Reset() { }
+    AddDetails(details) {
+        this.value && (details.method = this.value);
+    }
+}
+__decorate([
+    (0, inlinejs_element_1.Property)({ type: 'object', checkStoredObject: true })
+], StripePaymentMenthodElement.prototype, "value", void 0);
+exports.StripePaymentMenthodElement = StripePaymentMenthodElement;
+function StripePaymentMenthodElementCompact() {
+    (0, inlinejs_element_1.RegisterCustomElement)(StripePaymentMenthodElement, 'stripe-payment-method');
+}
+exports.StripePaymentMenthodElementCompact = StripePaymentMenthodElementCompact;

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

@@ -0,0 +1,28 @@
+/// <reference types="stripe-v3" />
+import { IElementScopeCreatedCallbackParams } from "@benbraide/inlinejs";
+import { CustomElement } from "@benbraide/inlinejs-element";
+import { IStripeElement, IStripeField } from "../types";
+export declare class StripeElement extends CustomElement implements IStripeElement {
+    protected stripe_: stripe.Stripe | null;
+    protected mounting_: boolean;
+    protected mounted_: boolean;
+    protected fields_: Array<IStripeField> | null;
+    protected instanceWaiters_: (() => void)[];
+    options: stripe.elements.ElementsOptions | null;
+    publicKey: string;
+    onready: string;
+    defer: boolean;
+    autofocus: boolean;
+    constructor();
+    AddStripeField(field: IStripeField): void;
+    RemoveStripeField(field: IStripeField): void;
+    FocusNextField(field: IStripeField): void;
+    GetInstance(): stripe.Stripe | null;
+    WaitInstance(): Promise<stripe.Stripe | null>;
+    Mount(): void;
+    Pay(clientSecret: string, save?: boolean): Promise<false | stripe.PaymentIntentResponse>;
+    Setup(clientSecret: string): Promise<false | stripe.PaymentIntentResponse>;
+    protected HandleElementScopeCreated_({ scope, ...rest }: IElementScopeCreatedCallbackParams, postAttributesCallback?: () => void): void;
+    protected PayOrSetup_(pay: boolean, clientSecret: string, save?: boolean): Promise<false | stripe.PaymentIntentResponse>;
+}
+export declare function StripeElementCompact(): void;

package/lib/common/components/stripe.js

@@ -0,0 +1,139 @@
+"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.StripeElementCompact = exports.StripeElement = void 0;
+const inlinejs_1 = require("@benbraide/inlinejs");
+const inlinejs_element_1 = require("@benbraide/inlinejs-element");
+class StripeElement extends inlinejs_element_1.CustomElement {
+    constructor() {
+        super();
+        this.stripe_ = null;
+        this.mounting_ = false;
+        this.mounted_ = false;
+        this.fields_ = null;
+        this.instanceWaiters_ = new Array();
+        this.options = null;
+        this.publicKey = '';
+        this.onready = '';
+        this.defer = false;
+        this.autofocus = false;
+    }
+    AddStripeField(field) {
+        this.fields_ = (this.fields_ || []);
+        this.fields_.push(field);
+    }
+    RemoveStripeField(field) {
+        this.fields_ && (this.fields_ = this.fields_.filter(x => x !== field));
+    }
+    FocusNextField(field) {
+        if (this.autofocus && this.fields_) {
+            const index = this.fields_.indexOf(field);
+            (index >= 0 && index < this.fields_.length - 1) && this.fields_[index + 1].ToggleFocus(true);
+        }
+    }
+    GetInstance() {
+        return this.stripe_;
+    }
+    WaitInstance() {
+        return new Promise(resolve => {
+            this.mounted_ ? resolve(this.stripe_) : this.instanceWaiters_.push(() => resolve(this.stripe_));
+        });
+    }
+    Mount() {
+        if (this.mounted_ || this.mounting_) {
+            return;
+        }
+        this.mounting_ = true;
+        this.LoadResources().then(() => {
+            this.mounting_ = false;
+            this.mounted_ = true;
+            this.stripe_ = Stripe(this.publicKey);
+            this.instanceWaiters_.splice(0).forEach(waiter => (0, inlinejs_1.JournalTry)(waiter));
+        });
+    }
+    Pay(clientSecret, save = false) {
+        return this.PayOrSetup_(true, clientSecret, save);
+    }
+    Setup(clientSecret) {
+        return this.PayOrSetup_(false, clientSecret);
+    }
+    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));
+    }
+    PayOrSetup_(pay, clientSecret, save = false) {
+        return new Promise((resolve, reject) => {
+            this.WaitInstance().then((stripe) => {
+                var _a, _b;
+                if (!stripe) {
+                    return resolve(false);
+                }
+                const details = {};
+                (_a = this.fields_) === null || _a === void 0 ? void 0 : _a.forEach(field => field.AddDetails(details));
+                if (!details.method) {
+                    return resolve(false);
+                }
+                let cardDetails;
+                if (typeof details.method !== 'string') {
+                    cardDetails = {
+                        payment_method: {
+                            card: details.method,
+                            billing_details: details.billingDetails,
+                        },
+                    };
+                }
+                else {
+                    cardDetails = {
+                        payment_method: details.method,
+                    };
+                }
+                if (pay) {
+                    ((_b = details.billingDetails) === null || _b === void 0 ? void 0 : _b.email) && (cardDetails.receipt_email = details.billingDetails.email);
+                    save && (cardDetails.setup_future_usage = 'off_session');
+                    stripe.confirmCardPayment(clientSecret, cardDetails).then(resolve).catch(reject);
+                }
+                else {
+                    stripe.confirmCardSetup(clientSecret, cardDetails).then(resolve).catch(reject);
+                }
+            }).catch(reject);
+        });
+    }
+}
+__decorate([
+    (0, inlinejs_element_1.Property)({ type: 'object', checkStoredObject: true })
+], StripeElement.prototype, "options", void 0);
+__decorate([
+    (0, inlinejs_element_1.Property)({ type: 'string' })
+], StripeElement.prototype, "publicKey", void 0);
+__decorate([
+    (0, inlinejs_element_1.Property)({ type: 'string' })
+], StripeElement.prototype, "onready", 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);
+exports.StripeElement = StripeElement;
+function StripeElementCompact() {
+    (0, inlinejs_element_1.RegisterCustomElement)(StripeElement, 'stripe');
+}
+exports.StripeElementCompact = StripeElementCompact;

package/lib/common/entry.d.ts

@@ -0,0 +1 @@
+export declare function InlineJSStripe(): void;

package/lib/common/entry.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InlineJSStripe = void 0;
+const inlinejs_1 = require("@benbraide/inlinejs");
+const stripe_1 = require("./components/stripe");
+const field_1 = require("./components/field");
+const detail_1 = require("./components/detail");
+const payment_method_1 = require("./components/payment-method");
+function InlineJSStripe() {
+    (0, inlinejs_1.WaitForGlobal)().then(() => {
+        (0, stripe_1.StripeElementCompact)();
+        (0, field_1.StripeFieldElementCompact)();
+        (0, detail_1.StripeDetailElementCompact)();
+        (0, payment_method_1.StripePaymentMenthodElementCompact)();
+    });
+}
+exports.InlineJSStripe = InlineJSStripe;

package/lib/common/index.d.ts

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

package/lib/common/index.js

@@ -14,4 +14,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./directive/stripe"), exports);
+__exportStar(require("./components/stripe"), exports);
+__exportStar(require("./components/field"), exports);
+__exportStar(require("./components/detail"), exports);
+__exportStar(require("./components/payment-method"), exports);
+__exportStar(require("./entry"), exports);

package/lib/common/types.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="stripe-v3" />
+export interface IStripePaymentDetails {
+    method?: stripe.elements.Element | string;
+    billingDetails?: stripe.BillingDetails;
+}
+export interface IStripeField {
+    WaitReady(): Promise<void>;
+    ToggleFocus(focused: boolean): void;
+    Reset(): void;
+    AddDetails(details: IStripePaymentDetails): void;
+}
+export interface IStripeElement {
+    options: stripe.elements.ElementsOptions | null;
+    AddStripeField(field: IStripeField): void;
+    RemoveStripeField(field: IStripeField): void;
+    FocusNextField(field: IStripeField): void;
+    GetInstance(): stripe.Stripe | null;
+    WaitInstance(): Promise<stripe.Stripe | null>;
+    Mount(): void;
+}

package/lib/common/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

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

package/lib/esm/components/detail.js

@@ -0,0 +1,55 @@
+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;
+};
+import { CustomElement, Property, RegisterCustomElement } from "@benbraide/inlinejs-element";
+export class StripeDetailElement extends CustomElement {
+    constructor() {
+        super();
+        this.input = null;
+        this.name = '';
+        this.value = '';
+    }
+    WaitReady() {
+        return Promise.resolve();
+    }
+    ToggleFocus(focused) {
+        const input = this.GetInput_();
+        input && (focused ? input.focus() : input.blur());
+    }
+    Reset() {
+        const input = this.GetInput_();
+        input && (input.value = '');
+    }
+    AddDetails(details) {
+        const input = this.GetInput_();
+        if (!this.name || (!input && !this.value)) {
+            return;
+        }
+        details.billingDetails = (details.billingDetails || {});
+        if (this.name === 'address') {
+            details.billingDetails.address = (details.billingDetails.address || {});
+            details.billingDetails.address.line1 = ((input === null || input === void 0 ? void 0 : input.value) || this.value);
+        }
+        else {
+            details.billingDetails[this.name] = ((input === null || input === void 0 ? void 0 : input.value) || this.value);
+        }
+    }
+    GetInput_() {
+        return (this.input || this.querySelector('input'));
+    }
+}
+__decorate([
+    Property({ type: 'object', checkStoredObject: true })
+], StripeDetailElement.prototype, "input", void 0);
+__decorate([
+    Property({ type: 'string' })
+], StripeDetailElement.prototype, "name", void 0);
+__decorate([
+    Property({ type: 'string' })
+], StripeDetailElement.prototype, "value", void 0);
+export function StripeDetailElementCompact() {
+    RegisterCustomElement(StripeDetailElement, 'stripe-detail');
+}

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

@@ -0,0 +1,23 @@
+/// <reference types="stripe-v3" />
+import { IElementScopeCreatedCallbackParams } from "@benbraide/inlinejs";
+import { CustomElement } from "@benbraide/inlinejs-element";
+import { IStripeElement, IStripeField, IStripePaymentDetails } from "../types";
+export declare class StripeFieldElement extends CustomElement implements IStripeField {
+    protected stripeField_: stripe.elements.Element | null;
+    protected isReady_: boolean;
+    protected readyWaiters_: (() => void)[];
+    stripe: IStripeElement | null;
+    options: stripe.elements.ElementsOptions | null;
+    type: string;
+    onready: string;
+    oncomplete: string;
+    onerrors: string;
+    constructor();
+    WaitReady(): Promise<void>;
+    ToggleFocus(focused: boolean): void;
+    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

@@ -0,0 +1,130 @@
+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 { EvaluateLater, FindAncestor, JournalTry } from "@benbraide/inlinejs";
+import { CustomElement, Property, RegisterCustomElement } from "@benbraide/inlinejs-element";
+export class StripeFieldElement extends CustomElement {
+    constructor() {
+        super();
+        this.stripeField_ = null;
+        this.isReady_ = false;
+        this.readyWaiters_ = new Array();
+        this.stripe = null;
+        this.options = null;
+        this.type = '';
+        this.onready = '';
+        this.oncomplete = '';
+        this.onerrors = '';
+    }
+    WaitReady() {
+        return new Promise(resolve => {
+            this.isReady_ ? resolve() : this.readyWaiters_.push(() => resolve());
+        });
+    }
+    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()));
+    }
+    Reset() {
+        var _a;
+        this.stripeField_ && ((_a = this.stripeField_) === null || _a === void 0 ? void 0 : _a.clear());
+    }
+    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), () => {
+            var _a;
+            (_a = this.GetStripe_()) === null || _a === void 0 ? void 0 : _a.AddStripeField(this);
+            postAttributesCallback && postAttributesCallback();
+        });
+        scope.AddPostProcessCallback(() => {
+            var _a;
+            (_a = this.GetStripe_()) === null || _a === void 0 ? void 0 : _a.WaitInstance().then((stripe) => {
+                var _a;
+                if (!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 (type) {
+                    this.stripeField_ = stripe.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.readyWaiters_.splice(0).forEach(waiter => JournalTry(waiter));
+                    });
+                    this.stripeField_.on('change', (event) => {
+                        var _a;
+                        if (event === null || event === void 0 ? void 0 : event.error) {
+                            EvaluateLater({
+                                componentId: this.componentId_,
+                                contextElement: this,
+                                expression: this.onerrors,
+                                disableFunctionCall: false,
+                            })(undefined, [], { error: event.error });
+                        }
+                        else if (event === null || event === void 0 ? void 0 : event.complete) {
+                            EvaluateLater({
+                                componentId: this.componentId_,
+                                contextElement: this,
+                                expression: this.oncomplete,
+                                disableFunctionCall: false,
+                            })();
+                            (_a = this.GetStripe_()) === null || _a === void 0 ? void 0 : _a.FocusNextField(this);
+                        }
+                    });
+                    this.stripeField_.mount(this);
+                }
+            });
+        });
+        scope.AddUninitCallback(() => {
+            var _a;
+            (_a = this.GetStripe_()) === null || _a === void 0 ? void 0 : _a.RemoveStripeField(this);
+            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);
+__decorate([
+    Property({ type: 'string' })
+], StripeFieldElement.prototype, "type", void 0);
+__decorate([
+    Property({ type: 'string' })
+], StripeFieldElement.prototype, "onready", void 0);
+__decorate([
+    Property({ type: 'string' })
+], StripeFieldElement.prototype, "oncomplete", void 0);
+__decorate([
+    Property({ type: 'string' })
+], StripeFieldElement.prototype, "onerrors", void 0);
+export function StripeFieldElementCompact() {
+    RegisterCustomElement(StripeFieldElement, 'stripe-field');
+}

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

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