@forgeroute/ui 0.4.78 → 0.4.79

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, forwardRef, inject, input, model, output, signal, untracked, viewChild } from "@angular/core";
+import { AlertComponent, BadgeComponent, ButtonComponent, DetailCardComponent, FormRowComponent, FormSectionComponent, HintComponent, KpiCardComponent, ModalComponent, PAYMENT_METHOD_PLUGIN, PaymentMethodPlugin, SkeletonComponent, StackComponent, TextComponent, TextInputComponent, UiLabelsService, callHost, formatCurrency, safeLocale, uiLocale, uiText } from "@forgeroute/ui";
 import { DOCUMENT, NgTemplateOutlet, isPlatformBrowser } from "@angular/common";
-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";
@@ -98,23 +98,25 @@ const STRIPE_TECHNICAL_ERROR_MESSAGES = {
 	invalid_request_error: "Something went wrong while processing the payment. Please try again."
 };
 const STRIPE_DEFAULT_ERROR_MESSAGE = "Payment failed. Please try again.";
-const STRIPE_SESSION_EXPIRED_MESSAGE = "Your payment session has expired. Please refresh the page and try again.";
+function localizedTable(english, prefix) {
+	return Object.fromEntries(Object.keys(english).map((code) => [code, uiText(`${prefix}${code}`)]));
+}
 function getStripeErrorMessage(error, options = {}) {
-	const fallback = options.fallback ?? "Payment failed. Please try again.";
+	const fallback = options.fallback ?? uiText("stripeErrors.defaultMessage");
 	if (!error) return fallback;
 	if (options.display === "stripe") return error.message || fallback;
 	const table = {
-		...STRIPE_ERROR_MESSAGES,
+		...localizedTable(STRIPE_ERROR_MESSAGES, "stripeErrors."),
 		...options.overrides ?? {}
 	};
 	if (error.decline_code && table[error.decline_code]) return table[error.decline_code];
 	if (error.code && table[error.code]) return table[error.code];
 	const message = error.message;
 	if (message) {
-		if (message.includes("already succeeded") || message.includes("previously confirmed")) return options.overrides?.["payment_intent_unexpected_state"] ?? "This payment has already been processed. Please refresh the page and try again.";
-		if (message.includes("expired")) return STRIPE_SESSION_EXPIRED_MESSAGE;
+		if (message.includes("already succeeded") || message.includes("previously confirmed")) return options.overrides?.["payment_intent_unexpected_state"] ?? uiText("stripeErrors.alreadyProcessed");
+		if (message.includes("expired")) return uiText("stripeErrors.sessionExpired");
 	}
-	const technical = options.display === "table" || !error.type ? void 0 : STRIPE_TECHNICAL_ERROR_MESSAGES[error.type];
+	const technical = options.display === "table" || !error.type || !(error.type in STRIPE_TECHNICAL_ERROR_MESSAGES) ? void 0 : uiText(`stripeErrors.technical.${error.type}`);
 	if (technical) return technical;
 	return message || fallback;
 }
@@ -182,10 +184,34 @@ function failureFromError(error, stage, options = {}) {
 		...error ? { error } : {}
 	};
 }
