@benbraide/inlinejs-stripe 1.0.8 → 2.0.1

package/lib/esm/components/field.js

@@ -0,0 +1,136 @@
+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.onready && EvaluateLater({
+                            componentId: this.componentId_,
+                            contextElement: this,
+                            expression: this.onready,
+                            disableFunctionCall: false,
+                        })();
+                        this.readyWaiters_.splice(0).forEach(waiter => JournalTry(waiter));
+                    });
+                    this.stripeField_.on('change', (event) => {
+                        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;

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

@@ -0,0 +1,30 @@
+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 StripePaymentMenthodElement extends 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([
+    Property({ type: 'object', checkStoredObject: true })
+], StripePaymentMenthodElement.prototype, "value", void 0);
+export function StripePaymentMenthodElementCompact() {
+    RegisterCustomElement(StripePaymentMenthodElement, 'stripe-payment-method');
+}

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

@@ -0,0 +1,32 @@
+/// <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 isReady_: boolean;
+    protected readyWaiters_: (() => void)[];
+    protected fields_: Array<IStripeField> | null;
+    protected readyFields_: 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>;
+    WaitReady(): Promise<void>;
+    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/esm/components/stripe.js

@@ -0,0 +1,157 @@
+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, JournalTry } from "@benbraide/inlinejs";
+import { CustomElement, Property, RegisterCustomElement } from "@benbraide/inlinejs-element";
+export class StripeElement extends CustomElement {
+    constructor() {
+        super();
+        this.stripe_ = null;
+        this.mounting_ = false;
+        this.mounted_ = false;
+        this.isReady_ = false;
+        this.readyWaiters_ = new Array();
+        this.fields_ = null;
+        this.readyFields_ = 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);
+        field.WaitReady().then(() => {
+            this.readyFields_ = (this.readyFields_ || []);
+            this.readyFields_.push(field);
+            (this.fields_ && this.readyFields_ && this.fields_.length <= this.readyFields_.length) && JournalTry(() => {
+                this.isReady_ = true;
+                this.onready && EvaluateLater({
+                    componentId: this.componentId_,
+                    contextElement: this,
+                    expression: this.onready,
+                    disableFunctionCall: false,
+                })();
+                this.readyWaiters_.splice(0).forEach(waiter => JournalTry(waiter));
+            });
+        });
+    }
+    RemoveStripeField(field) {
+        this.fields_ && (this.fields_ = this.fields_.filter(x => x !== field));
+        this.readyFields_ && (this.readyFields_ = this.readyFields_.filter(x => x !== field));
+    }
+    FocusNextField(field) {
+        if (this.autofocus && this.fields_) {
+            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 => JournalTry(waiter));
+        });
+    }
+    Pay(clientSecret, save = false) {
+        return this.PayOrSetup_(true, clientSecret, save);
+    }
+    Setup(clientSecret) {
+        return this.PayOrSetup_(false, clientSecret);
+    }
+    WaitReady() {
+        return new Promise(resolve => {
+            this.isReady_ ? resolve() : this.readyWaiters_.push(() => resolve());
+        });
+    }
+    HandleElementScopeCreated_(_a, postAttributesCallback) {
+        var { scope } = _a, rest = __rest(_a, ["scope"]);
+        super.HandleElementScopeCreated_(Object.assign({ scope }, rest), postAttributesCallback);
+        scope.AddPostProcessCallback(() => (!this.defer && this.Mount()));
+        scope.AddUninitCallback(() => (this.stripe_ = null));
+    }
+    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([
+    Property({ type: 'object', checkStoredObject: true })
+], StripeElement.prototype, "options", void 0);
+__decorate([
+    Property({ type: 'string' })
+], StripeElement.prototype, "publicKey", void 0);
+__decorate([
+    Property({ type: 'string' })
+], StripeElement.prototype, "onready", void 0);
+__decorate([
+    Property({ type: 'boolean' })
+], StripeElement.prototype, "defer", void 0);
+__decorate([
+    Property({ type: 'boolean' })
+], StripeElement.prototype, "autofocus", void 0);
+export function StripeElementCompact() {
+    RegisterCustomElement(StripeElement, 'stripe');
+}

package/lib/esm/entry.js

@@ -1,5 +1,13 @@
 import { WaitForGlobal } from '@benbraide/inlinejs';
-import { StripeDirectiveHandlerCompact } from './directive/stripe';
+import { StripeElementCompact } from './components/stripe';
+import { StripeFieldElementCompact } from './components/field';
+import { StripeDetailElementCompact } from './components/detail';
+import { StripePaymentMenthodElementCompact } from './components/payment-method';
 export function InlineJSStripe() {
-    WaitForGlobal().then(() => StripeDirectiveHandlerCompact());
+    WaitForGlobal().then(() => {
+        StripeElementCompact();
+        StripeFieldElementCompact();
+        StripeDetailElementCompact();
+        StripePaymentMenthodElementCompact();
+    });
 }

package/lib/esm/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/esm/index.js

@@ -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/esm/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/esm/types.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@benbraide/inlinejs-stripe",
-  "version": "1.0.8",
+  "version": "2.0.1",
   "description": "Run javascript code by embedding them in your HTML using the element as context.",
   "main": "./lib/common/index.js",
   "module": "./lib/esm/index.js",
@@ -17,7 +17,8 @@
     "prepublishOnly": "npm run compile",
     "build": "webpack -c ./webpack.config.js && webpack -c ./webpack2.config.js",
     "upload": "npm run build && npm publish --access=public",
-    "push": "npm i @benbraide/inlinejs && npm run upload"
+    "download": "npm i @benbraide/inlinejs @benbraide/inlinejs-element && npm audit fix",
+    "push": "npm run download && npm run upload"
   },
   "repository": {
     "type": "git",
@@ -52,7 +53,8 @@
     "webpack": "^5.41.0"
   },
   "dependencies": {
-    "@benbraide/inlinejs": "^1.0.27",
+    "@benbraide/inlinejs": "^1.1.2",
+    "@benbraide/inlinejs-element": "^2.0.4",
     "webpack-cli": "^4.7.2"
   }
 }