@benbraide/inlinejs-stripe 2.0.4 → 2.0.6

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

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

package/lib/esm/components/stripe.js

@@ -21,6 +21,7 @@ export class StripeElement extends CustomElement {
     constructor() {
         super();
         this.stripe_ = null;
+        this.elements_ = null;
         this.mounting_ = false;
         this.mounted_ = false;
         this.isReady_ = false;
@@ -28,6 +29,7 @@ export class StripeElement extends CustomElement {
         this.fields_ = null;
         this.readyFields_ = null;
         this.instanceWaiters_ = new Array();
+        this.interactiveFields_ = null;
         this.completeFields_ = null;
         this.errorFields_ = null;
         this.options = null;
@@ -44,6 +46,10 @@ export class StripeElement extends CustomElement {
         field.WaitReady().then(() => {
             this.readyFields_ = (this.readyFields_ || []);
             this.readyFields_.push(field);
+            if (field.IsInteractive()) {
+                this.interactiveFields_ = (this.interactiveFields_ || []);
+                this.interactiveFields_.push(field);
+            }
             (this.fields_ && this.readyFields_ && this.fields_.length <= this.readyFields_.length) && JournalTry(() => {
                 this.isReady_ = true;
                 this.onready && EvaluateLater({
@@ -61,11 +67,11 @@ export class StripeElement extends CustomElement {
                 this.completeFields_ = (this.completeFields_ || []);
                 if (data && !this.completeFields_.includes(field)) {
                     this.completeFields_.push(field);
-                    changed = !!(this.readyFields_ && this.completeFields_.length == this.readyFields_.length);
+                    changed = !!(this.interactiveFields_ && this.completeFields_.length == this.interactiveFields_.length);
                 }
                 else if (!data && this.completeFields_.includes(field)) {
                     this.completeFields_ = this.completeFields_.filter(x => x !== field);
-                    changed = !!(this.readyFields_ && (this.completeFields_.length == (this.readyFields_.length - 1)));
+                    changed = !!(this.interactiveFields_ && (this.completeFields_.length == (this.interactiveFields_.length - 1)));
                 }
                 changed && this.oncomplete && EvaluateLater({
                     componentId: this.componentId_,
@@ -100,6 +106,9 @@ export class StripeElement extends CustomElement {
     RemoveStripeField(field) {
         this.fields_ && (this.fields_ = this.fields_.filter(x => x !== field));
         this.readyFields_ && (this.readyFields_ = this.readyFields_.filter(x => x !== field));
+        this.interactiveFields_ && (this.interactiveFields_ = this.interactiveFields_.filter(x => x !== field));
+        this.completeFields_ && (this.completeFields_ = this.completeFields_.filter(x => x !== field));
+        this.errorFields_ && (this.errorFields_ = this.errorFields_.filter(x => x !== field));
     }
     FocusNextField(field) {
         if (this.fields_) {
@@ -107,12 +116,18 @@ export class StripeElement extends CustomElement {
             (index >= 0 && index < this.fields_.length - 1) && this.fields_[index + 1].ToggleFocus(true);
         }
     }
+    GetDetails() {
+        return {
+            stripe: this.stripe_,
+            elements: this.elements_,
+        };
+    }
     GetInstance() {
         return this.stripe_;
     }
     WaitInstance() {
         return new Promise(resolve => {
-            this.mounted_ ? resolve(this.stripe_) : this.instanceWaiters_.push(() => resolve(this.stripe_));
+            this.mounted_ ? resolve(this.GetDetails()) : this.instanceWaiters_.push(() => resolve(this.GetDetails()));
         });
     }
     Mount() {
@@ -124,6 +139,7 @@ export class StripeElement extends CustomElement {
             this.mounting_ = false;
             this.mounted_ = true;
             this.stripe_ = Stripe(this.publicKey);
+            this.elements_ = this.stripe_.elements();
             this.instanceWaiters_.splice(0).forEach(waiter => JournalTry(waiter));
         });
     }
@@ -146,37 +162,37 @@ export class StripeElement extends CustomElement {
     }
     PayOrSetup_(pay, clientSecret, save = false) {
         return new Promise((resolve, reject) => {
-            this.WaitInstance().then((stripe) => {
+            this.WaitInstance().then((details) => {
                 var _a, _b;
-                if (!stripe) {
+                if (!(details === null || details === void 0 ? void 0 : details.stripe)) {
                     return resolve(false);
                 }
-                const details = {};
-                (_a = this.fields_) === null || _a === void 0 ? void 0 : _a.forEach(field => field.AddDetails(details));
-                if (!details.method) {
+                const paymentDetails = {};
+                (_a = this.fields_) === null || _a === void 0 ? void 0 : _a.forEach(field => field.AddDetails(paymentDetails));
+                if (!paymentDetails.method) {
                     return resolve(false);
                 }
                 let cardDetails;
-                if (typeof details.method !== 'string') {
+                if (typeof paymentDetails.method !== 'string') {
                     cardDetails = {
                         payment_method: {
-                            card: details.method,
-                            billing_details: details.billingDetails,
+                            card: paymentDetails.method,
+                            billing_details: paymentDetails.billingDetails,
                         },
                     };
                 }
                 else {
                     cardDetails = {
-                        payment_method: details.method,
+                        payment_method: paymentDetails.method,
                     };
                 }
                 if (pay) {
-                    ((_b = details.billingDetails) === null || _b === void 0 ? void 0 : _b.email) && (cardDetails.receipt_email = details.billingDetails.email);
+                    ((_b = paymentDetails.billingDetails) === null || _b === void 0 ? void 0 : _b.email) && (cardDetails.receipt_email = paymentDetails.billingDetails.email);
                     save && (cardDetails.setup_future_usage = 'off_session');
-                    stripe.confirmCardPayment(clientSecret, cardDetails).then(resolve).catch(reject);
+                    details.stripe.confirmCardPayment(clientSecret, cardDetails).then(resolve).catch(reject);
                 }
                 else {
-                    stripe.confirmCardSetup(clientSecret, cardDetails).then(resolve).catch(reject);
+                    details.stripe.confirmCardSetup(clientSecret, cardDetails).then(resolve).catch(reject);
                 }
             }).catch(reject);
         });

package/lib/esm/types.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@benbraide/inlinejs-stripe",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "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",