+const KNOWN_MESSAGE_KEYS = {
+	"Payment system not initialized": "stripePayment.msg.notInitialized",
+	"Failed to create payment intent": "stripePayment.msg.intentFailed",
+	"Payment was not completed": "stripePayment.msg.notCompleted",
+	"Payment failed. Please try a different payment method.": "stripePayment.msg.requiresPaymentMethod",
+	"No payment method returned from Stripe": "stripePayment.msg.noPaymentMethod",
+	"Payment authentication failed": "stripePayment.msg.authFailed",
+	"Payment authentication was not completed": "stripePayment.msg.authNotCompleted",
+	"A Stripe publishable key is required": "stripePayment.msg.keyMissing",
+	"Failed to load Stripe": "stripePayment.msg.loadFailed",
+	"Verification failed": "stripePayment.msg.verifyFailed",
+	"Verification failed. Please check the code and try again.": "stripePayment.msg.verifyThrown",
+	"We could not check the status of this payment. Please contact support before trying again.": "stripePayment.msg.returnFailed",
+	"Payment method setup was incomplete. Please try again.": "stripePayment.msg.setupIncomplete",
+	"Payment authentication failed. Please try a different payment method.": "stripePayment.msg.authFailedTryOther",
+	"Card payments are not available right now.": "stripePayment.msg.cardsUnavailable",
+	"Failed to initialize payment. Please try again.": "stripePayment.msg.initFailed",
+	"Could not calculate the fees. Please try again.": "stripePayment.msg.feesFailed",
+	"Payment failed. Please try again.": "stripeErrors.defaultMessage"
+};
+function localizeStripeMessage(message) {
+	const key = KNOWN_MESSAGE_KEYS[message];
+	return key ? uiText(key) : message;
+}
 function failure(code, message, stage, stripeMessage = "") {
 	return {
 		code,
-		message,
+		message: localizeStripeMessage(message),
 		stripeMessage,
 		stage
 	};
@@ -397,21 +423,40 @@ function readStripeAppearance(doc, element = doc.documentElement) {
 	};
 }
 const STRIPE_A11Y_MESSAGES = {
-	loading: "Loading payment form",
-	savingMethod: "Saving payment method",
-	processingPayment: "Processing payment",
-	methodSaved: "Payment method saved",
-	paymentReceived: "Payment received",
-	paymentProcessing: "Payment is processing",
-	paymentAuthorized: "Payment authorized",
-	verificationNeeded: "Bank account added. It needs to be verified with small deposits.",
-	actionRequired: "Further action is required to complete the payment"
+	get loading() {
+		return uiText("stripePayment.a11y.loading");
+	},
+	get savingMethod() {
+		return uiText("stripePayment.a11y.savingMethod");
+	},
+	get processingPayment() {
+		return uiText("stripePayment.a11y.processingPayment");
+	},
+	get methodSaved() {
+		return uiText("stripePayment.a11y.methodSaved");
+	},
+	get paymentReceived() {
+		return uiText("stripePayment.a11y.paymentReceived");
+	},
+	get paymentProcessing() {
+		return uiText("stripePayment.a11y.paymentProcessing");
+	},
+	get paymentAuthorized() {
+		return uiText("stripePayment.a11y.paymentAuthorized");
+	},
+	get verificationNeeded() {
+		return uiText("stripePayment.a11y.verificationNeeded");
+	},
+	get actionRequired() {
+		return uiText("stripePayment.a11y.actionRequired");
+	}
 };
 const STRIPE_ACH_NOTICE = "Signing in to your bank account lets you pay right away. Entering your routing and account numbers instead requires verification with two small deposits, which typically take a couple of days to arrive in your account.";
 let nextId = 0;
 const jsonEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b);
 var StripePaymentComponent = class StripePaymentComponent {
 	constructor() {
+		this.labels = inject(UiLabelsService);
 		this.loader = inject(STRIPE_LOADER);
 		this.defaults = inject(STRIPE_PAYMENT_DEFAULTS);
 		this.doc = inject(DOCUMENT);
@@ -448,12 +493,20 @@ var StripePaymentComponent = class StripePaymentComponent {
 		this.showSubmit = input(true, ...ngDevMode ? [{ debugName: "showSubmit" }] : /* istanbul ignore next */ []);
 		this.disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
 		this.pending = input(false, ...ngDevMode ? [{ debugName: "pending" }] : /* istanbul ignore next */ []);
-		this.label = input("Payment details", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+		this.labelInput = input(null, {
+			...ngDevMode ? { debugName: "labelInput" } : /* istanbul ignore next */ {},
+			alias: "label"
+		});
+		this.label = computed(() => this.labelInput() ?? this.labels.t("stripeStripePayment.label"), ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
 		this.required = input(false, ...ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []);
 		this.mountId = input("", ...ngDevMode ? [{ debugName: "mountId" }] : /* istanbul ignore next */ []);
 		this.mountClass = input("", ...ngDevMode ? [{ debugName: "mountClass" }] : /* istanbul ignore next */ []);
 		this.showAchNotice = input(true, ...ngDevMode ? [{ debugName: "showAchNotice" }] : /* istanbul ignore next */ []);
-		this.achNotice = input(STRIPE_ACH_NOTICE, ...ngDevMode ? [{ debugName: "achNotice" }] : /* istanbul ignore next */ []);
+		this.achNoticeInput = input(null, {
+			...ngDevMode ? { debugName: "achNoticeInput" } : /* istanbul ignore next */ {},
+			alias: "achNotice"
+		});
+		this.achNotice = computed(() => this.achNoticeInput() ?? this.labels.t("stripePayment.achNotice"), ...ngDevMode ? [{ debugName: "achNotice" }] : /* istanbul ignore next */ []);
 		this.achNoticeTestId = input("stripe-ach-notice", ...ngDevMode ? [{ debugName: "achNoticeTestId" }] : /* istanbul ignore next */ []);
 		this.initialPaymentMethodType = input("card", ...ngDevMode ? [{ debugName: "initialPaymentMethodType" }] : /* istanbul ignore next */ []);
 		this.showErrors = input(true, ...ngDevMode ? [{ debugName: "showErrors" }] : /* istanbul ignore next */ []);
@@ -462,7 +515,11 @@ var StripePaymentComponent = class StripePaymentComponent {
 		this.errorFallback = input("", ...ngDevMode ? [{ debugName: "errorFallback" }] : /* istanbul ignore next */ []);
 		this.errorFallbackByStage = input(null, ...ngDevMode ? [{ debugName: "errorFallbackByStage" }] : /* istanbul ignore next */ []);
 		this.errorMessages = input(null, ...ngDevMode ? [{ debugName: "errorMessages" }] : /* istanbul ignore next */ []);
-		this.loadErrorMessage = input("Failed to load the payment form. Please try again.", ...ngDevMode ? [{ debugName: "loadErrorMessage" }] : /* istanbul ignore next */ []);
+		this.loadErrorMessageInput = input(null, {
+			...ngDevMode ? { debugName: "loadErrorMessageInput" } : /* istanbul ignore next */ {},
+			alias: "loadErrorMessage"
+		});
+		this.loadErrorMessage = computed(() => this.loadErrorMessageInput() ?? this.labels.t("stripeStripePayment.loadErrorMessage"), ...ngDevMode ? [{ debugName: "loadErrorMessage" }] : /* istanbul ignore next */ []);
 		this.a11yMessages = input(null, ...ngDevMode ? [{ debugName: "a11yMessages" }] : /* istanbul ignore next */ []);
 		this.stripeReady = output();
 		this.ready = output();
@@ -483,7 +540,7 @@ var StripePaymentComponent = class StripePaymentComponent {
 		this.mountRef = viewChild("mount", ...ngDevMode ? [{ debugName: "mountRef" }] : /* istanbul ignore next */ []);
 		this.mountHidden = computed(() => !this.mountOnly() && (this.loading() || this.pending() || !!this.loadErrorText()), ...ngDevMode ? [{ debugName: "mountHidden" }] : /* istanbul ignore next */ []);
 		this.achNoticeVisible = computed(() => this.showAchNotice() && this.selectedType() === "us_bank_account", ...ngDevMode ? [{ debugName: "achNoticeVisible" }] : /* istanbul ignore next */ []);
-		this.effectiveSubmitLabel = computed(() => this.submitLabel() || (this.mode() === "setup" ? "Save payment method" : "Pay"), ...ngDevMode ? [{ debugName: "effectiveSubmitLabel" }] : /* istanbul ignore next */ []);
+		this.effectiveSubmitLabel = computed(() => this.submitLabel() || (this.mode() === "setup" ? this.labels.t("stripePayment.saveMethod") : this.labels.t("stripePayment.pay")), ...ngDevMode ? [{ debugName: "effectiveSubmitLabel" }] : /* istanbul ignore next */ []);
 		this.submitDisabled = computed(() => this.disabled() || this.loading() || this.pending() || !this.isReady() || !!this.loadErrorText(), ...ngDevMode ? [{ debugName: "submitDisabled" }] : /* istanbul ignore next */ []);
 		this.messages = computed(() => {
 			const given = Object.fromEntries(Object.entries(this.a11yMessages() ?? {}).filter(([, text]) => typeof text === "string"));
@@ -917,7 +974,7 @@ var StripePaymentComponent = class StripePaymentComponent {
 			return;
 		}
 		if (!connection.key) {
-			this.loadFailed(MSG_KEY_MISSING, "");
+			this.loadFailed(localizeStripeMessage(MSG_KEY_MISSING), "");
 			return;
 		}
 		this.loading.set(true);
@@ -928,7 +985,7 @@ var StripePaymentComponent = class StripePaymentComponent {
 				const stripe = await this.loader(connection.key, connection.options);
 				if (generation !== this.generation) return;
 				if (!stripe) {
-					this.loadFailed(MSG_LOAD_FAILED, "");
+					this.loadFailed(localizeStripeMessage(MSG_LOAD_FAILED), "");
 					return;
 				}
 				this.stripe = stripe;
@@ -964,7 +1021,7 @@ var StripePaymentComponent = class StripePaymentComponent {
 			});
 			element.on("loaderror", (event) => {
 				if (generation !== this.generation) return;
-				const message = event?.error?.message || "Failed to load Stripe";
+				const message = event?.error?.message || localizeStripeMessage("Failed to load Stripe");
 				this.loadFailed(message, event?.error?.message ?? "");
 			});
 			element.mount(container);
@@ -975,7 +1032,7 @@ var StripePaymentComponent = class StripePaymentComponent {
 			});
 		} catch (err) {
 			if (generation !== this.generation) return;
-			this.loadFailed(messageOfThrown(err, MSG_LOAD_FAILED), messageOfThrown(err, ""));
+			this.loadFailed(localizeStripeMessage(messageOfThrown(err, MSG_LOAD_FAILED)), messageOfThrown(err, ""));
 		}
 	}
 	applyDefaultValues(defaultValues) {
@@ -1238,8 +1295,8 @@ var StripePaymentComponent = class StripePaymentComponent {
 					isRequired: false,
 					transformFunction: null
 				},
-				label: {
-					classPropertyName: "label",
+				labelInput: {
+					classPropertyName: "labelInput",
 					publicName: "label",
 					isSignal: true,
 					isRequired: false,
@@ -1273,8 +1330,8 @@ var StripePaymentComponent = class StripePaymentComponent {
 					isRequired: false,
 					transformFunction: null
 				},
-				achNotice: {
-					classPropertyName: "achNotice",
+				achNoticeInput: {
+					classPropertyName: "achNoticeInput",
 					publicName: "achNotice",
 					isSignal: true,
 					isRequired: false,
@@ -1336,8 +1393,8 @@ var StripePaymentComponent = class StripePaymentComponent {
 					isRequired: false,
 					transformFunction: null
 				},
-				loadErrorMessage: {
-					classPropertyName: "loadErrorMessage",
+				loadErrorMessageInput: {
+					classPropertyName: "loadErrorMessageInput",
 					publicName: "loadErrorMessage",
 					isSignal: true,
 					isRequired: false,
@@ -1775,7 +1832,7 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
-		label: [{
+		labelInput: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
@@ -1815,7 +1872,7 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
-		achNotice: [{
+		achNoticeInput: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
@@ -1887,7 +1944,7 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
-		loadErrorMessage: [{
+		loadErrorMessageInput: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
@@ -1938,24 +1995,50 @@ i0.ɵɵngDeclareClassMetadata({
 	}
 });
 const MICRODEPOSIT_COPY = {
-	title: "Bank account waiting for verification",
-	processingTitle: "Bank account being confirmed",
-	processing: "Your bank is confirming this account; this usually takes up to a few business days. We will email you when it is ready.",
-	cannotPay: "Until then this account can't be used to pay invoices.",
-	readOnly: "An administrator of your organization can finish the verification.",
-	keepsActive: "Your current payment method stays active until the new bank account is verified.",
-	cancelTitle: "Cancel verification",
-	verifyLabel: "Verify bank account",
-	cancelBase: "Cancel the verification of this bank account? It will not be saved as a payment method and you can add it again later.",
-	cancelKeepsActive: " Your current payment method stays active.",
-	cancelNoOther: " You have no other payment method saved.",
-	tooManyAttempts: "Too many failed attempts. Please try again later or contact support.",
-	codeRequired: "Enter the 6-character code."
+	get title() {
+		return uiText("stripeMicrodepositVerify.title");
+	},
+	get processingTitle() {
+		return uiText("stripeMicrodepositVerify.processingTitle");
+	},
+	get processing() {
+		return uiText("stripeMicrodepositVerify.processing");
+	},
+	get cannotPay() {
+		return uiText("stripeMicrodepositVerify.cannotPay");
+	},
+	get readOnly() {
+		return uiText("stripeMicrodepositVerify.readOnly");
+	},
+	get keepsActive() {
+		return uiText("stripeMicrodepositVerify.keepsActive");
+	},
+	get cancelTitle() {
+		return uiText("stripeMicrodepositVerify.cancelTitle");
+	},
+	get verifyLabel() {
+		return uiText("stripeMicrodepositVerify.verifyLabel");
+	},
+	get cancelBase() {
+		return uiText("stripeMicrodepositVerify.cancelBase");
+	},
+	get cancelKeepsActive() {
+		return uiText("stripeMicrodepositVerify.cancelKeepsActive");
+	},
+	get cancelNoOther() {
+		return uiText("stripeMicrodepositVerify.cancelNoOther");
+	},
+	get tooManyAttempts() {
+		return uiText("stripeMicrodepositVerify.tooManyAttempts");
+	},
+	get codeRequired() {
+		return uiText("stripeMicrodepositVerify.codeRequired");
+	}
 };
 function microdepositArrivalText(iso) {
 	if (!iso) return "";
 	const date = new Date(iso);
-	return Number.isNaN(date.getTime()) ? "" : date.toLocaleDateString("en-US", {
+	return Number.isNaN(date.getTime()) ? "" : date.toLocaleDateString(safeLocale(uiLocale()), {
 		month: "long",
 		day: "numeric",
 		year: "numeric",
@@ -1965,16 +2048,16 @@ function microdepositArrivalText(iso) {
 function depositAmountError(value) {
 	if (value === "" || value === null || value === void 0) return "";
 	const n = Number(value);
-	if (!Number.isInteger(n)) return "Enter whole cents, for example 32.";
-	if (n < 1 || n > 99) return "Enter a number of cents from 1 to 99.";
+	if (!Number.isInteger(n)) return uiText("stripeMicrodepositVerify.wholeCents");
+	if (n < 1 || n > 99) return uiText("stripeMicrodepositVerify.centsRange");
 	return "";
 }
 const normalizeDescriptorCode = (value) => (value ?? "").trim().toUpperCase();
 function descriptorCodeError(value, requireSmPrefix = false) {
 	const code = normalizeDescriptorCode(value);
 	if (!code) return "";
-	if (!/^[A-Z0-9]{6}$/.test(code)) return "The code has 6 letters or numbers.";
-	if (requireSmPrefix && !/^SM[A-Z0-9]{4}$/.test(code)) return "Descriptor code must start with \"SM\" followed by 4 characters (e.g., SMXXXX)";
+	if (!/^[A-Z0-9]{6}$/.test(code)) return uiText("stripeMicrodepositVerify.code6");
+	if (requireSmPrefix && !/^SM[A-Z0-9]{4}$/.test(code)) return uiText("stripeMicrodepositVerify.codeSm");
 	return "";
 }
 function safeHostedUrl(url) {
@@ -1982,29 +2065,37 @@ function safeHostedUrl(url) {
 }
 const arrivalClause = (iso) => {
 	const text = microdepositArrivalText(iso);
-	return text ? ` (by ${text})` : "";
+	return text ? uiText("stripeMicrodepositVerify.byDate", { date: text }) : "";
 };
 function microdepositStepsText(ctx) {
+	const t = (key, params) => uiText(`stripeMicrodepositVerify.${key}`, params);
 	const partner = ctx.partnerName ?? "";
-	const holder = partner ? `${partner}'s account` : "your account";
+	const holder = partner ? t("holderPartner", { partner }) : t("holderYours");
 	const clause = arrivalClause(ctx.arrivalDate);
-	const deposits = ctx.type === "descriptor_code" ? `Stripe sent one small deposit to ${holder}${clause}, with a description that starts with SM followed by a 6-character code. ` : `Stripe sent two small deposits to ${holder}; they appear in 1-2 business days${clause}, with the description SMXXXX. `;
-	if (ctx.readOnly) return `${deposits}${ctx.readOnlyText ?? (ctx.startedBy === "partner" ? `This bank account was started by ${partner}; it can be finished by them.` : ctx.startedBy === "other" ? "This bank account was started by another crematory; it can be finished by them." : partner ? `${partner} or the crematory that set it up can finish the verification.` : MICRODEPOSIT_COPY.readOnly)} ${MICRODEPOSIT_COPY.cannotPay}`;
-	return `${deposits}${ctx.type === "descriptor_code" ? partner ? `Ask ${partner} for the code and enter it below to finish. ` : "When it arrives, enter that code below to finish. " : partner ? `Ask ${partner} for the two deposit amounts and enter them below to finish. ` : "When they arrive, enter the two amounts below to finish. "}${MICRODEPOSIT_COPY.cannotPay}`;
+	const deposits = ctx.type === "descriptor_code" ? t("depositsDescriptor", {
+		holder,
+		clause
+	}) : t("depositsAmounts", {
+		holder,
+		clause
+	});
+	if (ctx.readOnly) return `${deposits}${ctx.readOnlyText ?? (ctx.startedBy === "partner" ? t("startedByPartner", { partner }) : ctx.startedBy === "other" ? t("startedByOther") : partner ? t("partnerOrSetup", { partner }) : MICRODEPOSIT_COPY.readOnly)} ${MICRODEPOSIT_COPY.cannotPay}`;
+	return `${deposits}${ctx.type === "descriptor_code" ? partner ? t("enterCodePartner", { partner }) : t("enterCodeOwn") : partner ? t("enterAmountsPartner", { partner }) : t("enterAmountsOwn")}${MICRODEPOSIT_COPY.cannotPay}`;
 }
 function microdepositProcessingText(partnerName = "") {
-	return partnerName ? `${partnerName}'s bank is confirming this account; this usually takes up to a few business days. We will email you when it is ready.` : MICRODEPOSIT_COPY.processing;
+	return partnerName ? uiText("stripeMicrodepositVerify.processingPartner", { partner: partnerName }) : MICRODEPOSIT_COPY.processing;
 }
 function microdepositKeepsActiveText(partnerName = "") {
-	return partnerName ? `${partnerName}'s current payment method stays active until the new bank account is verified.` : MICRODEPOSIT_COPY.keepsActive;
+	return partnerName ? uiText("stripeMicrodepositVerify.keepsActivePartner", { partner: partnerName }) : MICRODEPOSIT_COPY.keepsActive;
 }
 function microdepositCancelMessage(options = {}) {
 	const partner = options.partnerName ?? "";
-	if (partner) return `${MICRODEPOSIT_COPY.cancelBase} ${options.hasSavedMethod ? `${partner}'s current payment method stays active.` : `${partner} has no other payment method saved.`}`;
+	if (partner) return `${MICRODEPOSIT_COPY.cancelBase} ${options.hasSavedMethod ? uiText("stripeMicrodepositVerify.cancelKeepsActivePartner", { partner }) : uiText("stripeMicrodepositVerify.cancelNoOtherPartner", { partner })}`;
 	return MICRODEPOSIT_COPY.cancelBase + (options.hasSavedMethod ? MICRODEPOSIT_COPY.cancelKeepsActive : MICRODEPOSIT_COPY.cancelNoOther);
 }
 var MicrodepositVerifyComponent = class MicrodepositVerifyComponent {
 	constructor() {
+		this.labels = inject(UiLabelsService);
 		this.service = inject(StripePaymentService);
 		this.type = input("amounts", ...ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []);
 		this.bankName = input("", ...ngDevMode ? [{ debugName: "bankName" }] : /* istanbul ignore next */ []);
@@ -2051,7 +2142,7 @@ var MicrodepositVerifyComponent = class MicrodepositVerifyComponent {
 			const bank = this.bankName().trim();
 			const last4 = this.last4().trim();
 			if (!bank && !last4) return "";
-			return `${bank || "Bank account"}${last4 ? ` ····${last4}` : ""}`;
+			return `${bank || this.labels.t("stripeMicrodepositVerify.bankFallback")}${last4 ? ` ····${last4}` : ""}`;
 		}, ...ngDevMode ? [{ debugName: "bankLine" }] : /* istanbul ignore next */ []);
 		this.busy = computed(() => this.verifying() || this.stripeBusy(), ...ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []);
 		this.shownError = computed(() => this.stripeError() || this.errorText(), ...ngDevMode ? [{ debugName: "shownError" }] : /* istanbul ignore next */ []);
@@ -2096,9 +2187,12 @@ var MicrodepositVerifyComponent = class MicrodepositVerifyComponent {
 			return;
 		}
 		this.failedAttempts++;
-		const message = result.failure?.message ?? "Verification failed";
+		const message = result.failure?.message ?? localizeStripeMessage("Verification failed");
 		const remaining = max - this.failedAttempts;
-		this.stripeError.set(max > 0 && remaining > 0 ? `${message} (${remaining} attempt${remaining === 1 ? "" : "s"} remaining)` : message);
+		this.stripeError.set(max > 0 && remaining > 0 ? this.labels.t(remaining === 1 ? "stripeMicrodepositVerify.attemptsRemaining_one" : "stripeMicrodepositVerify.attemptsRemaining_other", {
+			message,
+			count: remaining
+		}) : message);
 		this.verifyFailed.emit(result);
 	}
 	confirmCancel() {
@@ -2320,7 +2414,7 @@ var MicrodepositVerifyComponent = class MicrodepositVerifyComponent {
         <ui-alert variant="info" data-testid="bank-pending-alert">
           <div data-testid="bank-pending-summary">
             @if (bankLine(); as line) { <strong data-testid="bank-pending-bank">{{ line }}</strong> }
-            <ui-badge label="Pending" variant="yellow" data-testid="bank-pending-badge" />
+            <ui-badge [label]="labels.t('stripeMicrodepositVerify.pending')" variant="yellow" data-testid="bank-pending-badge" />
           </div>
           @if (stepsText().trim()) {
             <ui-text size="sm" [text]="stepsText()" data-testid="bank-pending-steps" />
@@ -2334,19 +2428,19 @@ var MicrodepositVerifyComponent = class MicrodepositVerifyComponent {
           }
           <!-- Finishing the verification on Stripe's page saves the payment method (a write): never offered to a read-only user -->
           @if (!formHidden() && !hideHostedLink() && safeUrl(); as url) {
-            <div><ui-button variant="link" size="sm" [href]="url" target="_blank" data-testid="bank-hosted-link">Open Stripe's verification page</ui-button></div>
+            <div><ui-button variant="link" size="sm" [href]="url" target="_blank" data-testid="bank-hosted-link">{{ labels.t('stripeMicrodepositVerify.openStripeSVerificationPage') }}</ui-button></div>
           }
         </ui-alert>
 
         @if (!formHidden() && !isProcessing()) {
           @if (type() === 'descriptor_code') {
-            <ui-text-input label="Verification code" hint="6 letters or numbers from the deposit description" [maxlength]="6" [required]="true" [showErrors]="touched()"
+            <ui-text-input [label]="labels.t('stripeMicrodepositVerify.verificationCode')" [hint]="labels.t('stripeMicrodepositVerify.6LettersOrNumbersFrom')" [maxlength]="6" [required]="true" [showErrors]="touched()"
               [error]="touched() ? codeError() : ''" data-testid="bank-code-input" [ngModel]="code()" (ngModelChange)="code.set($event)" />
           } @else {
             <ui-form-row data-testid="bank-amounts-row">
-              <ui-text-input label="First deposit (cents)" type="number" [min]="1" [max]="99" [maxDecimals]="0" [required]="true" [showErrors]="touched()"
+              <ui-text-input [label]="labels.t('stripeMicrodepositVerify.firstDepositCents')" type="number" [min]="1" [max]="99" [maxDecimals]="0" [required]="true" [showErrors]="touched()"
                 [error]="touched() ? amountError(first()) : ''" data-testid="bank-amount-first" [ngModel]="first()" (ngModelChange)="first.set($event)" />
-              <ui-text-input label="Second deposit (cents)" type="number" [min]="1" [max]="99" [maxDecimals]="0" [required]="true" [showErrors]="touched()"
+              <ui-text-input [label]="labels.t('stripeMicrodepositVerify.secondDepositCents')" type="number" [min]="1" [max]="99" [maxDecimals]="0" [required]="true" [showErrors]="touched()"
                 [error]="touched() ? amountError(second()) : ''" data-testid="bank-amount-second" [ngModel]="second()" (ngModelChange)="second.set($event)" />
             </ui-form-row>
           }
@@ -2363,7 +2457,7 @@ var MicrodepositVerifyComponent = class MicrodepositVerifyComponent {
 
       <ui-modal [open]="showCancelConfirm()" [title]="cancelLabel() || copy.cancelTitle" maxWidth="460px" (close)="showCancelConfirm.set(false)">
         <ui-text size="sm" data-testid="bank-cancel-message" [text]="cancelMessage()" />
-        <ui-button modal-footer-left variant="secondary" size="sm" data-testid="bank-cancel-keep" (click)="showCancelConfirm.set(false)">Keep waiting</ui-button>
+        <ui-button modal-footer-left variant="secondary" size="sm" data-testid="bank-cancel-keep" (click)="showCancelConfirm.set(false)">{{ labels.t('stripeMicrodepositVerify.keepWaiting') }}</ui-button>
         <ui-button modal-footer-right variant="danger" size="sm" data-testid="bank-cancel-confirm" [loading]="cancelling()" (click)="confirmCancel()">{{ cancelLabel() || copy.cancelTitle }}</ui-button>
       </ui-modal>
     </div>
@@ -2582,7 +2676,7 @@ i0.ɵɵngDeclareClassMetadata({
         <ui-alert variant="info" data-testid="bank-pending-alert">
           <div data-testid="bank-pending-summary">
             @if (bankLine(); as line) { <strong data-testid="bank-pending-bank">{{ line }}</strong> }
-            <ui-badge label="Pending" variant="yellow" data-testid="bank-pending-badge" />
+            <ui-badge [label]="labels.t('stripeMicrodepositVerify.pending')" variant="yellow" data-testid="bank-pending-badge" />
           </div>
           @if (stepsText().trim()) {
             <ui-text size="sm" [text]="stepsText()" data-testid="bank-pending-steps" />
@@ -2596,19 +2690,19 @@ i0.ɵɵngDeclareClassMetadata({
           }
           <!-- Finishing the verification on Stripe's page saves the payment method (a write): never offered to a read-only user -->
           @if (!formHidden() && !hideHostedLink() && safeUrl(); as url) {
-            <div><ui-button variant="link" size="sm" [href]="url" target="_blank" data-testid="bank-hosted-link">Open Stripe's verification page</ui-button></div>
+            <div><ui-button variant="link" size="sm" [href]="url" target="_blank" data-testid="bank-hosted-link">{{ labels.t('stripeMicrodepositVerify.openStripeSVerificationPage') }}</ui-button></div>
           }
         </ui-alert>
 
         @if (!formHidden() && !isProcessing()) {
           @if (type() === 'descriptor_code') {
-            <ui-text-input label="Verification code" hint="6 letters or numbers from the deposit description" [maxlength]="6" [required]="true" [showErrors]="touched()"
+            <ui-text-input [label]="labels.t('stripeMicrodepositVerify.verificationCode')" [hint]="labels.t('stripeMicrodepositVerify.6LettersOrNumbersFrom')" [maxlength]="6" [required]="true" [showErrors]="touched()"
               [error]="touched() ? codeError() : ''" data-testid="bank-code-input" [ngModel]="code()" (ngModelChange)="code.set($event)" />
           } @else {
             <ui-form-row data-testid="bank-amounts-row">
-              <ui-text-input label="First deposit (cents)" type="number" [min]="1" [max]="99" [maxDecimals]="0" [required]="true" [showErrors]="touched()"
+              <ui-text-input [label]="labels.t('stripeMicrodepositVerify.firstDepositCents')" type="number" [min]="1" [max]="99" [maxDecimals]="0" [required]="true" [showErrors]="touched()"
                 [error]="touched() ? amountError(first()) : ''" data-testid="bank-amount-first" [ngModel]="first()" (ngModelChange)="first.set($event)" />
-              <ui-text-input label="Second deposit (cents)" type="number" [min]="1" [max]="99" [maxDecimals]="0" [required]="true" [showErrors]="touched()"
+              <ui-text-input [label]="labels.t('stripeMicrodepositVerify.secondDepositCents')" type="number" [min]="1" [max]="99" [maxDecimals]="0" [required]="true" [showErrors]="touched()"
                 [error]="touched() ? amountError(second()) : ''" data-testid="bank-amount-second" [ngModel]="second()" (ngModelChange)="second.set($event)" />
             </ui-form-row>
           }
@@ -2625,7 +2719,7 @@ i0.ɵɵngDeclareClassMetadata({
 
       <ui-modal [open]="showCancelConfirm()" [title]="cancelLabel() || copy.cancelTitle" maxWidth="460px" (close)="showCancelConfirm.set(false)">
         <ui-text size="sm" data-testid="bank-cancel-message" [text]="cancelMessage()" />
-        <ui-button modal-footer-left variant="secondary" size="sm" data-testid="bank-cancel-keep" (click)="showCancelConfirm.set(false)">Keep waiting</ui-button>
+        <ui-button modal-footer-left variant="secondary" size="sm" data-testid="bank-cancel-keep" (click)="showCancelConfirm.set(false)">{{ labels.t('stripeMicrodepositVerify.keepWaiting') }}</ui-button>
         <ui-button modal-footer-right variant="danger" size="sm" data-testid="bank-cancel-confirm" [loading]="cancelling()" (click)="confirmCancel()">{{ cancelLabel() || copy.cancelTitle }}</ui-button>
       </ui-modal>
     </div>
@@ -3012,28 +3106,29 @@ function stripeConnectNotice(outcome) {
 	switch (outcome.kind) {
 		case "complete": return {
 			variant: "success",
-			message: outcome.source === "resume" ? "Payment account setup is already complete!" : "Payment account setup complete!"
+			message: uiText(outcome.source === "resume" ? "stripeStripeConnect.noticeCompleteResume" : "stripeStripeConnect.noticeComplete")
 		};
 		case "verifying": return {
 			variant: "success",
-			message: "Setup submitted! Stripe is verifying your account. This usually takes a few minutes. Click \"Check Status\" to refresh."
+			message: uiText("stripeStripeConnect.noticeVerifying")
 		};
 		case "incomplete": return {
 			variant: "error",
-			message: "Payment account setup is not yet complete. Please continue setup."
+			message: uiText("stripeStripeConnect.noticeIncomplete")
 		};
 		case "link-unavailable": return {
 			variant: "error",
-			message: "Unable to retrieve onboarding link. Please try again."
+			message: uiText("stripeStripeConnect.noticeLinkUnavailable")
 		};
 		case "failed": return {
 			variant: "error",
-			message: outcome.action === "start" ? "Failed to start payment account setup" : outcome.action === "check" ? "Failed to check payment account status" : "Failed to retrieve onboarding link"
+			message: uiText(outcome.action === "start" ? "stripeStripeConnect.failedStart" : outcome.action === "check" ? "stripeStripeConnect.failedCheck" : "stripeStripeConnect.failedLink")
 		};
 	}
 }
 var StripeConnectComponent = class StripeConnectComponent {
 	constructor() {
+		this.labels = inject(UiLabelsService);
 		this.destroyRef = inject(DestroyRef);
 		this.injector = inject(Injector);
 		this.host = inject(ElementRef);
@@ -3042,12 +3137,28 @@ var StripeConnectComponent = class StripeConnectComponent {
 		this.accountId = model(null, ...ngDevMode ? [{ debugName: "accountId" }] : /* istanbul ignore next */ []);
 		this.complete = model(false, ...ngDevMode ? [{ debugName: "complete" }] : /* istanbul ignore next */ []);
 		this.detailsSubmitted = model(false, ...ngDevMode ? [{ debugName: "detailsSubmitted" }] : /* istanbul ignore next */ []);
-		this.title = input("Stripe Connect Account", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+		this.titleInput = input(null, {
+			...ngDevMode ? { debugName: "titleInput" } : /* istanbul ignore next */ {},
+			alias: "title"
+		});
+		this.title = computed(() => this.titleInput() ?? this.labels.t("stripeStripeConnect.title"), ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
 		this.bare = input(false, ...ngDevMode ? [{ debugName: "bare" }] : /* istanbul ignore next */ []);
 		this.showWhenNoAccount = input(false, ...ngDevMode ? [{ debugName: "showWhenNoAccount" }] : /* istanbul ignore next */ []);
-		this.startTitle = input("Connect your Stripe account", ...ngDevMode ? [{ debugName: "startTitle" }] : /* istanbul ignore next */ []);
-		this.startText = input("Collect your customers' payments online. You finish setting up your account on Stripe, then come back here.", ...ngDevMode ? [{ debugName: "startText" }] : /* istanbul ignore next */ []);
-		this.startLabel = input("Set Up Payment Account", ...ngDevMode ? [{ debugName: "startLabel" }] : /* istanbul ignore next */ []);
+		this.startTitleInput = input(null, {
+			...ngDevMode ? { debugName: "startTitleInput" } : /* istanbul ignore next */ {},
+			alias: "startTitle"
+		});
+		this.startTitle = computed(() => this.startTitleInput() ?? this.labels.t("stripeStripeConnect.startTitle"), ...ngDevMode ? [{ debugName: "startTitle" }] : /* istanbul ignore next */ []);
+		this.startTextInput = input(null, {
+			...ngDevMode ? { debugName: "startTextInput" } : /* istanbul ignore next */ {},
+			alias: "startText"
+		});
+		this.startText = computed(() => this.startTextInput() ?? this.labels.t("stripeStripeConnect.startText"), ...ngDevMode ? [{ debugName: "startText" }] : /* istanbul ignore next */ []);
+		this.startLabelInput = input(null, {
+			...ngDevMode ? { debugName: "startLabelInput" } : /* istanbul ignore next */ {},
+			alias: "startLabel"
+		});
+		this.startLabel = computed(() => this.startLabelInput() ?? this.labels.t("stripeStripeConnect.startLabel"), ...ngDevMode ? [{ debugName: "startLabel" }] : /* istanbul ignore next */ []);
 		this.disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
 		this.refreshOnReturn = input(false, ...ngDevMode ? [{ debugName: "refreshOnReturn" }] : /* istanbul ignore next */ []);
 		this.dashboardUrl = input("https://dashboard.stripe.com", ...ngDevMode ? [{ debugName: "dashboardUrl" }] : /* istanbul ignore next */ []);
@@ -3058,13 +3169,13 @@ var StripeConnectComponent = class StripeConnectComponent {
 		this.state = computed(() => !this.accountId() ? "none" : this.complete() ? "complete" : this.detailsSubmitted() ? "verifying" : "incomplete", ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
 		this.liveText = computed(() => {
 			if (!this.visible()) return "";
-			const text = {
-				none: "Stripe account not connected.",
-				incomplete: "Account setup incomplete.",
-				verifying: "Stripe is verifying your account.",
-				complete: "Account setup complete."
-			}[this.state()];
-			return this.loading() ? `${text} Loading.` : text;
+			const text = this.labels.t({
+				none: "stripeStripeConnect.liveNone",
+				incomplete: "stripeStripeConnect.liveIncomplete",
+				verifying: "stripeStripeConnect.liveVerifying",
+				complete: "stripeStripeConnect.liveComplete"
+			}[this.state()]);
+			return this.loading() ? this.labels.t("stripeStripeConnect.liveLoading", { text }) : text;
 		}, ...ngDevMode ? [{ debugName: "liveText" }] : /* istanbul ignore next */ []);
 		this.acted = false;
 		this.lastState = this.state();
@@ -3180,8 +3291,8 @@ var StripeConnectComponent = class StripeConnectComponent {
 					isRequired: false,
 					transformFunction: null
 				},
-				title: {
-					classPropertyName: "title",
+				titleInput: {
+					classPropertyName: "titleInput",
 					publicName: "title",
 					isSignal: true,
 					isRequired: false,
@@ -3201,22 +3312,22 @@ var StripeConnectComponent = class StripeConnectComponent {
 					isRequired: false,
 					transformFunction: null
 				},
-				startTitle: {
-					classPropertyName: "startTitle",
+				startTitleInput: {
+					classPropertyName: "startTitleInput",
 					publicName: "startTitle",
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
 				},
-				startText: {
-					classPropertyName: "startText",
+				startTextInput: {
+					classPropertyName: "startTextInput",
 					publicName: "startText",
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
 				},
-				startLabel: {
-					classPropertyName: "startLabel",
+				startLabelInput: {
+					classPropertyName: "startLabelInput",
 					publicName: "startLabel",
 					isSignal: true,
 					isRequired: false,
@@ -3285,31 +3396,31 @@ var StripeConnectComponent = class StripeConnectComponent {
           <strong class="sc-title">{{ startTitle() }}</strong>
           <ui-text size="sm" [text]="startText()" />
           <ui-stack direction="horizontal">
-            <ui-button variant="primary" size="sm" data-testid="connect-start-button" [disabled]="disabled()" (click)="start()">@if (loading()) {<span aria-hidden="true">Loading...</span><span class="sc-sr">{{ startLabel() }}, opens in a new tab, busy</span>} @else { {{ startLabel() }}<span class="sc-sr">, opens in a new tab</span>}</ui-button>
+            <ui-button variant="primary" size="sm" data-testid="connect-start-button" [disabled]="disabled()" (click)="start()">@if (loading()) {<span aria-hidden="true">{{ labels.t('common.loadingellipsis') }}</span><span class="sc-sr">{{ labels.t('stripeStripeConnect.opensInNewTabBusy', { label: startLabel() }) }}</span>} @else { {{ startLabel() }}<span class="sc-sr">{{ labels.t('stripeStripeConnect.opensInNewTabSr') }}</span>}</ui-button>
           </ui-stack>
         </ui-stack>
       } @else if (complete()) {
         <ui-stack gap="sm" class="sc-state" tabindex="-1" data-testid="connect-status-complete">
-          <strong class="sc-title">Account setup complete</strong>
-          <ui-text size="sm" tone="muted" [text]="'Account ID: ' + accountId()" />
+          <strong class="sc-title">{{ labels.t('stripeStripeConnect.accountSetupComplete') }}</strong>
+          <ui-text size="sm" tone="muted" [text]="labels.t('stripeConnect.accountId', { id: accountId() ?? '' })" />
           <ui-stack direction="horizontal">
-            <ui-button variant="secondary" size="sm" data-testid="connect-dashboard-button" (click)="openDashboard()">View Stripe Dashboard<span class="sc-sr">, opens in a new tab</span></ui-button>
+            <ui-button variant="secondary" size="sm" data-testid="connect-dashboard-button" (click)="openDashboard()">{{ labels.t('stripeStripeConnect.viewStripeDashboard') }}<span class="sc-sr">{{ labels.t('stripeStripeConnect.opensInNewTabSr') }}</span></ui-button>
           </ui-stack>
         </ui-stack>
       } @else if (detailsSubmitted()) {
         <ui-stack gap="sm" class="sc-state" tabindex="-1" data-testid="connect-status-verifying" [attr.aria-busy]="loading() ? 'true' : null">
-          <strong class="sc-title">Stripe is verifying your account</strong>
-          <ui-text size="sm" text="Your setup has been submitted. Stripe is reviewing your information — this usually takes a few minutes. Payment collection will be enabled automatically once approved." />
+          <strong class="sc-title">{{ labels.t('stripeStripeConnect.stripeIsVerifyingYourAccount') }}</strong>
+          <ui-text size="sm" [text]="labels.t('stripeStripeConnect.yourSetupHasBeenSubmitted')" />
           <ui-stack direction="horizontal">
-            <ui-button variant="primary" size="sm" data-testid="connect-check-status-button" [disabled]="disabled()" (click)="check()">@if (loading()) {<span aria-hidden="true">Checking...</span><span class="sc-sr">Check Status, busy</span>} @else {Check Status}</ui-button>
+            <ui-button variant="primary" size="sm" data-testid="connect-check-status-button" [disabled]="disabled()" (click)="check()">@if (loading()) {<span aria-hidden="true">{{ labels.t('stripeStripeConnect.checking') }}</span><span class="sc-sr">{{ labels.t('stripeStripeConnect.checkStatusBusy') }}</span>} @else { {{ labels.t('stripeStripeConnect.checkStatus') }} }</ui-button>
           </ui-stack>
         </ui-stack>
       } @else {
         <ui-stack gap="sm" class="sc-state" tabindex="-1" data-testid="connect-status-incomplete" [attr.aria-busy]="loading() ? 'true' : null">
-          <span class="sc-badge"><ui-badge label="Account setup incomplete" variant="red" data-testid="connect-incomplete-badge" /></span>
-          <ui-text size="sm" text="Complete your Stripe account setup to start collecting payments from customers." />
+          <span class="sc-badge"><ui-badge [label]="labels.t('stripeStripeConnect.accountSetupIncomplete')" variant="red" data-testid="connect-incomplete-badge" /></span>
+          <ui-text size="sm" [text]="labels.t('stripeStripeConnect.completeYourStripeAccountSetup')" />
           <ui-stack direction="horizontal">
-            <ui-button variant="primary" size="sm" data-testid="connect-complete-setup-button" [disabled]="disabled()" (click)="resume()">@if (loading()) {<span aria-hidden="true">Loading...</span><span class="sc-sr">Complete Setup, opens in a new tab, busy</span>} @else {Complete Setup<span class="sc-sr">, opens in a new tab</span>}</ui-button>
+            <ui-button variant="primary" size="sm" data-testid="connect-complete-setup-button" [disabled]="disabled()" (click)="resume()">@if (loading()) {<span aria-hidden="true">{{ labels.t('common.loadingellipsis') }}</span><span class="sc-sr">{{ labels.t('stripeStripeConnect.completeSetupOpensInA') }}</span>} @else { {{ labels.t('stripeStripeConnect.completeSetup') }}<span class="sc-sr">{{ labels.t('stripeStripeConnect.opensInNewTabSr') }}</span>}</ui-button>
           </ui-stack>
         </ui-stack>
       }
@@ -3393,6 +3504,7 @@ var StripeConnectComponent = class StripeConnectComponent {
 						"editIcon",
 						"editAriaLabel",
 						"fill",
+						"noPadding",
 						"maxBodyHeight",
 						"selectable",
 						"selected",
@@ -3479,31 +3591,31 @@ i0.ɵɵngDeclareClassMetadata({
           <strong class="sc-title">{{ startTitle() }}</strong>
           <ui-text size="sm" [text]="startText()" />
           <ui-stack direction="horizontal">
-            <ui-button variant="primary" size="sm" data-testid="connect-start-button" [disabled]="disabled()" (click)="start()">@if (loading()) {<span aria-hidden="true">Loading...</span><span class="sc-sr">{{ startLabel() }}, opens in a new tab, busy</span>} @else { {{ startLabel() }}<span class="sc-sr">, opens in a new tab</span>}</ui-button>
+            <ui-button variant="primary" size="sm" data-testid="connect-start-button" [disabled]="disabled()" (click)="start()">@if (loading()) {<span aria-hidden="true">{{ labels.t('common.loadingellipsis') }}</span><span class="sc-sr">{{ labels.t('stripeStripeConnect.opensInNewTabBusy', { label: startLabel() }) }}</span>} @else { {{ startLabel() }}<span class="sc-sr">{{ labels.t('stripeStripeConnect.opensInNewTabSr') }}</span>}</ui-button>
           </ui-stack>
         </ui-stack>
       } @else if (complete()) {
         <ui-stack gap="sm" class="sc-state" tabindex="-1" data-testid="connect-status-complete">
-          <strong class="sc-title">Account setup complete</strong>
-          <ui-text size="sm" tone="muted" [text]="'Account ID: ' + accountId()" />
+          <strong class="sc-title">{{ labels.t('stripeStripeConnect.accountSetupComplete') }}</strong>
+          <ui-text size="sm" tone="muted" [text]="labels.t('stripeConnect.accountId', { id: accountId() ?? '' })" />
           <ui-stack direction="horizontal">
-            <ui-button variant="secondary" size="sm" data-testid="connect-dashboard-button" (click)="openDashboard()">View Stripe Dashboard<span class="sc-sr">, opens in a new tab</span></ui-button>
+            <ui-button variant="secondary" size="sm" data-testid="connect-dashboard-button" (click)="openDashboard()">{{ labels.t('stripeStripeConnect.viewStripeDashboard') }}<span class="sc-sr">{{ labels.t('stripeStripeConnect.opensInNewTabSr') }}</span></ui-button>
           </ui-stack>
         </ui-stack>
       } @else if (detailsSubmitted()) {
         <ui-stack gap="sm" class="sc-state" tabindex="-1" data-testid="connect-status-verifying" [attr.aria-busy]="loading() ? 'true' : null">
-          <strong class="sc-title">Stripe is verifying your account</strong>
-          <ui-text size="sm" text="Your setup has been submitted. Stripe is reviewing your information — this usually takes a few minutes. Payment collection will be enabled automatically once approved." />
+          <strong class="sc-title">{{ labels.t('stripeStripeConnect.stripeIsVerifyingYourAccount') }}</strong>
+          <ui-text size="sm" [text]="labels.t('stripeStripeConnect.yourSetupHasBeenSubmitted')" />
           <ui-stack direction="horizontal">
-            <ui-button variant="primary" size="sm" data-testid="connect-check-status-button" [disabled]="disabled()" (click)="check()">@if (loading()) {<span aria-hidden="true">Checking...</span><span class="sc-sr">Check Status, busy</span>} @else {Check Status}</ui-button>
+            <ui-button variant="primary" size="sm" data-testid="connect-check-status-button" [disabled]="disabled()" (click)="check()">@if (loading()) {<span aria-hidden="true">{{ labels.t('stripeStripeConnect.checking') }}</span><span class="sc-sr">{{ labels.t('stripeStripeConnect.checkStatusBusy') }}</span>} @else { {{ labels.t('stripeStripeConnect.checkStatus') }} }</ui-button>
           </ui-stack>
         </ui-stack>
       } @else {
         <ui-stack gap="sm" class="sc-state" tabindex="-1" data-testid="connect-status-incomplete" [attr.aria-busy]="loading() ? 'true' : null">
-          <span class="sc-badge"><ui-badge label="Account setup incomplete" variant="red" data-testid="connect-incomplete-badge" /></span>
-          <ui-text size="sm" text="Complete your Stripe account setup to start collecting payments from customers." />
+          <span class="sc-badge"><ui-badge [label]="labels.t('stripeStripeConnect.accountSetupIncomplete')" variant="red" data-testid="connect-incomplete-badge" /></span>
+          <ui-text size="sm" [text]="labels.t('stripeStripeConnect.completeYourStripeAccountSetup')" />
           <ui-stack direction="horizontal">
-            <ui-button variant="primary" size="sm" data-testid="connect-complete-setup-button" [disabled]="disabled()" (click)="resume()">@if (loading()) {<span aria-hidden="true">Loading...</span><span class="sc-sr">Complete Setup, opens in a new tab, busy</span>} @else {Complete Setup<span class="sc-sr">, opens in a new tab</span>}</ui-button>
+            <ui-button variant="primary" size="sm" data-testid="connect-complete-setup-button" [disabled]="disabled()" (click)="resume()">@if (loading()) {<span aria-hidden="true">{{ labels.t('common.loadingellipsis') }}</span><span class="sc-sr">{{ labels.t('stripeStripeConnect.completeSetupOpensInA') }}</span>} @else { {{ labels.t('stripeStripeConnect.completeSetup') }}<span class="sc-sr">{{ labels.t('stripeStripeConnect.opensInNewTabSr') }}</span>}</ui-button>
           </ui-stack>
         </ui-stack>
       }
@@ -3564,7 +3676,7 @@ i0.ɵɵngDeclareClassMetadata({
 			type: i0.Output,
 			args: ["detailsSubmittedChange"]
 		}],
-		title: [{
+		titleInput: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
@@ -3588,7 +3700,7 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
-		startTitle: [{
+		startTitleInput: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
@@ -3596,7 +3708,7 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
-		startText: [{
+		startTextInput: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
@@ -3604,7 +3716,7 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
-		startLabel: [{
+		startLabelInput: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
@@ -3668,15 +3780,26 @@ const STRIPE_PAYMENT_METHODS = [{
 	value: "ACH",
 	label: "ACH / Bank Transfer"
 }];
+const stripeMethodLabel = (value, english) => value === "CARD" ? uiText("stripePaymentMethod.methodCard") : value === "ACH" ? uiText("stripePaymentMethod.methodAch") : english;
 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."
+	get amountNeeded() {
+		return uiText("stripePaymentMethod.amountNeeded");
+	},
+	get notCompleted() {
+		return uiText("stripePaymentMethod.notCompleted");
+	},
+	get achTitle() {
+		return uiText("stripePaymentMethod.achTitle");
+	},
+	achMessage: (amount) => uiText("stripePaymentMethod.achMessage", { amount }),
+	get verificationTitle() {
+		return uiText("stripePaymentMethod.verificationTitle");
+	},
+	verificationMessage: (amount) => uiText("stripePaymentMethod.verificationMessage", { amount }),
+	get receiptNote() {
+		return uiText("stripePaymentMethod.receiptNote");
+	}
 };
 const WALLETS = {
 	applePay: "never",
@@ -3688,6 +3811,7 @@ const FIELDS = { billingDetails: { address: {
 } } };
 var PaymentStripeBodyComponent = class PaymentStripeBodyComponent {
 	constructor() {
+		this.labels = inject(UiLabelsService);
 		this.injector = inject(Injector);
 		this.host = inject(ElementRef);
 		this.ctx = input.required(...ngDevMode ? [{ debugName: "ctx" }] : /* istanbul ignore next */ []);
@@ -3731,17 +3855,17 @@ var PaymentStripeBodyComponent = class PaymentStripeBodyComponent {
 			const money = (n) => formatCurrency(n, { currency: this.ctx().currency });
 			const rows = [{
 				key: "amount",
-				label: "Payment amount",
+				label: this.labels.t("stripePaymentMethod.paymentAmount"),
 				value: money(amount)
 			}];
 			if (fees.stripeFee !== void 0) rows.push({
 				key: "processing",
-				label: `Processing fee${fees.stripeFeeLabel ? ` (${fees.stripeFeeLabel})` : ""}`,
+				label: `${this.labels.t("stripePaymentMethod.processingFee")}${fees.stripeFeeLabel ? ` (${fees.stripeFeeLabel})` : ""}`,
 				value: money(fees.stripeFee)
 			});
 			if (fees.platformFee !== void 0) rows.push({
 				key: "platform",
-				label: `Platform fee${fees.platformFeeLabel ? ` (${fees.platformFeeLabel})` : ""}`,
+				label: `${this.labels.t("stripePaymentMethod.platformFee")}${fees.platformFeeLabel ? ` (${fees.platformFeeLabel})` : ""}`,
 				value: money(fees.platformFee)
 			});
 			return rows;
@@ -3751,13 +3875,13 @@ var PaymentStripeBodyComponent = class PaymentStripeBodyComponent {
 			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"
+				subtitle: this.labels.t("stripePaymentMethod.amountPlusFees")
 			};
 		}, ...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.");
+			if (!create || ctx.amount == null) throw new Error(this.labels.t("stripePayment.msg.cardsUnavailable"));
 			this.cancelIntent(true);
 			const info = await callHost(() => create({
 				amount: ctx.amount,
@@ -3767,7 +3891,7 @@ var PaymentStripeBodyComponent = class PaymentStripeBodyComponent {
 				notes: ctx.note || null,
 				...ctx.allocation
 			}));
-			if (!info?.clientSecret) throw new Error("Failed to initialize payment. Please try again.");
+			if (!info?.clientSecret) throw new Error(this.labels.t("stripePayment.msg.initFailed"));
 			this.intent = info;
 			this.intentFees.set({
 				stripeFee: info.stripeFee,
@@ -3790,7 +3914,7 @@ var PaymentStripeBodyComponent = class PaymentStripeBodyComponent {
 			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";
+			const label = notice ? this.labels.t("common.done") : ctx.amount != null ? `${this.labels.t("stripePayment.pay")} ${formatCurrency(this.total(), { currency: ctx.currency })}` : this.labels.t("stripePayment.pay");
 			untracked(() => ctx.setPrimary({
 				label,
 				loading: processing && !notice,
@@ -3815,7 +3939,7 @@ var PaymentStripeBodyComponent = class PaymentStripeBodyComponent {
 			}
 			untracked(() => this.estimating.set(true));
 			let hung = null;
-			const failure = "Could not calculate the fees. Please try again.";
+			const failure = this.labels.t("stripePayment.msg.feesFailed");
 			const timer = setTimeout(async () => {
 				hung = setTimeout(() => {
 					if (run !== this.estimateRun) return;
@@ -3884,7 +4008,7 @@ var PaymentStripeBodyComponent = class PaymentStripeBodyComponent {
 	}
 	onReady() {
 		this.complete.set(false);
-		this.ctx().announce("Payment form ready");
+		this.ctx().announce(this.labels.t("stripePaymentMethod.announceReady"));
 	}
 	onFailed(failure) {
 		this.error.set(failure.message);
@@ -3899,7 +4023,7 @@ var PaymentStripeBodyComponent = class PaymentStripeBodyComponent {
 		this.error.set("");
 		this.processing.set(true);
 		ctx.setBusy(true);
-		ctx.announce("Processing payment");
+		ctx.announce(this.labels.t("stripePaymentMethod.announceProcessing"));
 		let finished = false;
 		try {
 			const event = await payment.confirm();
@@ -4022,20 +4146,20 @@ var PaymentStripeBodyComponent = class PaymentStripeBodyComponent {
         @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-button variant="secondary" size="sm" data-testid="stripe-method-estimate-retry" (click)="retryEstimate()">{{ labels.t('common.tryAgain') }}</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"
+            [wallets]="wallets" [fields]="fields" [defaultValues]="defaultValues()" [appearance]="$any(config().appearance())" [appearanceFromTokens]="true" [label]="labels.t('stripePaymentStripeMethod.paymentDetails')"
             (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" />
+            <ui-kpi-card class="psm-total" data-testid="stripe-method-total" [label]="labels.t('stripePaymentStripeMethod.totalCharged')" [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">
+            <dl class="psm-fees" data-testid="stripe-method-fees" [attr.aria-label]="labels.t('stripePaymentStripeMethod.paymentTotal')">
               @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>
               }
@@ -4227,20 +4351,20 @@ i0.ɵɵngDeclareClassMetadata({
         @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-button variant="secondary" size="sm" data-testid="stripe-method-estimate-retry" (click)="retryEstimate()">{{ labels.t('common.tryAgain') }}</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"
+            [wallets]="wallets" [fields]="fields" [defaultValues]="defaultValues()" [appearance]="$any(config().appearance())" [appearanceFromTokens]="true" [label]="labels.t('stripePaymentStripeMethod.paymentDetails')"
             (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" />
+            <ui-kpi-card class="psm-total" data-testid="stripe-method-total" [label]="labels.t('stripePaymentStripeMethod.totalCharged')" [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">
+            <dl class="psm-fees" data-testid="stripe-method-fees" [attr.aria-label]="labels.t('stripePaymentStripeMethod.paymentTotal')">
               @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>
               }
@@ -4290,10 +4414,21 @@ var StripePaymentMethodComponent = class StripePaymentMethodComponent extends Pa
 		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.methodListInput = input(null, {
+			...ngDevMode ? { debugName: "methodListInput" } : /* istanbul ignore next */ {},
+			alias: "methodList"
+		});
+		this.methodList = computed(() => this.methodListInput() ?? STRIPE_PAYMENT_METHODS.map((m) => ({
+			...m,
+			label: stripeMethodLabel(m.value, m.label)
+		})), ...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.receiptNoteInput = input(null, {
+			...ngDevMode ? { debugName: "receiptNoteInput" } : /* istanbul ignore next */ {},
+			alias: "receiptNote"
+		});
+		this.receiptNote = computed(() => this.receiptNoteInput() ?? 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;
@@ -4372,8 +4507,8 @@ var StripePaymentMethodComponent = class StripePaymentMethodComponent extends Pa
 					isRequired: false,
 					transformFunction: null
 				},
-				methodList: {
-					classPropertyName: "methodList",
+				methodListInput: {
+					classPropertyName: "methodListInput",
 					publicName: "methodList",
 					isSignal: true,
 					isRequired: false,
@@ -4393,8 +4528,8 @@ var StripePaymentMethodComponent = class StripePaymentMethodComponent extends Pa
 					isRequired: false,
 					transformFunction: null
 				},
-				receiptNote: {
-					classPropertyName: "receiptNote",
+				receiptNoteInput: {
+					classPropertyName: "receiptNoteInput",
 					publicName: "receiptNote",
 					isSignal: true,
 					isRequired: false,
@@ -4512,7 +4647,7 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
-		methodList: [{
+		methodListInput: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
@@ -4536,7 +4671,7 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
-		receiptNote: [{
+		receiptNoteInput: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,