@benbraide/inlinejs-stripe 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 benbraide
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,2 @@
+# inlinejs-stripe
+Stripe plugin for the InlineJS reactive framework

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

@@ -0,0 +1,24 @@
+/// <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;

package/lib/common/directive/stripe.js

@@ -0,0 +1,436 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StripeDirectiveHandlerCompact = exports.StripeDirectiveHandler = void 0;
+const inlinejs_1 = require("@benbraide/inlinejs");
+const StripeSpecialKeys = ['submit', 'save', 'name', 'email', 'phone', 'address'];
+const StripeKeys = {
+    'number': 'cardNumber',
+    'expiry': 'cardExpiry',
+    'cvc': 'cardCvc',
+    'postal': 'postalCode',
+    'zip': 'postalCode',
+};
+const StripeDirectiveName = 'stripe';
+let StripePublicKey = '';
+let StripeUrl = 'https://js.stripe.com/v3/';
+let StripeStyles = null;
+let StripeClasses = null;
+exports.StripeDirectiveHandler = (0, inlinejs_1.CreateDirectiveHandlerCallback)(StripeDirectiveName, ({ componentId, component, contextElement, expression, argKey, argOptions }) => {
+    if ((0, inlinejs_1.BindEvent)({ contextElement, expression,
+        component: (component || componentId),
+        key: StripeDirectiveName,
+        event: argKey,
+        defaultEvent: 'success',
+        eventWhitelist: ['error', 'before', 'after', 'ready', 'focus', 'complete'],
+        options: argOptions,
+        optionBlacklist: ['window', 'document', 'outside'],
+    })) {
+        return;
+    }
+    let resolvedComponent = (component || (0, inlinejs_1.FindComponentById)(componentId)), elementScope = resolvedComponent === null || resolvedComponent === void 0 ? void 0 : resolvedComponent.FindElementScope(contextElement);
+    if (!resolvedComponent || !elementScope) {
+        return (0, inlinejs_1.JournalError)('Failed to retrieve element scope.', `InlineJS.${StripeDirectiveName}`, contextElement);
+    }
+    let localKey = `\$${StripeDirectiveName}`, detailsKey = `#${StripeDirectiveName}`;
+    if (localKey in (elementScope.GetLocals() || {})) { //Already initialized
+        return;
+    }
+    if (StripeSpecialKeys.includes(argKey)) { //No Stripe binding
+        let details = resolvedComponent.FindElementLocalValue(contextElement, detailsKey, true);
+        if (details) {
+            details.specialMounts[argKey] = contextElement;
+            elementScope.SetLocal(localKey, (0, inlinejs_1.CreateInplaceProxy)((0, inlinejs_1.BuildGetterProxyOptions)({
+                getter: (prop) => {
+                    var _a;
+                    if (prop === 'parent') {
+                        return (contextElement.parentElement ? (_a = (0, inlinejs_1.FindComponentById)(componentId)) === null || _a === void 0 ? void 0 : _a.FindElementLocalValue(contextElement.parentElement, localKey, true) : null);
+                    }
+                },
+                lookup: ['parent'],
+            })));
+        }
+        return;
+    }
+    if (argKey in StripeKeys) { //Bind Stripe field
+        let details = resolvedComponent.FindElementLocalValue(contextElement, detailsKey, true);
+        if (!details) { //No parent
+            return;
+        }
+        let id = resolvedComponent.GenerateUniqueId(`${StripeDirectiveName}_proxy_`), field = {
+            name: argKey,
+            mount: contextElement,
+            element: details.elements.create(StripeKeys[argKey], {
+                style: (StripeStyles || undefined),
+                classes: (StripeClasses || undefined),
+            }),
+            ready: false,
+            complete: false,
+            error: undefined,
+        };
+        if (!field.element) {
+            return;
+        }
+        field.element.mount(contextElement);
+        details.fields.push(field);
+        elementScope.SetLocal(localKey, (0, inlinejs_1.CreateInplaceProxy)((0, inlinejs_1.BuildGetterProxyOptions)({
+            getter: (prop) => {
+                var _a, _b, _c, _d;
+                if (prop === 'complete') {
+                    (_a = (0, inlinejs_1.FindComponentById)(componentId)) === null || _a === void 0 ? void 0 : _a.GetBackend().changes.AddGetAccess(`${id}.${prop}`);
+                    return field.complete;
+                }
+                if (prop === 'focused') {
+                    (_b = (0, inlinejs_1.FindComponentById)(componentId)) === null || _b === void 0 ? void 0 : _b.GetBackend().changes.AddGetAccess(`${id}.${prop}`);
+                    return field.focused;
+                }
+                if (prop === 'error') {
+                    (_c = (0, inlinejs_1.FindComponentById)(componentId)) === null || _c === void 0 ? void 0 : _c.GetBackend().changes.AddGetAccess(`${id}.${prop}`);
+                    return field.error;
+                }
+                if (prop === 'parent') {
+                    return (contextElement.parentElement ? (_d = (0, inlinejs_1.FindComponentById)(componentId)) === null || _d === void 0 ? void 0 : _d.FindElementLocalValue(contextElement.parentElement, localKey, true) : null);
+                }
+                if (prop === 'clear') {
+                    return () => {
+                        if (field.element) {
+                            field.element.clear();
+                        }
+                    };
+                }
+                if (prop === 'focus') {
+                    return () => {
+                        if (field.element) {
+                            field.element.focus();
+                        }
+                    };
+                }
+                if (prop === 'blur') {
+                    return () => {
+                        if (field.element) {
+                            field.element.blur();
+                        }
+                    };
+                }
+            },
+            lookup: ['complete', 'focused', 'error', 'parent', 'clear', 'focus', 'blur'],
+        })));
+        let fields = details.fields;
+        elementScope.AddUninitCallback(() => {
+            var _a;
+            (_a = field.element) === null || _a === void 0 ? void 0 : _a.destroy();
+            fields.splice(fields.indexOf(field), 1);
+        });
+        field.element.on('ready', () => {
+            if (!field.ready) {
+                field.ready = true;
+                field.mount.dispatchEvent(new CustomEvent(`${StripeDirectiveName}.ready`));
+                details.onReady();
+            }
+        });
+        field.element.on('change', (e) => {
+            var _a, _b;
+            if ((e === null || e === void 0 ? void 0 : e.complete) === field.complete) {
+                return;
+            }
+            field.complete = e === null || e === void 0 ? void 0 : e.complete;
+            field.mount.dispatchEvent(new CustomEvent(`${StripeDirectiveName}.complete`, {
+                detail: {
+                    completed: e === null || e === void 0 ? void 0 : e.complete,
+                },
+            }));
+            if (field.complete) {
+                if (field.error) {
+                    field.error = undefined;
+                    (0, inlinejs_1.AddChanges)('set', `${id}.error`, 'error', (_a = (0, inlinejs_1.FindComponentById)(componentId)) === null || _a === void 0 ? void 0 : _a.GetBackend().changes);
+                }
+                if (details.options.autofocus) { //Focus next if any
+                    let index = details.fields.indexOf(field);
+                    if (index != -1 && index < (details.fields.length - 1)) {
+                        let nextField = details.fields[index + 1];
+                        if (nextField.element) {
+                            nextField.element.focus();
+                        }
+                        else if ('focus' in nextField.mount && typeof nextField.mount.focus === 'function') {
+                            nextField.mount.focus();
+                        }
+                    }
+                    else if (details.specialMounts.submit) {
+                        details.specialMounts.submit.focus();
+                    }
+                }
+            }
+            else if ((e === null || e === void 0 ? void 0 : e.error) && e.error.message !== field.error) {
+                field.error = e.error.message;
+                (0, inlinejs_1.AddChanges)('set', `${id}.error`, 'error', (_b = (0, inlinejs_1.FindComponentById)(componentId)) === null || _b === void 0 ? void 0 : _b.GetBackend().changes);
+                field.mount.dispatchEvent(new CustomEvent(`${StripeDirectiveName}.error`, {
+                    detail: {
+                        message: e.error.message,
+                    },
+                }));
+            }
+            details.onChange();
+        });
+        field.element.on('focus', () => {
+            var _a;
+            if (!field.focused) {
+                field.focused = true;
+                (0, inlinejs_1.AddChanges)('set', `${id}.focused`, 'focused', (_a = (0, inlinejs_1.FindComponentById)(componentId)) === null || _a === void 0 ? void 0 : _a.GetBackend().changes);
+                field.mount.dispatchEvent(new CustomEvent(`${StripeDirectiveName}.focus`, {
+                    detail: {
+                        focused: true,
+                    },
+                }));
+            }
+        });
+        field.element.on('blur', () => {
+            var _a;
+            if (field.focused) {
+                field.focused = false;
+                (0, inlinejs_1.AddChanges)('set', `${id}.focused`, 'focused', (_a = (0, inlinejs_1.FindComponentById)(componentId)) === null || _a === void 0 ? void 0 : _a.GetBackend().changes);
+                field.mount.dispatchEvent(new CustomEvent(`${StripeDirectiveName}.focus`, {
+                    detail: {
+                        focused: false,
+                    },
+                }));
+            }
+        });
+        return;
+    }
+    let stripeInstance = null, elements = null, backlog = new Array(), init = () => {
+        (0, inlinejs_1.EvaluateLater)({ componentId, contextElement, expression })((value) => {
+            stripeInstance = Stripe(value || StripePublicKey);
+            if (!stripeInstance) {
+                return (0, inlinejs_1.JournalError)('Failed to initialize stripe', `InlineJS.${StripeDirectiveName}.Init`, contextElement);
+            }
+            elements = stripeInstance.elements();
+            if (!elements) {
+                return (0, inlinejs_1.JournalError)('Failed to initialize stripe', `InlineJS.${StripeDirectiveName}.Init`, contextElement);
+            }
+            backlog.splice(0).forEach(callback => (0, inlinejs_1.JournalTry)(callback, `InlineJS.${StripeDirectiveName}.Init`, contextElement));
+        });
+    };
+    let fields = new Array(), specialMounts = {
+        submit: null,
+        save: null,
+        name: null,
+        email: null,
+        phone: null,
+        address: null,
+    };
+    let id = resolvedComponent.GenerateUniqueId(`${StripeDirectiveName}_proxy_`), options = (0, inlinejs_1.ResolveOptions)({
+        options: {
+            autofocus: false,
+            nexttick: false,
+            manual: false,
+        },
+        list: argOptions,
+    });
+    let active = false, complete = false, errorCount = 0, setComplete = (value) => {
+        var _a;
+        if (value != complete) {
+            complete = value;
+            (0, inlinejs_1.AddChanges)('set', `${id}.complete`, 'complete', (_a = (0, inlinejs_1.FindComponentById)(componentId)) === null || _a === void 0 ? void 0 : _a.GetBackend().changes);
+        }
+    };
+    let details = { fields, specialMounts, options,
+        onReady: () => { var _a; return (0, inlinejs_1.AddChanges)('set', `${id}.readyCount`, 'readyCount', (_a = (0, inlinejs_1.FindComponentById)(componentId)) === null || _a === void 0 ? void 0 : _a.GetBackend().changes); },
+        onChange: () => {
+            var _a;
+            setComplete(!fields.find(field => !field.complete));
+            let currentErrorCount = fields.reduce((prev, field) => (prev + (field.error ? 1 : 0)), 0);
+            if (currentErrorCount != errorCount) { //Error list changed
+                errorCount = currentErrorCount;
+                (0, inlinejs_1.AddChanges)('set', `${id}.errors`, 'errors', (_a = (0, inlinejs_1.FindComponentById)(componentId)) === null || _a === void 0 ? void 0 : _a.GetBackend().changes);
+            }
+        },
+    };
+    let setActive = (value) => {
+        var _a;
+        if (value != active) {
+            active = value;
+            (0, inlinejs_1.AddChanges)('set', `${id}.active`, 'active', (_a = (0, inlinejs_1.FindComponentById)(componentId)) === null || _a === void 0 ? void 0 : _a.GetBackend().changes);
+        }
+    };
+    let evaluate = (0, inlinejs_1.EvaluateLater)({ componentId, contextElement, expression }), onSuccess = (response) => {
+        var _a;
+        if (!response.error) {
+            contextElement.dispatchEvent(new CustomEvent(`${StripeDirectiveName}.success`, {
+                detail: {
+                    intent: response.paymentIntent,
+                },
+            }));
+            contextElement.dispatchEvent(new CustomEvent(`${StripeDirectiveName}.after`));
+            setActive(false);
+            if (options.nexttick) {
+                (_a = (0, inlinejs_1.FindComponentById)(componentId)) === null || _a === void 0 ? void 0 : _a.GetBackend().changes.AddNextTickHandler(() => evaluate());
+            }
+            else { //Immediate evaluation
+                evaluate();
+            }
+        }
+        else { //Error
+            onError(response.error.message || '');
+        }
+    };
+    let onError = (err) => {
+        contextElement.dispatchEvent(new CustomEvent(`${StripeDirectiveName}.error`, {
+            detail: {
+                type: 'host',
+                message: err,
+            },
+        }));
+        reportError('host', err);
+        contextElement.dispatchEvent(new CustomEvent(`${StripeDirectiveName}.after`));
+        setActive(false);
+    };
+    let reportError = (type, message) => {
+        contextElement.dispatchEvent(new CustomEvent(`${StripeDirectiveName}.error`, {
+            detail: { type, message },
+        }));
+    };
+    let getPaymentDetails = (paymentMethod, save) => {
+        var _a;
+        if (paymentMethod && typeof paymentMethod === 'string') {
+            return {
+                payment_method: paymentMethod,
+                setup_future_usage: (save ? 'off_session' : undefined),
+            };
+        }
+        let cardElement = (_a = fields.find(field => (field.name === 'number'))) === null || _a === void 0 ? void 0 : _a.element;
+        if (!cardElement) {
+            return null;
+        }
+        let billingDetails = {}, getBillingDetail = (key) => {
+            if (paymentMethod) {
+                return (paymentMethod[key] || (specialMounts[key] ? specialMounts[key].value : undefined));
+            }
+            return (specialMounts[key] ? specialMounts[key].value : undefined);
+        };
+        ['name', 'email', 'phone', 'address'].forEach((key) => {
+            if (key === 'address') {
+                billingDetails.address = {
+                    line1: getBillingDetail(key),
+                };
+            }
+            else {
+                billingDetails[key] = getBillingDetail(key);
+            }
+        });
+        if (!save && specialMounts.save && specialMounts.save instanceof HTMLInputElement) {
+            save = specialMounts.save.checked;
+        }
+        return {
+            payment_method: {
+                card: cardElement,
+                billing_details: billingDetails,
+            },
+            setup_future_usage: (save ? 'off_session' : undefined),
+        };
+    };
+    let payOrSetup = (callback, hasPaymentMethod = false) => {
+        if (hasPaymentMethod || (complete && !fields.find(field => !!field.error))) {
+            setActive(true);
+            contextElement.dispatchEvent(new CustomEvent(`${StripeDirectiveName}.before`));
+            callback();
+        }
+        else { //Error
+            reportError('incomplete', 'Please fill in all required fields.');
+        }
+    };
+    elementScope.SetLocal(detailsKey, details);
+    elementScope.SetLocal(localKey, (0, inlinejs_1.CreateInplaceProxy)((0, inlinejs_1.BuildProxyOptions)({
+        getter: (prop) => {
+            var _a, _b, _c, _d;
+            if (prop === 'bind') {
+                return () => {
+                    if (!stripeInstance) {
+                        bind();
+                    }
+                };
+            }
+            if (prop === 'active') {
+                (_a = (0, inlinejs_1.FindComponentById)(componentId)) === null || _a === void 0 ? void 0 : _a.GetBackend().changes.AddGetAccess(`${id}.${prop}`);
+                return active;
+            }
+            if (prop === 'readyCount') {
+                (_b = (0, inlinejs_1.FindComponentById)(componentId)) === null || _b === void 0 ? void 0 : _b.GetBackend().changes.AddGetAccess(`${id}.${prop}`);
+                return fields.reduce((prev, field) => (prev + (field.ready ? 1 : 0)), 0);
+            }
+            if (prop === 'complete') {
+                (_c = (0, inlinejs_1.FindComponentById)(componentId)) === null || _c === void 0 ? void 0 : _c.GetBackend().changes.AddGetAccess(`${id}.${prop}`);
+                return complete;
+            }
+            if (prop === 'errors') {
+                (_d = (0, inlinejs_1.FindComponentById)(componentId)) === null || _d === void 0 ? void 0 : _d.GetBackend().changes.AddGetAccess(`${id}.${prop}`);
+                return fields.filter(field => !!field.error).map(field => field.error);
+            }
+            if (prop === 'instance') {
+                return stripeInstance;
+            }
+            if (prop === 'publicKey') {
+                return StripePublicKey;
+            }
+            if (prop === 'styles') {
+                return StripeStyles;
+            }
+            if (prop === 'classes') {
+                return StripeClasses;
+            }
+            if (prop === 'url') {
+                return StripeUrl;
+            }
+            if (prop === 'pay') {
+                return (clientSecret, paymentMethod, save = false) => {
+                    payOrSetup(() => {
+                        let paymentDetails = getPaymentDetails(paymentMethod, save);
+                        if (paymentDetails) {
+                            stripeInstance === null || stripeInstance === void 0 ? void 0 : stripeInstance.confirmCardPayment(clientSecret, paymentDetails).then(onSuccess).catch(onError);
+                        }
+                    }, (!!paymentMethod && typeof paymentMethod === 'string'));
+                };
+            }
+            if (prop === 'setup') {
+                return (clientSecret, paymentMethod, save = false) => {
+                    payOrSetup(() => {
+                        let paymentDetails = getPaymentDetails(paymentMethod, save);
+                        if (paymentDetails) {
+                            stripeInstance === null || stripeInstance === void 0 ? void 0 : stripeInstance.confirmCardSetup(clientSecret, paymentDetails).then(onSuccess).catch(onError);
+                        }
+                    }, (!!paymentMethod && typeof paymentMethod === 'string'));
+                };
+            }
+        },
+        setter: (prop, value) => {
+            if (prop === 'publicKey') {
+                StripePublicKey = value;
+            }
+            else if (prop === 'styles') {
+                StripeStyles = value;
+            }
+            else if (prop === 'classes') {
+                StripeClasses = value;
+            }
+            else if (prop === 'url') {
+                StripeUrl = value;
+            }
+            return true;
+        },
+        lookup: ['bind', 'active', 'readyCount', 'complete', 'errors', 'instance', 'publicKey', 'styles', 'classes', 'url', 'pay', 'setup'],
+    })));
+    let bind = () => {
+        let resourceConcept = (0, inlinejs_1.GetGlobal)().GetConcept('resource');
+        if (StripeUrl && resourceConcept) {
+            resourceConcept.GetScript(StripeUrl).then(init);
+        }
+        else { //Resource not provided
+            init();
+        }
+    };
+    if (!options.manual) {
+        bind();
+    }
+});
+function StripeDirectiveHandlerCompact() {
+    (0, inlinejs_1.AddDirectiveHandler)(exports.StripeDirectiveHandler);
+}
+exports.StripeDirectiveHandlerCompact = StripeDirectiveHandlerCompact;

