@forgeroute/ui 0.4.71 → 0.4.72

package/fesm2022/forgeroute-ui-stripe.mjs

@@ -1,7 +1,7 @@
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, Injectable, InjectionToken, Injector, PLATFORM_ID, ViewEncapsulation, afterNextRender, computed, effect, inject, input, model, output, signal, untracked, viewChild } from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, Injectable, InjectionToken, Injector, PLATFORM_ID, ViewEncapsulation, afterNextRender, computed, effect, forwardRef, inject, input, model, output, signal, untracked, viewChild } from "@angular/core";
 import { DOCUMENT, NgTemplateOutlet, isPlatformBrowser } from "@angular/common";
-import { AlertComponent, BadgeComponent, ButtonComponent, DetailCardComponent, FormRowComponent, FormSectionComponent, ModalComponent, SkeletonComponent, StackComponent, TextComponent, TextInputComponent } from "@forgeroute/ui";
+import { AlertComponent, BadgeComponent, ButtonComponent, DetailCardComponent, FormRowComponent, FormSectionComponent, HintComponent, KpiCardComponent, ModalComponent, PAYMENT_METHOD_PLUGIN, PaymentMethodPlugin, SkeletonComponent, StackComponent, TextComponent, TextInputComponent, callHost, formatCurrency } from "@forgeroute/ui";
 import * as i1 from "@angular/forms";
 import { FormsModule } from "@angular/forms";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
@@ -2511,6 +2511,7 @@ var MicrodepositVerifyComponent = class MicrodepositVerifyComponent {
 						"label",
 						"ariaLabel",
 						"inputTestId",
+						"inputName",
 						"placeholder",
 						"prefix",
 						"revealable",
@@ -3650,6 +3651,893 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-export { MICRODEPOSIT_COPY, MicrodepositVerifyComponent, STRIPE_A11Y_MESSAGES, STRIPE_ACH_NOTICE, STRIPE_DEFAULT_ERROR_MESSAGE, STRIPE_ERROR_MESSAGES, STRIPE_LOADER, STRIPE_PAYMENT_DEFAULTS, STRIPE_TECHNICAL_ERROR_MESSAGES, StripeConnectComponent, StripeConnectFlow, StripePaymentComponent, StripePaymentService, buildLoadOptions, defaultStripeLoader, depositAmountError, descriptorCodeError, getStripeErrorMessage, isDarkPage, isStripeUrl, microdepositArrivalText, microdepositCancelMessage, microdepositKeepsActiveText, microdepositProcessingText, microdepositStepsText, normalizeDescriptorCode, normalizeIntent, outcomeOf, paymentMethodIdOf, provideStripePayment, readStripeAppearance, readStripeReturnParams, retrieveIntent, stripeConnectNotice, verificationOf, verifyMicrodeposits };
+const STRIPE_PAYMENT_METHODS = [{
+	value: "CARD",
+	label: "Card"
+}, {
+	value: "ACH",
+	label: "ACH / Bank Transfer"
+}];
+const stripeMethodType = (method) => method === "ACH" ? "us_bank_account" : "card";
+const STRIPE_METHOD_TEXTS = {
+	amountNeeded: "Enter an amount to continue.",
+	notCompleted: "Payment was not completed. Please try again or choose another method.",
+	achTitle: "ACH Payment Submitted",
+	achMessage: (amount) => `Your bank payment of ${amount} has been submitted for processing. ACH payments typically take 3–5 business days to complete.`,
+	verificationTitle: "Bank Verification Needed",
+	verificationMessage: (amount) => `Your bank payment of ${amount} was submitted. The bank account must be verified with the small deposits Stripe sends, then the payment completes.`,
+	receiptNote: "A receipt is sent once the payment has been fully processed and settled."
+};
+const WALLETS = {
+	applePay: "never",
+	googlePay: "never"
+};
+const FIELDS = { billingDetails: { address: {
+	country: "auto",
+	postalCode: "auto"
+} } };
+var PaymentStripeBodyComponent = class PaymentStripeBodyComponent {
+	constructor() {
+		this.injector = inject(Injector);
+		this.host = inject(ElementRef);
+		this.ctx = input.required(...ngDevMode ? [{ debugName: "ctx" }] : /* istanbul ignore next */ []);
+		this.config = input.required(...ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []);
+		this.payment = viewChild(StripePaymentComponent, ...ngDevMode ? [{ debugName: "payment" }] : /* istanbul ignore next */ []);
+		this.texts = STRIPE_METHOD_TEXTS;
+		this.wallets = WALLETS;
+		this.fields = FIELDS;
+		this.complete = signal(false, ...ngDevMode ? [{ debugName: "complete" }] : /* istanbul ignore next */ []);
+		this.processing = signal(false, ...ngDevMode ? [{ debugName: "processing" }] : /* istanbul ignore next */ []);
+		this.done = signal(false, ...ngDevMode ? [{ debugName: "done" }] : /* istanbul ignore next */ []);
+		this.error = signal("", ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
+		this.estimate = signal(null, ...ngDevMode ? [{ debugName: "estimate" }] : /* istanbul ignore next */ []);
+		this.estimating = signal(false, ...ngDevMode ? [{ debugName: "estimating" }] : /* istanbul ignore next */ []);
+		this.estimateError = signal("", ...ngDevMode ? [{ debugName: "estimateError" }] : /* istanbul ignore next */ []);
+		this.estimateTick = signal(0, ...ngDevMode ? [{ debugName: "estimateTick" }] : /* istanbul ignore next */ []);
+		this.intentFees = signal(null, ...ngDevMode ? [{ debugName: "intentFees" }] : /* istanbul ignore next */ []);
+		this.confirmation = signal(null, ...ngDevMode ? [{ debugName: "confirmation" }] : /* istanbul ignore next */ []);
+		this.lastAmount = signal(null, ...ngDevMode ? [{ debugName: "lastAmount" }] : /* istanbul ignore next */ []);
+		this.intent = null;
+		this.estimateRun = 0;
+		this.estimateStale = false;
+		this.amountValue = computed(() => this.ctx().amount, ...ngDevMode ? [{ debugName: "amountValue" }] : /* istanbul ignore next */ []);
+		this.methodValue = computed(() => this.ctx().method, ...ngDevMode ? [{ debugName: "methodValue" }] : /* istanbul ignore next */ []);
+		this.methodType = computed(() => stripeMethodType(this.ctx().method), ...ngDevMode ? [{ debugName: "methodType" }] : /* istanbul ignore next */ []);
+		this.total = computed(() => this.estimate()?.totalAmount ?? this.lastAmount() ?? 0, ...ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []);
+		this.receiptNote = computed(() => this.config().receiptNote(), ...ngDevMode ? [{ debugName: "receiptNote" }] : /* istanbul ignore next */ []);
+		this.deferred = computed(() => ({
+			mode: "payment",
+			amount: Math.round(this.total() * 100),
+			currency: this.ctx().currency.toLowerCase()
+		}), ...ngDevMode ? [{ debugName: "deferred" }] : /* istanbul ignore next */ []);
+		this.defaultValues = computed(() => {
+			const b = this.config().billingDetails();
+			return b ? { billingDetails: b } : null;
+		}, ...ngDevMode ? [{ debugName: "defaultValues" }] : /* istanbul ignore next */ []);
+		this.feeRows = computed(() => {
+			const fees = this.intentFees() ?? this.estimate();
+			const amount = this.lastAmount();
+			if (!fees || amount == null || fees.stripeFee === void 0 && fees.platformFee === void 0) return [];
+			const money = (n) => formatCurrency(n, { currency: this.ctx().currency });
+			const rows = [{
+				key: "amount",
+				label: "Payment amount",
+				value: money(amount)
+			}];
+			if (fees.stripeFee !== void 0) rows.push({
+				key: "processing",
+				label: `Processing fee${fees.stripeFeeLabel ? ` (${fees.stripeFeeLabel})` : ""}`,
+				value: money(fees.stripeFee)
+			});
+			if (fees.platformFee !== void 0) rows.push({
+				key: "platform",
+				label: `Platform fee${fees.platformFeeLabel ? ` (${fees.platformFeeLabel})` : ""}`,
+				value: money(fees.platformFee)
+			});
+			return rows;
+		}, ...ngDevMode ? [{ debugName: "feeRows" }] : /* istanbul ignore next */ []);
+		this.totalCard = computed(() => {
+			const fees = this.intentFees() ?? this.estimate();
+			if (!fees || this.lastAmount() == null || fees.totalAmount === void 0) return null;
+			return {
+				value: formatCurrency(fees.totalAmount, { currency: this.ctx().currency }),
+				subtitle: "Payment amount plus fees"
+			};
+		}, ...ngDevMode ? [{ debugName: "totalCard" }] : /* istanbul ignore next */ []);
+		this.createIntentFn = async () => {
+			const create = this.config().createIntent();
+			const ctx = this.ctx();
+			if (!create || ctx.amount == null) throw new Error("Card payments are not available right now.");
+			this.cancelIntent(true);
+			const info = await callHost(() => create({
+				amount: ctx.amount,
+				paymentMethod: ctx.method,
+				paymentMethodType: this.methodType(),
+				receivedDate: ctx.receivedDate,
+				notes: ctx.note || null,
+				...ctx.allocation
+			}));
+			if (!info?.clientSecret) throw new Error("Failed to initialize payment. Please try again.");
+			this.intent = info;
+			this.intentFees.set({
+				stripeFee: info.stripeFee,
+				platformFee: info.platformFee,
+				totalAmount: info.totalAmount,
+				stripeFeeLabel: info.stripeFeeLabel,
+				platformFeeLabel: info.platformFeeLabel
+			});
+			return info.clientSecret;
+		};
+		effect(() => {
+			const amount = this.amountValue();
+			if (amount != null) untracked(() => this.lastAmount.set(amount));
+		});
+		effect(() => {
+			const ctx = this.ctx();
+			const processing = this.processing();
+			const notice = this.confirmation();
+			const complete = this.complete();
+			const estimating = this.estimating();
+			const done = this.done();
+			const estimateFailed = !!this.estimateError();
+			const label = notice ? "Done" : ctx.amount != null ? `Pay ${formatCurrency(this.total(), { currency: ctx.currency })}` : "Pay";
+			untracked(() => ctx.setPrimary({
+				label,
+				loading: processing && !notice,
+				disabled: notice ? done : !complete || processing || estimating || estimateFailed || ctx.amount == null || done,
+				onClick: () => notice ? this.finish() : void this.pay()
+			}));
+		});
+		effect((onCleanup) => {
+			const estimate = this.config().estimateFees();
+			const amount = this.amountValue();
+			const method = this.methodValue();
+			this.estimateTick();
+			const run = ++this.estimateRun;
+			untracked(() => {
+				this.estimate.set(null);
+				this.intentFees.set(null);
+				this.estimateError.set("");
+			});
+			if (!estimate || amount == null) {
+				untracked(() => this.estimating.set(false));
+				return;
+			}
+			untracked(() => this.estimating.set(true));
+			let hung = null;
+			const failure = "Could not calculate the fees. Please try again.";
+			const timer = setTimeout(async () => {
+				hung = setTimeout(() => {
+					if (run !== this.estimateRun) return;
+					this.estimating.set(false);
+					this.estimateError.set(failure);
+				}, Math.max(1, this.config().estimateTimeoutMs()));
+				let fees = null;
+				try {
+					fees = await callHost(() => estimate({
+						amount,
+						paymentMethod: method,
+						paymentMethodType: stripeMethodType(method)
+					})) ?? null;
+				} catch {
+					fees = null;
+				}
+				if (hung) {
+					clearTimeout(hung);
+					hung = null;
+				}
+				if (run !== this.estimateRun) return;
+				this.estimating.set(false);
+				if (this.processing()) {
+					this.estimateStale = true;
+					return;
+				}
+				if (fees) {
+					this.estimate.set(fees);
+					this.estimateError.set("");
+				} else {
+					this.estimate.set(null);
+					this.estimateError.set(this.config().feesRequired() ? failure : "");
+				}
+			}, 300);
+			onCleanup(() => {
+				clearTimeout(timer);
+				if (hung) clearTimeout(hung);
+			});
+		});
+		effect(() => {
+			if (this.processing()) return;
+			untracked(() => {
+				if (!this.estimateStale) return;
+				this.estimateStale = false;
+				if (!this.done() && !this.confirmation()) this.estimateTick.update((n) => n + 1);
+			});
+		});
+		effect(() => {
+			this.methodValue();
+			untracked(() => {
+				this.complete.set(false);
+				this.error.set("");
+			});
+		});
+		effect(() => {
+			const ctx = this.ctx();
+			untracked(() => ctx.onCancel(() => this.confirmation() ? this.finish() : this.cancelIntent()));
+		});
+		inject(DestroyRef).onDestroy(() => {
+			this.estimateRun++;
+			this.cancelIntent();
+		});
+	}
+	retryEstimate() {
+		this.estimateTick.update((n) => n + 1);
+	}
+	onReady() {
+		this.complete.set(false);
+		this.ctx().announce("Payment form ready");
+	}
+	onFailed(failure) {
+		this.error.set(failure.message);
+		this.processing.set(false);
+		this.ctx().report("failed", { message: failure.message });
+	}
+	async pay() {
+		const ctx = this.ctx();
+		const payment = this.payment();
+		if (this.processing() || this.estimating() || this.done() || !payment) return;
+		if (!ctx.validate() || ctx.amount == null) return;
+		this.error.set("");
+		this.processing.set(true);
+		ctx.setBusy(true);
+		ctx.announce("Processing payment");
+		let finished = false;
+		try {
+			const event = await payment.confirm();
+			if (event) finished = await this.afterConfirm(event, ctx);
+		} finally {
+			this.processing.set(false);
+			if (!finished) ctx.setBusy(false);
+		}
+	}
+	async afterConfirm(event, ctx) {
+		const amount = ctx.amount;
+		const money = formatCurrency(amount, { currency: ctx.currency });
+		if (event.outcome !== "succeeded" && event.outcome !== "processing" && event.outcome !== "requires_verification") {
+			this.error.set(this.texts.notCompleted);
+			return false;
+		}
+		const info = this.intent;
+		this.intent = null;
+		let finalizeFailed = false;
+		const finalize = this.config().finalize();
+		if (finalize && info) try {
+			await callHost(() => finalize(info));
+		} catch {
+			finalizeFailed = true;
+		}
+		const result = {
+			type: "stripe",
+			paymentMethod: ctx.method,
+			amount
+		};
+		if (event.outcome === "succeeded") {
+			ctx.report(finalizeFailed ? "finalize-failed" : "paid", { result });
+			this.done.set(true);
+			ctx.complete(result);
+			return true;
+		}
+		const verification = event.outcome === "requires_verification";
+		ctx.report(finalizeFailed ? "finalize-failed" : verification ? "verification" : "processing", { result });
+		this.confirmation.set(verification ? {
+			title: this.texts.verificationTitle,
+			message: this.texts.verificationMessage(money)
+		} : {
+			title: this.texts.achTitle,
+			message: this.texts.achMessage(money)
+		});
+		ctx.setExclusive(true);
+		ctx.setBusy(false);
+		afterNextRender(() => this.host.nativeElement.querySelector(".psm-notice")?.focus(), { injector: this.injector });
+		return true;
+	}
+	finish() {
+		const ctx = this.ctx();
+		if (this.done()) return;
+		this.done.set(true);
+		ctx.complete({
+			type: "stripe",
+			paymentMethod: ctx.method,
+			amount: ctx.amount ?? this.lastAmount() ?? 0
+		});
+	}
+	cancelIntent(force = false) {
+		const info = this.intent;
+		if (!info || this.processing() && !force) return;
+		this.intent = null;
+		const cancel = this.config().cancel();
+		if (cancel) callHost(() => cancel(info)).catch(() => {});
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: PaymentStripeBodyComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: PaymentStripeBodyComponent,
+			isStandalone: true,
+			selector: "ui-payment-stripe-body",
+			inputs: {
+				ctx: {
+					classPropertyName: "ctx",
+					publicName: "ctx",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				config: {
+					classPropertyName: "config",
+					publicName: "config",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				}
+			},
+			viewQueries: [{
+				propertyName: "payment",
+				first: true,
+				predicate: StripePaymentComponent,
+				descendants: true,
+				isSignal: true
+			}],
+			ngImport: i0,
+			template: `
+    <div class="psm">
+      @if (confirmation(); as notice) {
+        <ui-alert variant="success" [title]="notice.title" tabindex="-1" class="psm-notice" data-testid="stripe-method-confirmation">
+          <p>{{ notice.message }}</p>
+          <p>{{ receiptNote() }}</p>
+        </ui-alert>
+      } @else {
+        @if (ctx().amount == null) {
+          <ui-hint data-testid="stripe-method-amount-needed">{{ texts.amountNeeded }}</ui-hint>
+        }
+        @if (estimateError()) {
+          <div class="psm-error">
+            <ui-alert variant="warning" data-testid="stripe-method-estimate-error">{{ estimateError() }}
+              <ui-button variant="secondary" size="sm" data-testid="stripe-method-estimate-retry" (click)="retryEstimate()">Try again</ui-button>
+            </ui-alert>
+          </div>
+        }
+        @if (lastAmount() != null) {
+          <ui-stripe-payment #payment mode="payment" [publishableKey]="config().publishableKey()" [stripeAccount]="config().stripeAccount()" [deferred]="deferred()"
+            [createIntent]="createIntentFn" [paymentMethodTypes]="[methodType()]" [showSubmit]="false" [showErrors]="false" [autoHandleCardAction]="true"
+            [wallets]="wallets" [fields]="fields" [defaultValues]="defaultValues()" [appearance]="$any(config().appearance())" [appearanceFromTokens]="true" label="Payment details"
+            (ready)="onReady()" (elementChange)="complete.set($event.complete)" (failed)="onFailed($event)" (loadError)="onFailed($event)" />
+          @if (totalCard(); as card) {
+            <ui-kpi-card class="psm-total" data-testid="stripe-method-total" label="Total charged" [value]="card.value" [subtitle]="card.subtitle" icon="dollar" color="blue" valueColor="blue" />
+          }
+          @if (feeRows().length) {
+            <dl class="psm-fees" data-testid="stripe-method-fees" aria-label="Payment total">
+              @for (row of feeRows(); track row.key) {
+                <div class="psm-fee" [attr.data-testid]="'stripe-fee-' + row.key"><dt>{{ row.label }}</dt><dd>{{ row.value }}</dd></div>
+              }
+            </dl>
+          }
+          @if (error()) { <div class="psm-error"><ui-alert variant="danger" data-testid="stripe-method-error">{{ error() }}</ui-alert></div> }
+        }
+      }
+    </div>
+  `,
+			isInline: true,
+			styles: ["ui-payment-stripe-body{display:block;min-width:0}ui-payment-stripe-body .psm-error{margin-top:12px}ui-payment-stripe-body .psm-total{display:block;margin-top:16px}ui-payment-stripe-body .psm-fees{margin:16px 0 0;padding:14px 16px;border:1px solid var(--ui-psp-border, #e2e8f0);border-radius:10px;font-size:.8125rem}ui-payment-stripe-body .psm-fee{display:flex;justify-content:space-between;padding:4px 0;color:var(--ui-psp-muted, #475569)}ui-payment-stripe-body .psm-fee dt,ui-payment-stripe-body .psm-fee dd{margin:0}ui-payment-stripe-body .psm-notice:focus{outline:none}ui-payment-stripe-body .psm-notice p{margin:0 0 6px}\n"],
+			dependencies: [
+				{
+					kind: "component",
+					type: AlertComponent,
+					selector: "ui-alert",
+					inputs: [
+						"variant",
+						"title",
+						"dismissible",
+						"dismissAriaLabel",
+						"quiet",
+						"compact",
+						"inline",
+						"fill"
+					],
+					outputs: ["dismissed"]
+				},
+				{
+					kind: "component",
+					type: ButtonComponent,
+					selector: "ui-button",
+					inputs: [
+						"variant",
+						"routerLink",
+						"queryParams",
+						"fragment",
+						"state",
+						"href",
+						"target",
+						"rel",
+						"shortLabel",
+						"shortBelow",
+						"color",
+						"active",
+						"size",
+						"type",
+						"disabled",
+						"loading",
+						"fullWidth",
+						"ariaLabel",
+						"ariaExpanded",
+						"ariaPressed",
+						"ariaDescribedBy",
+						"modal-footer-left",
+						"modal-footer-right"
+					]
+				},
+				{
+					kind: "component",
+					type: HintComponent,
+					selector: "ui-hint"
+				},
+				{
+					kind: "component",
+					type: KpiCardComponent,
+					selector: "ui-kpi-card",
+					inputs: [
+						"label",
+						"value",
+						"subtitle",
+						"icon",
+						"color",
+						"highlight",
+						"clickable",
+						"valueColor",
+						"background",
+						"progress",
+						"progressMax",
+						"progressSize",
+						"progressStrokeWidth",
+						"progressVariant",
+						"progressAriaLabel",
+						"progressValueText"
+					]
+				},
+				{
+					kind: "component",
+					type: StripePaymentComponent,
+					selector: "ui-stripe-payment",
+					inputs: [
+						"mountOnly",
+						"mode",
+						"publishableKey",
+						"clientSecret",
+						"deferred",
+						"createIntent",
+						"stripeAccount",
+						"locale",
+						"stripeOptions",
+						"paymentMethodTypes",
+						"elementsOptions",
+						"layout",
+						"paymentMethodOrder",
+						"wallets",
+						"fields",
+						"defaultValues",
+						"business",
+						"terms",
+						"paymentElementOptions",
+						"appearance",
+						"appearanceFromTokens",
+						"returnUrl",
+						"billingDetails",
+						"confirmParams",
+						"redirect",
+						"submitBeforeConfirm",
+						"autoHandleCardAction",
+						"submitLabel",
+						"showSubmit",
+						"disabled",
+						"pending",
+						"label",
+						"required",
+						"mountId",
+						"mountClass",
+						"showAchNotice",
+						"achNotice",
+						"achNoticeTestId",
+						"initialPaymentMethodType",
+						"showErrors",
+						"errorDisplay",
+						"errorDisplayByStage",
+						"errorFallback",
+						"errorFallbackByStage",
+						"errorMessages",
+						"loadErrorMessage",
+						"a11yMessages"
+					],
+					outputs: [
+						"stripeReady",
+						"ready",
+						"paymentMethodTypeChange",
+						"elementChange",
+						"confirmed",
+						"failed",
+						"loadError"
+					]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: PaymentStripeBodyComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-payment-stripe-body",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				AlertComponent,
+				ButtonComponent,
+				HintComponent,
+				KpiCardComponent,
+				StripePaymentComponent
+			],
+			template: `
+    <div class="psm">
+      @if (confirmation(); as notice) {
+        <ui-alert variant="success" [title]="notice.title" tabindex="-1" class="psm-notice" data-testid="stripe-method-confirmation">
+          <p>{{ notice.message }}</p>
+          <p>{{ receiptNote() }}</p>
+        </ui-alert>
+      } @else {
+        @if (ctx().amount == null) {
+          <ui-hint data-testid="stripe-method-amount-needed">{{ texts.amountNeeded }}</ui-hint>
+        }
+        @if (estimateError()) {
+          <div class="psm-error">
+            <ui-alert variant="warning" data-testid="stripe-method-estimate-error">{{ estimateError() }}
+              <ui-button variant="secondary" size="sm" data-testid="stripe-method-estimate-retry" (click)="retryEstimate()">Try again</ui-button>
+            </ui-alert>
+          </div>
+        }
+        @if (lastAmount() != null) {
+          <ui-stripe-payment #payment mode="payment" [publishableKey]="config().publishableKey()" [stripeAccount]="config().stripeAccount()" [deferred]="deferred()"
+            [createIntent]="createIntentFn" [paymentMethodTypes]="[methodType()]" [showSubmit]="false" [showErrors]="false" [autoHandleCardAction]="true"
+            [wallets]="wallets" [fields]="fields" [defaultValues]="defaultValues()" [appearance]="$any(config().appearance())" [appearanceFromTokens]="true" label="Payment details"
+            (ready)="onReady()" (elementChange)="complete.set($event.complete)" (failed)="onFailed($event)" (loadError)="onFailed($event)" />
+          @if (totalCard(); as card) {
+            <ui-kpi-card class="psm-total" data-testid="stripe-method-total" label="Total charged" [value]="card.value" [subtitle]="card.subtitle" icon="dollar" color="blue" valueColor="blue" />
+          }
+          @if (feeRows().length) {
+            <dl class="psm-fees" data-testid="stripe-method-fees" aria-label="Payment total">
+              @for (row of feeRows(); track row.key) {
+                <div class="psm-fee" [attr.data-testid]="'stripe-fee-' + row.key"><dt>{{ row.label }}</dt><dd>{{ row.value }}</dd></div>
+              }
+            </dl>
+          }
+          @if (error()) { <div class="psm-error"><ui-alert variant="danger" data-testid="stripe-method-error">{{ error() }}</ui-alert></div> }
+        }
+      }
+    </div>
+  `,
+			styles: ["ui-payment-stripe-body{display:block;min-width:0}ui-payment-stripe-body .psm-error{margin-top:12px}ui-payment-stripe-body .psm-total{display:block;margin-top:16px}ui-payment-stripe-body .psm-fees{margin:16px 0 0;padding:14px 16px;border:1px solid var(--ui-psp-border, #e2e8f0);border-radius:10px;font-size:.8125rem}ui-payment-stripe-body .psm-fee{display:flex;justify-content:space-between;padding:4px 0;color:var(--ui-psp-muted, #475569)}ui-payment-stripe-body .psm-fee dt,ui-payment-stripe-body .psm-fee dd{margin:0}ui-payment-stripe-body .psm-notice:focus{outline:none}ui-payment-stripe-body .psm-notice p{margin:0 0 6px}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		ctx: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ctx",
+				required: true
+			}]
+		}],
+		config: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "config",
+				required: true
+			}]
+		}],
+		payment: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => StripePaymentComponent), { isSignal: true }]
+		}]
+	}
+});
+var StripePaymentMethodComponent = class StripePaymentMethodComponent extends PaymentMethodPlugin {
+	constructor() {
+		super(...arguments);
+		this.self = this;
+		this.createIntent = input(null, ...ngDevMode ? [{ debugName: "createIntent" }] : /* istanbul ignore next */ []);
+		this.finalize = input(null, ...ngDevMode ? [{ debugName: "finalize" }] : /* istanbul ignore next */ []);
+		this.cancel = input(null, ...ngDevMode ? [{ debugName: "cancel" }] : /* istanbul ignore next */ []);
+		this.estimateFees = input(null, ...ngDevMode ? [{ debugName: "estimateFees" }] : /* istanbul ignore next */ []);
+		this.publishableKey = input(null, ...ngDevMode ? [{ debugName: "publishableKey" }] : /* istanbul ignore next */ []);
+		this.stripeAccount = input(null, ...ngDevMode ? [{ debugName: "stripeAccount" }] : /* istanbul ignore next */ []);
+		this.billingDetails = input(null, ...ngDevMode ? [{ debugName: "billingDetails" }] : /* istanbul ignore next */ []);
+		this.appearance = input(null, ...ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []);
+		this.methodList = input(STRIPE_PAYMENT_METHODS, ...ngDevMode ? [{ debugName: "methodList" }] : /* istanbul ignore next */ []);
+		this.estimateTimeoutMs = input(1e4, ...ngDevMode ? [{ debugName: "estimateTimeoutMs" }] : /* istanbul ignore next */ []);
+		this.feesRequired = input(false, ...ngDevMode ? [{ debugName: "feesRequired" }] : /* istanbul ignore next */ []);
+		this.receiptNote = input(STRIPE_METHOD_TEXTS.receiptNote, ...ngDevMode ? [{ debugName: "receiptNote" }] : /* istanbul ignore next */ []);
+		this.body = viewChild("body", ...ngDevMode ? [{ debugName: "body" }] : /* istanbul ignore next */ []);
+		this.methods = this.methodList;
+		this.template = this.body;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: StripePaymentMethodComponent,
+			deps: null,
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.2.0",
+			version: "22.2.2",
+			type: StripePaymentMethodComponent,
+			isStandalone: true,
+			selector: "ui-payment-stripe-method",
+			inputs: {
+				createIntent: {
+					classPropertyName: "createIntent",
+					publicName: "createIntent",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				finalize: {
+					classPropertyName: "finalize",
+					publicName: "finalize",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				cancel: {
+					classPropertyName: "cancel",
+					publicName: "cancel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				estimateFees: {
+					classPropertyName: "estimateFees",
+					publicName: "estimateFees",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				publishableKey: {
+					classPropertyName: "publishableKey",
+					publicName: "publishableKey",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				stripeAccount: {
+					classPropertyName: "stripeAccount",
+					publicName: "stripeAccount",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				billingDetails: {
+					classPropertyName: "billingDetails",
+					publicName: "billingDetails",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				appearance: {
+					classPropertyName: "appearance",
+					publicName: "appearance",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				methodList: {
+					classPropertyName: "methodList",
+					publicName: "methodList",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				estimateTimeoutMs: {
+					classPropertyName: "estimateTimeoutMs",
+					publicName: "estimateTimeoutMs",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				feesRequired: {
+					classPropertyName: "feesRequired",
+					publicName: "feesRequired",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				receiptNote: {
+					classPropertyName: "receiptNote",
+					publicName: "receiptNote",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			host: { styleAttribute: "display: none" },
+			providers: [{
+				provide: PAYMENT_METHOD_PLUGIN,
+				useExisting: forwardRef(() => StripePaymentMethodComponent)
+			}],
+			viewQueries: [{
+				propertyName: "body",
+				first: true,
+				predicate: ["body"],
+				descendants: true,
+				isSignal: true
+			}],
+			usesInheritance: true,
+			ngImport: i0,
+			template: `<ng-template #body let-ctx><ui-payment-stripe-body [ctx]="ctx" [config]="self" /></ng-template>`,
+			isInline: true,
+			dependencies: [{
+				kind: "component",
+				type: PaymentStripeBodyComponent,
+				selector: "ui-payment-stripe-body",
+				inputs: ["ctx", "config"]
+			}],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: StripePaymentMethodComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-payment-stripe-method",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [PaymentStripeBodyComponent],
+			providers: [{
+				provide: PAYMENT_METHOD_PLUGIN,
+				useExisting: forwardRef(() => StripePaymentMethodComponent)
+			}],
+			host: { style: "display: none" },
+			template: `<ng-template #body let-ctx><ui-payment-stripe-body [ctx]="ctx" [config]="self" /></ng-template>`
+		}]
+	}],
+	propDecorators: {
+		createIntent: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "createIntent",
+				required: false
+			}]
+		}],
+		finalize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "finalize",
+				required: false
+			}]
+		}],
+		cancel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "cancel",
+				required: false
+			}]
+		}],
+		estimateFees: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "estimateFees",
+				required: false
+			}]
+		}],
+		publishableKey: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "publishableKey",
+				required: false
+			}]
+		}],
+		stripeAccount: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stripeAccount",
+				required: false
+			}]
+		}],
+		billingDetails: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "billingDetails",
+				required: false
+			}]
+		}],
+		appearance: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "appearance",
+				required: false
+			}]
+		}],
+		methodList: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "methodList",
+				required: false
+			}]
+		}],
+		estimateTimeoutMs: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "estimateTimeoutMs",
+				required: false
+			}]
+		}],
+		feesRequired: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "feesRequired",
+				required: false
+			}]
+		}],
+		receiptNote: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "receiptNote",
+				required: false
+			}]
+		}],
+		body: [{
+			type: i0.ViewChild,
+			args: ["body", { isSignal: true }]
+		}]
+	}
+});
+export { MICRODEPOSIT_COPY, MicrodepositVerifyComponent, STRIPE_A11Y_MESSAGES, STRIPE_ACH_NOTICE, STRIPE_DEFAULT_ERROR_MESSAGE, STRIPE_ERROR_MESSAGES, STRIPE_LOADER, STRIPE_METHOD_TEXTS, STRIPE_PAYMENT_DEFAULTS, STRIPE_PAYMENT_METHODS, STRIPE_TECHNICAL_ERROR_MESSAGES, StripeConnectComponent, StripeConnectFlow, StripePaymentComponent, StripePaymentMethodComponent, StripePaymentService, buildLoadOptions, defaultStripeLoader, depositAmountError, descriptorCodeError, getStripeErrorMessage, isDarkPage, isStripeUrl, microdepositArrivalText, microdepositCancelMessage, microdepositKeepsActiveText, microdepositProcessingText, microdepositStepsText, normalizeDescriptorCode, normalizeIntent, outcomeOf, paymentMethodIdOf, provideStripePayment, readStripeAppearance, readStripeReturnParams, retrieveIntent, stripeConnectNotice, verificationOf, verifyMicrodeposits };
 
 //# sourceMappingURL=forgeroute-ui-stripe.mjs.map