package/lib/common/index.d.ts

@@ -0,0 +1 @@
+export * from './directive/stripe';

package/lib/common/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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);

package/lib/common/inlinejs-stripe.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,24 @@
+/// <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;

package/lib/esm/directive/stripe.js

@@ -0,0 +1,432 @@
+import { FindComponentById, AddDirectiveHandler, CreateDirectiveHandlerCallback, EvaluateLater, GetGlobal, JournalError, JournalTry, AddChanges, BuildGetterProxyOptions, BuildProxyOptions, CreateInplaceProxy, BindEvent, ResolveOptions } from "@benbraide/inlinejs";
+const StripeSpecialKeys = ['submit', 'save', 'name', 'email', 'phone', 'address'];
+const StripeKeys = {
+    'number': 'cardNumber',
+    'expiry': 'cardExpiry',
+    'cvc': 'cardCvc',
+    'postal': 'postalCode',
+    'zip': 'postalCode',
+};
+const StripeDirectiveName = 'stripe';
+let StripePublicKey = '';
+let StripeUrl = 'https://js.stripe.com/v3/';
+let StripeStyles = null;
+let StripeClasses = null;
+export const StripeDirectiveHandler = CreateDirectiveHandlerCallback(StripeDirectiveName, ({ componentId, component, contextElement, expression, argKey, argOptions }) => {
+    if (BindEvent({ contextElement, expression,
+        component: (component || componentId),
+        key: StripeDirectiveName,
+        event: argKey,
+        defaultEvent: 'success',
+        eventWhitelist: ['error', 'before', 'after', 'ready', 'focus', 'complete'],
+        options: argOptions,
+        optionBlacklist: ['window', 'document', 'outside'],
+    })) {
+        return;
+    }
+    let resolvedComponent = (component || FindComponentById(componentId)), elementScope = resolvedComponent === null || resolvedComponent === void 0 ? void 0 : resolvedComponent.FindElementScope(contextElement);
+    if (!resolvedComponent || !elementScope) {
+        return JournalError('Failed to retrieve element scope.', `InlineJS.${StripeDirectiveName}`, contextElement);
+    }
+    let localKey = `\$${StripeDirectiveName}`, detailsKey = `#${StripeDirectiveName}`;
+    if (localKey in (elementScope.GetLocals() || {})) { //Already initialized
+        return;
+    }
+    if (StripeSpecialKeys.includes(argKey)) { //No Stripe binding
+        let details = resolvedComponent.FindElementLocalValue(contextElement, detailsKey, true);
+        if (details) {
+            details.specialMounts[argKey] = contextElement;
+            elementScope.SetLocal(localKey, CreateInplaceProxy(BuildGetterProxyOptions({
+                getter: (prop) => {
+                    var _a;
+                    if (prop === 'parent') {
+                        return (contextElement.parentElement ? (_a = FindComponentById(componentId)) === null || _a === void 0 ? void 0 : _a.FindElementLocalValue(contextElement.parentElement, localKey, true) : null);
+                    }
+                },
+                lookup: ['parent'],
+            })));
+        }
+        return;
+    }
+    if (argKey in StripeKeys) { //Bind Stripe field
+        let details = resolvedComponent.FindElementLocalValue(contextElement, detailsKey, true);
+        if (!details) { //No parent
+            return;
+        }
+        let id = resolvedComponent.GenerateUniqueId(`${StripeDirectiveName}_proxy_`), field = {
+            name: argKey,
+            mount: contextElement,
+            element: details.elements.create(StripeKeys[argKey], {
+                style: (StripeStyles || undefined),
+                classes: (StripeClasses || undefined),
+            }),
+            ready: false,
+            complete: false,
+            error: undefined,
+        };
+        if (!field.element) {
+            return;
+        }
+        field.element.mount(contextElement);
+        details.fields.push(field);
+        elementScope.SetLocal(localKey, CreateInplaceProxy(BuildGetterProxyOptions({
+            getter: (prop) => {
+                var _a, _b, _c, _d;
+                if (prop === 'complete') {
+                    (_a = FindComponentById(componentId)) === null || _a === void 0 ? void 0 : _a.GetBackend().changes.AddGetAccess(`${id}.${prop}`);
+                    return field.complete;
+                }
+                if (prop === 'focused') {
+                    (_b = FindComponentById(componentId)) === null || _b === void 0 ? void 0 : _b.GetBackend().changes.AddGetAccess(`${id}.${prop}`);
+                    return field.focused;
+                }
+                if (prop === 'error') {
+                    (_c = FindComponentById(componentId)) === null || _c === void 0 ? void 0 : _c.GetBackend().changes.AddGetAccess(`${id}.${prop}`);
+                    return field.error;
+                }
+                if (prop === 'parent') {
+                    return (contextElement.parentElement ? (_d = FindComponentById(componentId)) === null || _d === void 0 ? void 0 : _d.FindElementLocalValue(contextElement.parentElement, localKey, true) : null);
+                }
+                if (prop === 'clear') {
+                    return () => {
+                        if (field.element) {
+                            field.element.clear();
+                        }
+                    };
+                }
+                if (prop === 'focus') {
+                    return () => {
+                        if (field.element) {
+                            field.element.focus();
+                        }
+                    };
+                }
+                if (prop === 'blur') {
+                    return () => {
+                        if (field.element) {
+                            field.element.blur();
+                        }
+                    };
+                }
+            },
+            lookup: ['complete', 'focused', 'error', 'parent', 'clear', 'focus', 'blur'],
+        })));
+        let fields = details.fields;
+        elementScope.AddUninitCallback(() => {
+            var _a;
+            (_a = field.element) === null || _a === void 0 ? void 0 : _a.destroy();
+            fields.splice(fields.indexOf(field), 1);
+        });
+        field.element.on('ready', () => {
+            if (!field.ready) {
+                field.ready = true;
+                field.mount.dispatchEvent(new CustomEvent(`${StripeDirectiveName}.ready`));
+                details.onReady();
+            }
+        });
+        field.element.on('change', (e) => {
+            var _a, _b;
+            if ((e === null || e === void 0 ? void 0 : e.complete) === field.complete) {
+                return;
+            }
+            field.complete = e === null || e === void 0 ? void 0 : e.complete;
+            field.mount.dispatchEvent(new CustomEvent(`${StripeDirectiveName}.complete`, {
+                detail: {
+                    completed: e === null || e === void 0 ? void 0 : e.complete,
+                },
+            }));
+            if (field.complete) {
+                if (field.error) {
+                    field.error = undefined;
+                    AddChanges('set', `${id}.error`, 'error', (_a = FindComponentById(componentId)) === null || _a === void 0 ? void 0 : _a.GetBackend().changes);
+                }
+                if (details.options.autofocus) { //Focus next if any
+                    let index = details.fields.indexOf(field);
+                    if (index != -1 && index < (details.fields.length - 1)) {
+                        let nextField = details.fields[index + 1];
+                        if (nextField.element) {
+                            nextField.element.focus();
+                        }
+                        else if ('focus' in nextField.mount && typeof nextField.mount.focus === 'function') {
+                            nextField.mount.focus();
+                        }
+                    }
+                    else if (details.specialMounts.submit) {
+                        details.specialMounts.submit.focus();
+                    }
+                }
+            }
+            else if ((e === null || e === void 0 ? void 0 : e.error) && e.error.message !== field.error) {
+                field.error = e.error.message;
+                AddChanges('set', `${id}.error`, 'error', (_b = FindComponentById(componentId)) === null || _b === void 0 ? void 0 : _b.GetBackend().changes);
+                field.mount.dispatchEvent(new CustomEvent(`${StripeDirectiveName}.error`, {
+                    detail: {
+                        message: e.error.message,
+                    },
+                }));
+            }
+            details.onChange();
+        });
+        field.element.on('focus', () => {
+            var _a;
+            if (!field.focused) {
+                field.focused = true;
+                AddChanges('set', `${id}.focused`, 'focused', (_a = FindComponentById(componentId)) === null || _a === void 0 ? void 0 : _a.GetBackend().changes);
+                field.mount.dispatchEvent(new CustomEvent(`${StripeDirectiveName}.focus`, {
+                    detail: {
+                        focused: true,
+                    },
+                }));
+            }
+        });
+        field.element.on('blur', () => {
+            var _a;
+            if (field.focused) {
+                field.focused = false;
+                AddChanges('set', `${id}.focused`, 'focused', (_a = FindComponentById(componentId)) === null || _a === void 0 ? void 0 : _a.GetBackend().changes);
+                field.mount.dispatchEvent(new CustomEvent(`${StripeDirectiveName}.focus`, {
+                    detail: {
+                        focused: false,
+                    },
+                }));
+            }
+        });
+        return;
+    }
+    let stripeInstance = null, elements = null, backlog = new Array(), init = () => {
+        EvaluateLater({ componentId, contextElement, expression })((value) => {
+            stripeInstance = Stripe(value || StripePublicKey);
+            if (!stripeInstance) {
+                return JournalError('Failed to initialize stripe', `InlineJS.${StripeDirectiveName}.Init`, contextElement);
+            }
+            elements = stripeInstance.elements();
+            if (!elements) {
+                return JournalError('Failed to initialize stripe', `InlineJS.${StripeDirectiveName}.Init`, contextElement);
+            }
+            backlog.splice(0).forEach(callback => JournalTry(callback, `InlineJS.${StripeDirectiveName}.Init`, contextElement));
+        });
+    };
+    let fields = new Array(), specialMounts = {
+        submit: null,
+        save: null,
+        name: null,
+        email: null,
+        phone: null,
+        address: null,
+    };
+    let id = resolvedComponent.GenerateUniqueId(`${StripeDirectiveName}_proxy_`), options = ResolveOptions({
+        options: {
+            autofocus: false,
+            nexttick: false,
+            manual: false,
+        },
+        list: argOptions,
+    });
+    let active = false, complete = false, errorCount = 0, setComplete = (value) => {
+        var _a;
+        if (value != complete) {
+            complete = value;
+            AddChanges('set', `${id}.complete`, 'complete', (_a = FindComponentById(componentId)) === null || _a === void 0 ? void 0 : _a.GetBackend().changes);
+        }
+    };
+    let details = { fields, specialMounts, options,
+        onReady: () => { var _a; return AddChanges('set', `${id}.readyCount`, 'readyCount', (_a = FindComponentById(componentId)) === null || _a === void 0 ? void 0 : _a.GetBackend().changes); },
+        onChange: () => {
+            var _a;
+            setComplete(!fields.find(field => !field.complete));
+            let currentErrorCount = fields.reduce((prev, field) => (prev + (field.error ? 1 : 0)), 0);
+            if (currentErrorCount != errorCount) { //Error list changed
+                errorCount = currentErrorCount;
+                AddChanges('set', `${id}.errors`, 'errors', (_a = FindComponentById(componentId)) === null || _a === void 0 ? void 0 : _a.GetBackend().changes);
+            }
+        },
+    };
+    let setActive = (value) => {
+        var _a;
+        if (value != active) {
+            active = value;
+            AddChanges('set', `${id}.active`, 'active', (_a = FindComponentById(componentId)) === null || _a === void 0 ? void 0 : _a.GetBackend().changes);
+        }
+    };
+    let evaluate = EvaluateLater({ componentId, contextElement, expression }), onSuccess = (response) => {
+        var _a;
+        if (!response.error) {
+            contextElement.dispatchEvent(new CustomEvent(`${StripeDirectiveName}.success`, {
+                detail: {
+                    intent: response.paymentIntent,
+                },
+            }));
+            contextElement.dispatchEvent(new CustomEvent(`${StripeDirectiveName}.after`));
+            setActive(false);
+            if (options.nexttick) {
+                (_a = FindComponentById(componentId)) === null || _a === void 0 ? void 0 : _a.GetBackend().changes.AddNextTickHandler(() => evaluate());
+            }
+            else { //Immediate evaluation
+                evaluate();
+            }
+        }
+        else { //Error
+            onError(response.error.message || '');
+        }
+    };
+    let onError = (err) => {
+        contextElement.dispatchEvent(new CustomEvent(`${StripeDirectiveName}.error`, {
+            detail: {
+                type: 'host',
+                message: err,
+            },
+        }));
+        reportError('host', err);
+        contextElement.dispatchEvent(new CustomEvent(`${StripeDirectiveName}.after`));
+        setActive(false);
+    };
+    let reportError = (type, message) => {
+        contextElement.dispatchEvent(new CustomEvent(`${StripeDirectiveName}.error`, {
+            detail: { type, message },
+        }));
+    };
+    let getPaymentDetails = (paymentMethod, save) => {
+        var _a;
+        if (paymentMethod && typeof paymentMethod === 'string') {
+            return {
+                payment_method: paymentMethod,
+                setup_future_usage: (save ? 'off_session' : undefined),
+            };
+        }
+        let cardElement = (_a = fields.find(field => (field.name === 'number'))) === null || _a === void 0 ? void 0 : _a.element;
+        if (!cardElement) {
+            return null;
+        }
+        let billingDetails = {}, getBillingDetail = (key) => {
+            if (paymentMethod) {
+                return (paymentMethod[key] || (specialMounts[key] ? specialMounts[key].value : undefined));
+            }
+            return (specialMounts[key] ? specialMounts[key].value : undefined);
+        };
+        ['name', 'email', 'phone', 'address'].forEach((key) => {
+            if (key === 'address') {
+                billingDetails.address = {
+                    line1: getBillingDetail(key),
+                };
+            }
+            else {
+                billingDetails[key] = getBillingDetail(key);
+            }
+        });
+        if (!save && specialMounts.save && specialMounts.save instanceof HTMLInputElement) {
+            save = specialMounts.save.checked;
+        }
+        return {
+            payment_method: {
+                card: cardElement,
+                billing_details: billingDetails,
+            },
+            setup_future_usage: (save ? 'off_session' : undefined),
+        };
+    };
+    let payOrSetup = (callback, hasPaymentMethod = false) => {
+        if (hasPaymentMethod || (complete && !fields.find(field => !!field.error))) {
+            setActive(true);
+            contextElement.dispatchEvent(new CustomEvent(`${StripeDirectiveName}.before`));
+            callback();
+        }
+        else { //Error
+            reportError('incomplete', 'Please fill in all required fields.');
+        }
+    };
+    elementScope.SetLocal(detailsKey, details);
+    elementScope.SetLocal(localKey, CreateInplaceProxy(BuildProxyOptions({
+        getter: (prop) => {
+            var _a, _b, _c, _d;
+            if (prop === 'bind') {
+                return () => {
+                    if (!stripeInstance) {
+                        bind();
+                    }
+                };
+            }
+            if (prop === 'active') {
+                (_a = FindComponentById(componentId)) === null || _a === void 0 ? void 0 : _a.GetBackend().changes.AddGetAccess(`${id}.${prop}`);
+                return active;
+            }
+            if (prop === 'readyCount') {
+                (_b = FindComponentById(componentId)) === null || _b === void 0 ? void 0 : _b.GetBackend().changes.AddGetAccess(`${id}.${prop}`);
+                return fields.reduce((prev, field) => (prev + (field.ready ? 1 : 0)), 0);
+            }
+            if (prop === 'complete') {
+                (_c = FindComponentById(componentId)) === null || _c === void 0 ? void 0 : _c.GetBackend().changes.AddGetAccess(`${id}.${prop}`);
+                return complete;
+            }
+            if (prop === 'errors') {
+                (_d = FindComponentById(componentId)) === null || _d === void 0 ? void 0 : _d.GetBackend().changes.AddGetAccess(`${id}.${prop}`);
+                return fields.filter(field => !!field.error).map(field => field.error);
+            }
+            if (prop === 'instance') {
+                return stripeInstance;
+            }
+            if (prop === 'publicKey') {
+                return StripePublicKey;
+            }
+            if (prop === 'styles') {
+                return StripeStyles;
+            }
+            if (prop === 'classes') {
+                return StripeClasses;
+            }
+            if (prop === 'url') {
+                return StripeUrl;
+            }
+            if (prop === 'pay') {
+                return (clientSecret, paymentMethod, save = false) => {
+                    payOrSetup(() => {
+                        let paymentDetails = getPaymentDetails(paymentMethod, save);
+                        if (paymentDetails) {
+                            stripeInstance === null || stripeInstance === void 0 ? void 0 : stripeInstance.confirmCardPayment(clientSecret, paymentDetails).then(onSuccess).catch(onError);
+                        }
+                    }, (!!paymentMethod && typeof paymentMethod === 'string'));
+                };
+            }
+            if (prop === 'setup') {
+                return (clientSecret, paymentMethod, save = false) => {
+                    payOrSetup(() => {
+                        let paymentDetails = getPaymentDetails(paymentMethod, save);
+                        if (paymentDetails) {
+                            stripeInstance === null || stripeInstance === void 0 ? void 0 : stripeInstance.confirmCardSetup(clientSecret, paymentDetails).then(onSuccess).catch(onError);
+                        }
+                    }, (!!paymentMethod && typeof paymentMethod === 'string'));
+                };
+            }
+        },
+        setter: (prop, value) => {
+            if (prop === 'publicKey') {
+                StripePublicKey = value;
+            }
+            else if (prop === 'styles') {
+                StripeStyles = value;
+            }
+            else if (prop === 'classes') {
+                StripeClasses = value;
+            }
+            else if (prop === 'url') {
+                StripeUrl = value;
+            }
+            return true;
+        },
+        lookup: ['bind', 'active', 'readyCount', 'complete', 'errors', 'instance', 'publicKey', 'styles', 'classes', 'url', 'pay', 'setup'],
+    })));
+    let bind = () => {
+        let resourceConcept = GetGlobal().GetConcept('resource');
+        if (StripeUrl && resourceConcept) {
+            resourceConcept.GetScript(StripeUrl).then(init);
+        }
+        else { //Resource not provided
+            init();
+        }
+    };
+    if (!options.manual) {
+        bind();
+    }
+});
+export function StripeDirectiveHandlerCompact() {
+    AddDirectiveHandler(StripeDirectiveHandler);
+}

package/lib/esm/index.d.ts

@@ -0,0 +1 @@
+export * from './directive/stripe';

package/lib/esm/index.js

@@ -0,0 +1 @@
+export * from './directive/stripe';

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@benbraide/inlinejs-stripe",
+  "version": "1.0.0",
+  "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",
+  "files": [
+    "lib/"
+  ],
+  "scripts": {
+    "test": "mocha -r jsdom-global/register lib/**/*.spec.js",
+    "ts-test": "mocha -r ts-node/register -r jsdom-global/register src/**/*.spec.ts",
+    "dbg-test": "mocha --inspect-brk -r ts-node/register -r jsdom-global/register src/**/*.spec.ts",
+    "tsc": "tsc -p ./tsconfig.json && tsc -p ./tsconfig.esm.json",
+    "prepublishOnly": "npm run tsc",
+    "tailwind": "postcss tailwind.css -o plublic/style.css"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/benbraide/inlinejs-stripe.git"
+  },
+  "keywords": [
+    "javascript",
+    "reactive",
+    "framework",
+    "html",
+    "attribute",
+    "embed"
+  ],
+  "author": "Benebo Braide",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/benbraide/inlinejs-stripe/issues"
+  },
+  "homepage": "https://github.com/benbraide/inlinejs-stripe#readme",
+  "devDependencies": {
+    "@testing-library/dom": "^7.31.2",
+    "@testing-library/user-event": "^13.1.9",
+    "@types/chai": "^4.2.18",
+    "@types/mocha": "^8.2.2",
+    "@types/stripe-v3": "^3.1.26",
+    "chai": "^4.3.4",
+    "jsdom": "^16.6.0",
+    "jsdom-global": "^3.0.2",
+    "mocha": "^9.0.0",
+    "ts-loader": "^9.2.3",
+    "ts-node": "^10.0.0",
+    "webpack": "^5.41.0"
+  },
+  "dependencies": {
+    "@benbraide/inlinejs": "^1.0.8",
+    "webpack-cli": "^4.7.2"
+  }
+}