@funnelsgrove/payments 0.20.0 → 0.21.1

package/README.md

@@ -47,6 +47,25 @@ mounts one official Solidgate form per attempt, destroys the remote form on repl
 and never treats iframe `success` as funnel completion. Its `onSuccess` callback runs only after the
 provider-neutral status endpoint finds canonical shared-ledger payment evidence.
 
+## Localized funnel copy
+
+Funnel content files own translated strings. Pass a complete `SharedStripeCheckoutV2Copy`
+as the dialog's `copy` prop to translate its method tabs, country label and payment
+status/fallback messages. Existing callers keep the English defaults. Stripe-owned
+fields and provider errors use the `stripeLocale` option on both checkout-session
+hooks; wallet surfaces accept it through their `checkout` input. Stripe clients are
+cached by publishable key and locale so changing language cannot reuse another
+language's client. Locale does not change a plan, currency or billing interval.
+
+`ManageSubscriptionContent` exported by this package extends the runtime content
+with optional `labels: ManageSubscriptionLabels`. A localized funnel should make
+`labels` required in its own content type and provide the complete English and
+translated objects. The labels own section/status text, date locale and interval
+templates (`{count}`), while subscription data and cancellation behavior remain
+unchanged. Set `errorMessagePolicy: 'content'` to render load/cancel failures from
+the content's `errorMessages`. The default `'server'` policy preserves existing
+error rendering independently of the selected labels.
+
 ## Advanced Wallet Primitives
 
 `ApplePaySubscriptionCheckoutSlot`, `GooglePaySubscriptionCheckoutSlot`, and `WalletSubscriptionCheckoutSlot` stay exported and runtime-compatible. They are backward-compatible advanced low-level primitives: reach for them only when a placement needs wiring the shared wallet surfaces do not cover. Never share one checkout hook result across placements; give each visible placement its own session.

package/dist/components/ManageSubscriptionScreen.d.ts

@@ -1,6 +1,31 @@
-import { type ManageSubscriptionContent, type ManageSubscriptionsResponse } from '@funnelsgrove/runtime';
+import { type ManageSubscriptionContent as RuntimeManageSubscriptionContent, type ManageSubscriptionsResponse } from '@funnelsgrove/runtime';
 import type { BillingFallbackPlanConfig, BillingPlanCatalog } from '../config/billing.config.js';
-export type { ManageSubscriptionContent } from '@funnelsgrove/runtime';
+export type ManageSubscriptionLabels = {
+    locale: string;
+    unavailableDate: string;
+    activeTitle: string;
+    cancelledTitle: string;
+    pastTitle: string;
+    pastNote: string;
+    cancelledNote: string;
+    subscriptionNumber: string;
+    subscriptionFallback: string;
+    activeUntil: string;
+    endedOn: string;
+    historicalEnd: string;
+    nextCharge: string;
+    createdAt: string;
+    cancelledStatus: string;
+    unknownStatus: string;
+    statuses: Readonly<Record<string, string>>;
+    intervals: Readonly<Record<string, string>>;
+};
+export type ManageSubscriptionContent = RuntimeManageSubscriptionContent & {
+    /** Complete localized presentation; omitted by existing English funnels. */
+    labels?: ManageSubscriptionLabels;
+    /** Use authored errorMessages instead of raw server exception text. */
+    errorMessagePolicy?: 'content' | 'server';
+};
 export type ManageSubscriptionScreenProps = {
     stepId: string;
     content: ManageSubscriptionContent;
@@ -24,6 +49,7 @@ export declare const __manageSubscriptionScreenTestables: {
     resolveBillingDateLabel: (subscription: Pick<ManageSubscription, "cancelAtPeriodEnd" | "currentPeriodEnd" | "status">, options?: {
         cancelled?: boolean;
         past?: boolean;
-    }) => string;
-    resolveSubscriptionStatusLabel: (subscription: ManageSubscription) => string;
+    }, labels?: ManageSubscriptionLabels) => string;
+    resolveSubscriptionStatusLabel: (subscription: ManageSubscription, labels?: ManageSubscriptionLabels) => string;
 };
+export {};

package/dist/components/ManageSubscriptionScreen.js

@@ -13,15 +13,16 @@ const isCancelledActiveSubscription = (subscription) => {
 const isCancellableSubscription = (subscription) => {
     return getNormalizedStatus(subscription) !== 'canceled' && !subscription.cancelAtPeriodEnd;
 };
-const formatDate = (value) => {
+const formatDate = (value, labels) => {
+    var _a, _b, _c;
     if (!value) {
-        return 'n/a';
+        return (_a = labels === null || labels === void 0 ? void 0 : labels.unavailableDate) !== null && _a !== void 0 ? _a : 'n/a';
     }
     const timestamp = Date.parse(value);
     if (!Number.isFinite(timestamp)) {
-        return 'n/a';
+        return (_b = labels === null || labels === void 0 ? void 0 : labels.unavailableDate) !== null && _b !== void 0 ? _b : 'n/a';
     }
-    return new Intl.DateTimeFormat('en-US', {
+    return new Intl.DateTimeFormat((_c = labels === null || labels === void 0 ? void 0 : labels.locale) !== null && _c !== void 0 ? _c : 'en-US', {
         month: 'numeric',
         day: 'numeric',
         year: 'numeric',
@@ -32,9 +33,12 @@ const formatSubscriptionNumber = (subscription) => {
     const normalized = source.replace(/[^a-zA-Z0-9]/g, '');
     return normalized.slice(-7) || source.slice(-7) || subscription.id;
 };
-const formatInterval = (interval, count) => {
+const formatInterval = (interval, count, labels) => {
     const normalizedCount = count && Number.isFinite(count) && count > 0 ? count : 1;
     const normalizedInterval = (interval === null || interval === void 0 ? void 0 : interval.trim()) || 'month';
+    const translated = labels === null || labels === void 0 ? void 0 : labels.intervals[normalizedInterval];
+    if (translated)
+        return translated.replace('{count}', String(normalizedCount));
     const pluralSuffix = normalizedCount === 1 ? '' : 's';
     return `${normalizedCount} ${normalizedInterval}${pluralSuffix}`;
 };
@@ -42,46 +46,54 @@ const formatMoney = (amountCents, currency) => {
     const normalizedCurrency = (currency === null || currency === void 0 ? void 0 : currency.trim().toLowerCase()) || 'usd';
     return `${(amountCents / 100).toFixed(2)} ${normalizedCurrency}`;
 };
-const resolvePlanLine = (subscription, plans) => {
+const resolvePlanLine = (subscription, plans, labels) => {
     const plan = plans.find((item) => item.providerPlanId === subscription.providerPlanId);
     if (plan) {
-        return `${formatMoney(plan.amountCents, 'usd')} / ${formatInterval(plan.billingInterval, 1)}`;
+        return `${formatMoney(plan.amountCents, 'usd')} / ${formatInterval(plan.billingInterval, 1, labels)}`;
     }
     if (typeof subscription.amountCents === 'number' && subscription.amountCents > 0) {
-        return `${formatMoney(subscription.amountCents, subscription.currency)} / ${formatInterval(subscription.billingInterval, subscription.billingIntervalCount)}`;
+        return `${formatMoney(subscription.amountCents, subscription.currency)} / ${formatInterval(subscription.billingInterval, subscription.billingIntervalCount, labels)}`;
     }
-    return `${subscription.environment.toUpperCase()} subscription`;
+    return labels
+        ? labels.subscriptionFallback.replace('{environment}', subscription.environment.toUpperCase())
+        : `${subscription.environment.toUpperCase()} subscription`;
 };
-const resolveCreatedDate = (subscription) => {
-    return formatDate(subscription.createdAt || subscription.currentPeriodStart);
+const resolveCreatedDate = (subscription, labels) => {
+    return formatDate(subscription.createdAt || subscription.currentPeriodStart, labels);
 };
-const resolveBillingDateLabel = (subscription, options = {}) => {
+const resolveBillingDateLabel = (subscription, options = {}, labels) => {
+    var _a, _b, _c, _d;
     const normalizedStatus = getNormalizedStatus(subscription);
     if (options.cancelled || subscription.cancelAtPeriodEnd) {
-        return `Active until: ${formatDate(subscription.currentPeriodEnd)}`;
+        return `${(_a = labels === null || labels === void 0 ? void 0 : labels.activeUntil) !== null && _a !== void 0 ? _a : 'Active until:'} ${formatDate(subscription.currentPeriodEnd, labels)}`;
     }
     if (options.past && normalizedStatus === 'canceled') {
-        return `Ended on: ${formatDate(subscription.currentPeriodEnd)}`;
+        return `${(_b = labels === null || labels === void 0 ? void 0 : labels.endedOn) !== null && _b !== void 0 ? _b : 'Ended on:'} ${formatDate(subscription.currentPeriodEnd, labels)}`;
     }
     if (options.past) {
-        return `Historical period ended: ${formatDate(subscription.currentPeriodEnd)}`;
+        return `${(_c = labels === null || labels === void 0 ? void 0 : labels.historicalEnd) !== null && _c !== void 0 ? _c : 'Historical period ended:'} ${formatDate(subscription.currentPeriodEnd, labels)}`;
     }
-    return `Next charge: ${formatDate(subscription.currentPeriodEnd)}`;
+    return `${(_d = labels === null || labels === void 0 ? void 0 : labels.nextCharge) !== null && _d !== void 0 ? _d : 'Next charge:'} ${formatDate(subscription.currentPeriodEnd, labels)}`;
 };
 const toManageSubscriptions = (subscriptions) => subscriptions;
-const resolveSubscriptionStatusLabel = (subscription) => {
+const resolveSubscriptionStatusLabel = (subscription, labels) => {
+    var _a, _b, _c;
     if (isCancelledActiveSubscription(subscription)) {
-        return 'Cancelled';
+        return (_a = labels === null || labels === void 0 ? void 0 : labels.cancelledStatus) !== null && _a !== void 0 ? _a : 'Cancelled';
     }
     const normalizedStatus = getNormalizedStatus(subscription);
     if (!normalizedStatus) {
-        return 'Active';
+        return labels ? (_b = labels.statuses.active) !== null && _b !== void 0 ? _b : labels.unknownStatus : 'Active';
     }
+    if (labels)
+        return (_c = labels.statuses[normalizedStatus]) !== null && _c !== void 0 ? _c : labels.unknownStatus;
     return `${normalizedStatus.charAt(0).toUpperCase()}${normalizedStatus.slice(1)}`;
 };
 export function ManageSubscriptionScreen({ stepId, content, homeStepId, nodeId, plans, }) {
-    var _a, _b;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const { attributes, goToStep, setAnswer, setUser, user } = useFunnel();
+    const labels = content.labels;
+    const useContentErrors = content.errorMessagePolicy === 'content';
     const { config: publishedRuntimeConfig } = useFunnelRuntimeConfig();
     const paymentsApiVersion = publishedRuntimeConfig === null || publishedRuntimeConfig === void 0 ? void 0 : publishedRuntimeConfig.paymentsApiVersion;
     const supportEmail = runtimePublicConfig.supportEmail;
@@ -115,7 +127,7 @@ export function ManageSubscriptionScreen({ stepId, content, homeStepId, nodeId,
             }
             catch (nextError) {
                 if (active) {
-                    setError(nextError instanceof Error ? nextError.message : content.errorMessages.load);
+                    setError(!useContentErrors && nextError instanceof Error ? nextError.message : content.errorMessages.load);
                 }
             }
             finally {
@@ -128,7 +140,7 @@ export function ManageSubscriptionScreen({ stepId, content, homeStepId, nodeId,
         return () => {
             active = false;
         };
-    }, [content.errorMessages.load, paymentsApiVersion]);
+    }, [content.errorMessages.load, useContentErrors, paymentsApiVersion]);
     const subscriptions = useMemo(() => { var _a; return toManageSubscriptions((_a = data === null || data === void 0 ? void 0 : data.subscriptions) !== null && _a !== void 0 ? _a : []); }, [data]);
     const activeSubscriptions = useMemo(() => subscriptions.filter(isCancellableSubscription), [subscriptions]);
     const cancelledSubscriptions = useMemo(() => subscriptions.filter(isCancelledActiveSubscription), [subscriptions]);
@@ -188,7 +200,7 @@ export function ManageSubscriptionScreen({ stepId, content, homeStepId, nodeId,
             });
             setData(payload);
             const refreshedSubscription = toManageSubscriptions(payload.subscriptions).find((subscription) => subscription.id === selectedSubscription.id);
-            setCancelledActiveUntilDate(formatDate((refreshedSubscription === null || refreshedSubscription === void 0 ? void 0 : refreshedSubscription.currentPeriodEnd) || selectedSubscription.currentPeriodEnd));
+            setCancelledActiveUntilDate(formatDate((refreshedSubscription === null || refreshedSubscription === void 0 ? void 0 : refreshedSubscription.currentPeriodEnd) || selectedSubscription.currentPeriodEnd, labels));
             await persistCancellationAnswers({
                 cancelled: true,
                 reasonId: selectedReason.id,
@@ -198,17 +210,17 @@ export function ManageSubscriptionScreen({ stepId, content, homeStepId, nodeId,
             setStage('done');
         }
         catch (nextError) {
-            setError(nextError instanceof Error ? nextError.message : content.errorMessages.cancel);
+            setError(!useContentErrors && nextError instanceof Error ? nextError.message : content.errorMessages.cancel);
         }
         finally {
             setCancelInFlight(false);
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("section", { className: 'manage-subscription', "data-node-id": nodeId || stepId, children: [stage === 'subscriptions' ? (_jsxs("div", { className: 'manage-subscription-inner', children: [_jsx("h1", { className: 'manage-subscription-title', children: content.subscriptionsStage.title }), loading ? (_jsx("p", { className: 'manage-subscription-muted', children: content.subscriptionsStage.loadingLabel })) : null, error ? _jsx("p", { className: 'manage-subscription-error', children: error }) : null, !loading && !error && subscriptions.length === 0 ? (_jsx("p", { className: 'manage-subscription-empty', children: content.subscriptionsStage.emptyLabel })) : null, !loading && activeSubscriptions.length > 0 ? (_jsx(SubscriptionSection, { title: 'Active Subscriptions', subscriptions: activeSubscriptions, plans: planList, onSelect: handleSubscriptionSelected })) : null, !loading && cancelledSubscriptions.length > 0 ? (_jsx(SubscriptionSection, { title: 'Cancelled Subscriptions', subscriptions: cancelledSubscriptions, plans: planList, onSelect: handleSubscriptionSelected, description: cancelledSubscriptionsNote, cancelled: true })) : null, !loading && pastSubscriptions.length > 0 ? (_jsx(SubscriptionSection, { title: 'Past Subscriptions', subscriptions: pastSubscriptions, plans: planList, onSelect: handleSubscriptionSelected, description: pastSubscriptionsNote, past: true })) : null, _jsxs("p", { className: 'manage-subscription-support', children: [content.subscriptionsStage.supportPrefix, ' ', _jsx("a", { href: `mailto:${supportEmail}`, children: supportEmail })] })] })) : null, stage === 'why' ? (_jsxs("div", { className: 'manage-subscription-inner', children: [_jsx("h1", { className: 'manage-subscription-title is-reason', children: content.whyStage.title }), _jsx("ul", { className: 'manage-subscription-reasons', role: 'list', "aria-label": content.whyStage.reasonsAriaLabel, children: content.whyStage.reasons.map((reason) => (_jsx("li", { children: _jsxs("button", { type: 'button', className: 'manage-subscription-reason', onClick: () => handleReasonSelected(reason.id), children: [_jsx("span", { className: 'manage-subscription-reason-icon', "aria-hidden": true, children: reason.icon }), _jsx("span", { children: reason.label }), _jsx("span", { className: 'manage-subscription-reason-arrow', "aria-hidden": true, children: ">" })] }) }, reason.id))) })] })) : null, stage === 'confirm' ? (_jsxs("div", { className: 'manage-subscription-inner is-short', children: [_jsx("h1", { className: 'manage-subscription-title', children: content.confirmStage.title }), error ? _jsx("p", { className: 'manage-subscription-error', children: error }) : null, _jsx("button", { type: 'button', className: 'manage-subscription-primary', disabled: !selectedSubscription || !selectedReason || cancelInFlight, onClick: () => {
+    return (_jsxs(_Fragment, { children: [_jsxs("section", { className: 'manage-subscription', "data-node-id": nodeId || stepId, children: [stage === 'subscriptions' ? (_jsxs("div", { className: 'manage-subscription-inner', children: [_jsx("h1", { className: 'manage-subscription-title', children: content.subscriptionsStage.title }), loading ? (_jsx("p", { className: 'manage-subscription-muted', children: content.subscriptionsStage.loadingLabel })) : null, error ? _jsx("p", { className: 'manage-subscription-error', children: error }) : null, !loading && !error && subscriptions.length === 0 ? (_jsx("p", { className: 'manage-subscription-empty', children: content.subscriptionsStage.emptyLabel })) : null, !loading && activeSubscriptions.length > 0 ? (_jsx(SubscriptionSection, { title: (_c = labels === null || labels === void 0 ? void 0 : labels.activeTitle) !== null && _c !== void 0 ? _c : 'Active Subscriptions', subscriptions: activeSubscriptions, plans: planList, labels: labels, onSelect: handleSubscriptionSelected })) : null, !loading && cancelledSubscriptions.length > 0 ? (_jsx(SubscriptionSection, { title: (_d = labels === null || labels === void 0 ? void 0 : labels.cancelledTitle) !== null && _d !== void 0 ? _d : 'Cancelled Subscriptions', subscriptions: cancelledSubscriptions, plans: planList, labels: labels, onSelect: handleSubscriptionSelected, description: (_e = labels === null || labels === void 0 ? void 0 : labels.cancelledNote) !== null && _e !== void 0 ? _e : cancelledSubscriptionsNote, cancelled: true })) : null, !loading && pastSubscriptions.length > 0 ? (_jsx(SubscriptionSection, { title: (_f = labels === null || labels === void 0 ? void 0 : labels.pastTitle) !== null && _f !== void 0 ? _f : 'Past Subscriptions', subscriptions: pastSubscriptions, plans: planList, labels: labels, onSelect: handleSubscriptionSelected, description: (_g = labels === null || labels === void 0 ? void 0 : labels.pastNote) !== null && _g !== void 0 ? _g : pastSubscriptionsNote, past: true })) : null, _jsxs("p", { className: 'manage-subscription-support', children: [content.subscriptionsStage.supportPrefix, ' ', _jsx("a", { href: `mailto:${supportEmail}`, children: supportEmail })] })] })) : null, stage === 'why' ? (_jsxs("div", { className: 'manage-subscription-inner', children: [_jsx("h1", { className: 'manage-subscription-title is-reason', children: content.whyStage.title }), _jsx("ul", { className: 'manage-subscription-reasons', role: 'list', "aria-label": content.whyStage.reasonsAriaLabel, children: content.whyStage.reasons.map((reason) => (_jsx("li", { children: _jsxs("button", { type: 'button', className: 'manage-subscription-reason', onClick: () => handleReasonSelected(reason.id), children: [_jsx("span", { className: 'manage-subscription-reason-icon', "aria-hidden": true, children: reason.icon }), _jsx("span", { children: reason.label }), _jsx("span", { className: 'manage-subscription-reason-arrow', "aria-hidden": true, children: ">" })] }) }, reason.id))) })] })) : null, stage === 'confirm' ? (_jsxs("div", { className: 'manage-subscription-inner is-short', children: [_jsx("h1", { className: 'manage-subscription-title', children: content.confirmStage.title }), error ? _jsx("p", { className: 'manage-subscription-error', children: error }) : null, _jsx("button", { type: 'button', className: 'manage-subscription-primary', disabled: !selectedSubscription || !selectedReason || cancelInFlight, onClick: () => {
                                     void handleCancelSubscription();
                                 }, children: cancelInFlight
                                     ? content.confirmStage.cancellingLabel
-                                    : content.confirmStage.cancelLabel })] })) : null, stage === 'done' ? (_jsxs("div", { className: 'manage-subscription-inner is-short', children: [_jsx("h1", { className: 'manage-subscription-title', children: content.doneStage.title }), _jsx("p", { className: 'manage-subscription-done-status', children: "Cancelled" }), _jsx("p", { className: 'manage-subscription-done-copy', children: content.doneStage.cancelledMessage }), cancelledActiveUntilDate ? (_jsxs("p", { className: 'manage-subscription-done-copy is-active-until', children: ["Active until: ", cancelledActiveUntilDate] })) : null, _jsx("button", { type: 'button', className: 'manage-subscription-primary', onClick: () => {
+                                    : content.confirmStage.cancelLabel })] })) : null, stage === 'done' ? (_jsxs("div", { className: 'manage-subscription-inner is-short', children: [_jsx("h1", { className: 'manage-subscription-title', children: content.doneStage.title }), _jsx("p", { className: 'manage-subscription-done-status', children: (_h = labels === null || labels === void 0 ? void 0 : labels.cancelledStatus) !== null && _h !== void 0 ? _h : 'Cancelled' }), _jsx("p", { className: 'manage-subscription-done-copy', children: content.doneStage.cancelledMessage }), cancelledActiveUntilDate ? (_jsxs("p", { className: 'manage-subscription-done-copy is-active-until', children: [(_j = labels === null || labels === void 0 ? void 0 : labels.activeUntil) !== null && _j !== void 0 ? _j : 'Active until:', " ", cancelledActiveUntilDate] })) : null, _jsx("button", { type: 'button', className: 'manage-subscription-primary', onClick: () => {
                                     if (homeStepId) {
                                         goToStep(homeStepId, { type: 'exit', reason: 'cancel' });
                                         return;
@@ -216,16 +228,19 @@ export function ManageSubscriptionScreen({ stepId, content, homeStepId, nodeId,
                                     setStage('subscriptions');
                                 }, children: content.doneStage.returnHomeLabel })] })) : null] }), _jsx("style", { children: manageSubscriptionStyles })] }));
 }
-function SubscriptionSection({ title, subscriptions, plans, onSelect, description, cancelled = false, past = false, }) {
+function SubscriptionSection({ title, subscriptions, plans, onSelect, description, labels, cancelled = false, past = false, }) {
     const isDisabled = cancelled || past;
     const rowClassName = cancelled
         ? 'manage-subscription-row is-cancelled'
         : past
             ? 'manage-subscription-row is-past'
             : 'manage-subscription-row';
-    return (_jsxs("section", { className: 'manage-subscription-section', "aria-label": title, children: [_jsx("h2", { children: title }), description ? _jsx("p", { className: 'manage-subscription-section-note', children: description }) : null, _jsx("ul", { className: 'manage-subscription-list', role: 'list', children: subscriptions.map((subscription) => (_jsx("li", { children: _jsxs("button", { type: 'button', className: rowClassName, disabled: isDisabled, onClick: () => onSelect(subscription), children: [_jsx("span", { className: 'manage-subscription-radio', "aria-hidden": true }), _jsxs("span", { className: 'manage-subscription-row-heading', children: [_jsxs("span", { className: 'manage-subscription-row-title', children: ["Subscription #", formatSubscriptionNumber(subscription)] }), _jsx("span", { className: 'manage-subscription-row-status', children: resolveSubscriptionStatusLabel(subscription) })] }), _jsx("span", { className: 'manage-subscription-row-plan', children: resolvePlanLine(subscription, plans) }), _jsxs("span", { className: 'manage-subscription-row-meta', children: [_jsx("span", { className: cancelled ? 'is-active-until' : undefined, children: cancelled
-                                            ? resolveBillingDateLabel(subscription, { cancelled })
-                                            : resolveBillingDateLabel(subscription, { past }) }), _jsxs("span", { children: ["Created at: ", resolveCreatedDate(subscription)] })] })] }) }, subscription.id))) })] }));
+    return (_jsxs("section", { className: 'manage-subscription-section', "aria-label": title, children: [_jsx("h2", { children: title }), description ? _jsx("p", { className: 'manage-subscription-section-note', children: description }) : null, _jsx("ul", { className: 'manage-subscription-list', role: 'list', children: subscriptions.map((subscription) => {
+                    var _a, _b;
+                    return (_jsx("li", { children: _jsxs("button", { type: 'button', className: rowClassName, disabled: isDisabled, onClick: () => onSelect(subscription), children: [_jsx("span", { className: 'manage-subscription-radio', "aria-hidden": true }), _jsxs("span", { className: 'manage-subscription-row-heading', children: [_jsx("span", { className: 'manage-subscription-row-title', children: ((_a = labels === null || labels === void 0 ? void 0 : labels.subscriptionNumber) !== null && _a !== void 0 ? _a : 'Subscription #{number}').replace('{number}', formatSubscriptionNumber(subscription)) }), _jsx("span", { className: 'manage-subscription-row-status', children: resolveSubscriptionStatusLabel(subscription, labels) })] }), _jsx("span", { className: 'manage-subscription-row-plan', children: resolvePlanLine(subscription, plans, labels) }), _jsxs("span", { className: 'manage-subscription-row-meta', children: [_jsx("span", { className: cancelled ? 'is-active-until' : undefined, children: cancelled
+                                                ? resolveBillingDateLabel(subscription, { cancelled }, labels)
+                                                : resolveBillingDateLabel(subscription, { past }, labels) }), _jsxs("span", { children: [(_b = labels === null || labels === void 0 ? void 0 : labels.createdAt) !== null && _b !== void 0 ? _b : 'Created at:', " ", resolveCreatedDate(subscription, labels)] })] })] }) }, subscription.id));
+                }) })] }));
 }
 export const __manageSubscriptionScreenTestables = {
     resolveBillingDateLabel,

package/dist/index.d.ts

@@ -11,6 +11,6 @@ export * from './services/checkoutObservability.service.js';
 export * from './providers/paymentProvider.types.js';
 export * from './providers/stripe/index.js';
 export * from './providers/solidgate/index.js';
-export { ManageSubscriptionScreen, type ManageSubscriptionContent, type ManageSubscriptionScreenProps, } from './components/ManageSubscriptionScreen.js';
+export { ManageSubscriptionScreen, type ManageSubscriptionContent, type ManageSubscriptionScreenProps, type ManageSubscriptionLabels, } from './components/ManageSubscriptionScreen.js';
 export { isCheckoutEmailError, isValidCheckoutEmail } from './services/checkoutEmail.js';
 export * from './components/CheckoutEmailDialog.js';

package/dist/providers/stripe/components/SharedStripeCheckoutV2Dialog.d.ts

@@ -1,11 +1,14 @@
 import { type CSSProperties } from 'react';
 import type { Stripe } from '@stripe/stripe-js';
 import { type StripeSubscriptionCheckoutAnalyticsContext } from '../services/checkoutCompletionAnalytics.service.js';
+import type { SharedStripeCheckoutV2Copy } from './checkout-v2.content.js';
+export type { SharedStripeCheckoutV2Copy } from './checkout-v2.content.js';
 export type SharedCheckoutV2CssVars = CSSProperties & {
     '--shared-checkout-v2-theme-color': string;
     '--shared-checkout-v2-button-color': string;
 };
 export type SharedStripeCheckoutV2DialogProps = {
+    copy?: SharedStripeCheckoutV2Copy;
     amountCents: number;
     buttonColor: string;
     cardSubmitLabel: string;

package/dist/providers/stripe/components/SharedStripeCheckoutV2Form.internal.d.ts

@@ -3,5 +3,5 @@ export declare const getFixedSupportedBillingCountry: (supportedCountries: reado
 type SharedStripeCheckoutV2FormProps = Omit<SharedStripeCheckoutV2DialogProps, 'stripePromise' | 'onClose'> & {
     onClose: () => void;
 };
-export declare function SharedStripeCheckoutV2CheckoutSessionForm({ amountCents, buttonColor, cardSubmitLabel, closeAriaLabel, countdownLabel, checkoutAnalytics, checkoutSessionId, customerEmail, customerEmailEditable: allowEmailEditing, customerEmailLabel, customerEmailPlaceholder, customerEmailInvalidMessage, customerName, discountAmountLabel, discountLabel, discountPercent, initialWalletAvailable, onClose, onCustomerEmailChange, onCustomerEmailCommit, onError, onInactiveCheckoutSession, onPaymentInfoSubmitted, onSuccess, paymentMethodLabels, promoActive, processingLabel, promoCode, promoCodeLabel, remainingSeconds, returnUrl, savedLabel, secureLabel, satisfactionLabel, satisfactionPercent, summaryLabel, supportedCountries, themeColor, title, totalLabel, totalValue, unsupportedCountryMessage, walletButtonLabel, originalPriceLabel, originalPriceValue, variant, }: SharedStripeCheckoutV2FormProps): import("react/jsx-runtime").JSX.Element;
+export declare function SharedStripeCheckoutV2CheckoutSessionForm({ copy, amountCents, buttonColor, cardSubmitLabel, closeAriaLabel, countdownLabel, checkoutAnalytics, checkoutSessionId, customerEmail, customerEmailEditable: allowEmailEditing, customerEmailLabel, customerEmailPlaceholder, customerEmailInvalidMessage, customerName, discountAmountLabel, discountLabel, discountPercent, initialWalletAvailable, onClose, onCustomerEmailChange, onCustomerEmailCommit, onError, onInactiveCheckoutSession, onPaymentInfoSubmitted, onSuccess, paymentMethodLabels, promoActive, processingLabel, promoCode, promoCodeLabel, remainingSeconds, returnUrl, savedLabel, secureLabel, satisfactionLabel, satisfactionPercent, summaryLabel, supportedCountries, themeColor, title, totalLabel, totalValue, unsupportedCountryMessage, walletButtonLabel, originalPriceLabel, originalPriceValue, variant, }: SharedStripeCheckoutV2FormProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/providers/stripe/components/SharedStripeCheckoutV2Form.internal.js

@@ -13,18 +13,16 @@ import { trackPaidStripeSubscriptionCheckoutCompleted, trackStripeSubscriptionPa
 import { trackCheckoutFailureShown } from '../../../services/checkoutObservability.service.js';
 import { SharedStripeCheckoutV2Summary } from './SharedStripeCheckoutV2Summary.internal.js';
 import { useCheckoutEmail } from './useCheckoutEmail.internal.js';
+import { defaultCheckoutV2Copy } from './checkout-v2.content.js';
 const defaultPaymentMethodLabels = ['Visa', 'Mastercard', 'Maestro', 'Discover'];
 export const getFixedSupportedBillingCountry = (supportedCountries) => supportedCountries.length === 1 ? supportedCountries[0] : null;
-const checkoutCountryLabels = {
-    US: 'United States',
-};
-const getCheckoutCountryLabel = (countryCode) => { var _a; return (_a = checkoutCountryLabels[countryCode]) !== null && _a !== void 0 ? _a : countryCode; };
-function getFriendlyCardErrorMessage(error) {
+const getCheckoutCountryLabel = (countryCode, copy) => { var _a; return (_a = copy.countryNames[countryCode]) !== null && _a !== void 0 ? _a : countryCode; };
+function getFriendlyCardErrorMessage(error, fallback) {
     return error instanceof Error && error.message
         ? error.message
-        : 'Payment failed. Please review your card details and try again.';
+        : fallback;
 }
-export function SharedStripeCheckoutV2CheckoutSessionForm({ amountCents, buttonColor, cardSubmitLabel, closeAriaLabel, countdownLabel, checkoutAnalytics, checkoutSessionId, customerEmail, customerEmailEditable: allowEmailEditing = false, customerEmailLabel = 'Email', customerEmailPlaceholder = 'Enter your email', customerEmailInvalidMessage = 'Enter a valid email address.', customerName, discountAmountLabel, discountLabel, discountPercent, initialWalletAvailable, onClose, onCustomerEmailChange, onCustomerEmailCommit, onError, onInactiveCheckoutSession, onPaymentInfoSubmitted, onSuccess, paymentMethodLabels = defaultPaymentMethodLabels, promoActive, processingLabel, promoCode, promoCodeLabel, remainingSeconds, returnUrl, savedLabel, secureLabel, satisfactionLabel, satisfactionPercent, summaryLabel, supportedCountries, themeColor, title, totalLabel, totalValue, unsupportedCountryMessage, walletButtonLabel, originalPriceLabel, originalPriceValue, variant = 'standard', }) {
+export function SharedStripeCheckoutV2CheckoutSessionForm({ copy = defaultCheckoutV2Copy, amountCents, buttonColor, cardSubmitLabel, closeAriaLabel, countdownLabel, checkoutAnalytics, checkoutSessionId, customerEmail, customerEmailEditable: allowEmailEditing = false, customerEmailLabel = 'Email', customerEmailPlaceholder = 'Enter your email', customerEmailInvalidMessage = 'Enter a valid email address.', customerName, discountAmountLabel, discountLabel, discountPercent, initialWalletAvailable, onClose, onCustomerEmailChange, onCustomerEmailCommit, onError, onInactiveCheckoutSession, onPaymentInfoSubmitted, onSuccess, paymentMethodLabels = defaultPaymentMethodLabels, promoActive, processingLabel, promoCode, promoCodeLabel, remainingSeconds, returnUrl, savedLabel, secureLabel, satisfactionLabel, satisfactionPercent, summaryLabel, supportedCountries, themeColor, title, totalLabel, totalValue, unsupportedCountryMessage, walletButtonLabel, originalPriceLabel, originalPriceValue, variant = 'standard', }) {
     const checkoutState = useCheckout();
     const walletPaymentMethods = usePlatformWalletPaymentMethods();
     const [selectedMethod, setSelectedMethod] = useState('wallet');
@@ -47,7 +45,7 @@ export function SharedStripeCheckoutV2CheckoutSessionForm({ amountCents, buttonC
     const normalizedSupportedCountries = useMemo(() => normalizeSupportedCheckoutCountries(supportedCountries), [supportedCountries]);
     const fixedBillingCountry = getFixedSupportedBillingCountry(normalizedSupportedCountries);
     const fixedBillingCountryLabel = fixedBillingCountry
-        ? getCheckoutCountryLabel(fixedBillingCountry)
+        ? getCheckoutCountryLabel(fixedBillingCountry, copy)
         : null;
     const cardBrandLabels = useMemo(() => paymentMethodLabels.length > 0 ? paymentMethodLabels : defaultPaymentMethodLabels, [paymentMethodLabels]);
     const normalizedPromoCode = promoCode.trim();
@@ -203,11 +201,11 @@ export function SharedStripeCheckoutV2CheckoutSessionForm({ amountCents, buttonC
             if (checkoutState.type !== 'success') {
                 setSharedError(checkoutState.type === 'error'
                     ? checkoutState.error.message
-                    : 'Payment form is not ready yet.');
+                    : copy.formNotReady);
                 return;
             }
             if (!paymentElementReady) {
-                setSharedError('Payment form is not ready yet.', true);
+                setSharedError(copy.formNotReady, true);
                 return;
             }
         }
@@ -233,7 +231,7 @@ export function SharedStripeCheckoutV2CheckoutSessionForm({ amountCents, buttonC
                     redirect: 'if_required',
                 });
                 if (result.type === 'error') {
-                    const message = result.error.message || 'Payment failed.';
+                    const message = result.error.message || copy.paymentFailed;
                     setSharedError(message, false, result.error);
                     finishSubmitting();
                     return;
@@ -255,16 +253,16 @@ export function SharedStripeCheckoutV2CheckoutSessionForm({ amountCents, buttonC
             finishSubmitting();
         }
         catch (submitError) {
-            setSharedError(getFriendlyCardErrorMessage(submitError), confirmed);
+            setSharedError(getFriendlyCardErrorMessage(submitError, copy.cardError), confirmed);
             finishSubmitting();
         }
     };
     const visibleError = error;
     if (providerConfirmed && !completed)
-        return _jsxs("form", { onSubmit: handleSubmit, className: 'bg-background text-foreground p-6', children: [_jsx("p", { role: error ? 'alert' : 'status', children: error || 'Verifying payment…' }), _jsx("button", { type: 'submit', disabled: submitting, className: 'bg-accent text-foreground border-border rounded border p-3', children: "Check payment status" })] });
+        return _jsxs("form", { onSubmit: handleSubmit, className: 'bg-background text-foreground p-6', children: [_jsx("p", { role: error ? 'alert' : 'status', children: error || copy.verifyingPayment }), _jsx("button", { type: 'submit', disabled: submitting, className: 'bg-accent text-foreground border-border rounded border p-3', children: copy.checkPaymentStatus })] });
     if (completed)
-        return _jsx("div", { role: 'status', className: 'bg-background text-foreground p-6', children: "Payment confirmed. You can return to the app." });
-    return (_jsxs("div", { className: 'shared-checkout-v2-shell', "data-variant": variant, style: checkoutStyle, children: [_jsxs("header", { className: 'shared-checkout-v2-header', children: [_jsx("button", { type: 'button', className: 'shared-checkout-v2-close', onClick: onClose, "aria-label": closeAriaLabel, children: _jsx("span", { "aria-hidden": 'true' }) }), _jsx("h2", { id: 'shared-checkout-v2-title', children: title })] }), _jsx(SharedStripeCheckoutV2Summary, { discountPercent, countdownLabel, remainingSeconds, variant, satisfactionPercent, satisfactionLabel, originalPriceLabel, originalPriceValue, discountLabel, discountAmountLabel, promoCodeLabel, promoCode, totalLabel, totalValue, savedLabel, showPromo }), _jsxs("form", { className: 'shared-checkout-v2-payment', onSubmit: (event) => void handleSubmit(event), children: [showWalletMethod ? (_jsxs("div", { className: 'shared-checkout-v2-methods', role: 'tablist', "aria-label": 'Payment method', children: [_jsxs("button", { type: 'button', className: [
+        return _jsx("div", { role: 'status', className: 'bg-background text-foreground p-6', children: copy.paymentConfirmed });
+    return (_jsxs("div", { className: 'shared-checkout-v2-shell', "data-variant": variant, style: checkoutStyle, children: [_jsxs("header", { className: 'shared-checkout-v2-header', children: [_jsx("button", { type: 'button', className: 'shared-checkout-v2-close', onClick: onClose, "aria-label": closeAriaLabel, children: _jsx("span", { "aria-hidden": 'true' }) }), _jsx("h2", { id: 'shared-checkout-v2-title', children: title })] }), _jsx(SharedStripeCheckoutV2Summary, { countdownUnit: copy.countdownUnit, discountPercent, countdownLabel, remainingSeconds, variant, satisfactionPercent, satisfactionLabel, originalPriceLabel, originalPriceValue, discountLabel, discountAmountLabel, promoCodeLabel, promoCode, totalLabel, totalValue, savedLabel, showPromo }), _jsxs("form", { className: 'shared-checkout-v2-payment', onSubmit: (event) => void handleSubmit(event), children: [showWalletMethod ? (_jsxs("div", { className: 'shared-checkout-v2-methods', role: 'tablist', "aria-label": copy.paymentMethodLabel, children: [_jsxs("button", { type: 'button', className: [
                                     'shared-checkout-v2-method',
                                     effectiveSelectedMethod === 'wallet' ? 'is-selected' : '',
                                 ]
@@ -274,7 +272,7 @@ export function SharedStripeCheckoutV2CheckoutSessionForm({ amountCents, buttonC
                                     effectiveSelectedMethod === 'card' ? 'is-selected' : '',
                                 ]
                                     .filter(Boolean)
-                                    .join(' '), onClick: selectCardMethod, role: 'tab', "aria-selected": effectiveSelectedMethod === 'card', children: [_jsx("strong", { children: "Credit card" }), _jsx("span", { className: 'shared-checkout-v2-tab-brands', "aria-hidden": 'true', children: cardBrandLabels.slice(0, 4).map((label) => (_jsx(PaymentBrandMark, { label: label, className: 'shared-checkout-v2-tab-brand' }, label))) })] })] })) : null, _jsxs("div", { hidden: effectiveSelectedMethod !== 'wallet', className: [
+                                    .join(' '), onClick: selectCardMethod, role: 'tab', "aria-selected": effectiveSelectedMethod === 'card', children: [_jsx("strong", { children: copy.cardLabel }), _jsx("span", { className: 'shared-checkout-v2-tab-brands', "aria-hidden": 'true', children: cardBrandLabels.slice(0, 4).map((label) => (_jsx(PaymentBrandMark, { label: label, className: 'shared-checkout-v2-tab-brand' }, label))) })] })] })) : null, _jsxs("div", { hidden: effectiveSelectedMethod !== 'wallet', className: [
                             'shared-checkout-v2-wallet-panel',
                             effectiveSelectedMethod === 'wallet' ? 'is-visible' : '',
                         ]
@@ -289,5 +287,5 @@ export function SharedStripeCheckoutV2CheckoutSessionForm({ amountCents, buttonC
                                                             return;
                                                         }
                                                         setEmailDraft(event.target.value);
-                                                    } }) })] }), _jsx(PaymentElement, { options: paymentElementOptions, onChange: handlePaymentElementChange, onReady: () => setPaymentElementReady(true) }), fixedBillingCountry && fixedBillingCountryLabel ? (_jsxs("label", { className: 'shared-checkout-v2-country-field', children: [_jsx("span", { className: 'shared-checkout-v2-country-label', children: "Country" }), _jsx("span", { className: 'shared-checkout-v2-country-control', children: _jsx("select", { "aria-label": 'Country', className: 'shared-checkout-v2-country-select', value: fixedBillingCountry, onChange: () => setBillingCountry(fixedBillingCountry), children: _jsx("option", { value: fixedBillingCountry, children: fixedBillingCountryLabel }) }) })] })) : null] }), visibleError ? _jsx("p", { className: 'shared-checkout-v2-error', children: visibleError }) : null, _jsxs("button", { type: 'submit', className: 'shared-checkout-v2-card-submit', disabled: submitting || emailSaving || emailSessionChanged || !paymentElementReady, children: [_jsx(SecurityLockIcon, { className: 'shared-checkout-v2-card-submit-icon' }), submitting || emailSaving || emailSessionChanged ? processingLabel : cardSubmitLabel] }), _jsx("div", { className: 'shared-checkout-v2-card-brands', "aria-hidden": 'true', children: cardBrandLabels.map((label) => (_jsx(PaymentBrandMark, { label: label, className: 'shared-checkout-v2-card-brand' }, label))) }), _jsxs("p", { className: 'shared-checkout-v2-secure-pill shared-checkout-v2-secure-pill--card', children: [_jsx(SecurityLockIcon, { className: 'shared-checkout-v2-secure-pill-icon' }), secureLabel] })] })] })] }));
+                                                    } }) })] }), _jsx(PaymentElement, { options: paymentElementOptions, onChange: handlePaymentElementChange, onReady: () => setPaymentElementReady(true) }), fixedBillingCountry && fixedBillingCountryLabel ? (_jsxs("label", { className: 'shared-checkout-v2-country-field', children: [_jsx("span", { className: 'shared-checkout-v2-country-label', children: copy.billingCountryLabel }), _jsx("span", { className: 'shared-checkout-v2-country-control', children: _jsx("select", { "aria-label": copy.billingCountryLabel, className: 'shared-checkout-v2-country-select', value: fixedBillingCountry, onChange: () => setBillingCountry(fixedBillingCountry), children: _jsx("option", { value: fixedBillingCountry, children: fixedBillingCountryLabel }) }) })] })) : null] }), visibleError ? _jsx("p", { className: 'shared-checkout-v2-error', children: visibleError }) : null, _jsxs("button", { type: 'submit', className: 'shared-checkout-v2-card-submit', disabled: submitting || emailSaving || emailSessionChanged || !paymentElementReady, children: [_jsx(SecurityLockIcon, { className: 'shared-checkout-v2-card-submit-icon' }), submitting || emailSaving || emailSessionChanged ? processingLabel : cardSubmitLabel] }), _jsx("div", { className: 'shared-checkout-v2-card-brands', "aria-hidden": 'true', children: cardBrandLabels.map((label) => (_jsx(PaymentBrandMark, { label: label, className: 'shared-checkout-v2-card-brand' }, label))) }), _jsxs("p", { className: 'shared-checkout-v2-secure-pill shared-checkout-v2-secure-pill--card', children: [_jsx(SecurityLockIcon, { className: 'shared-checkout-v2-secure-pill-icon' }), secureLabel] })] })] })] }));
 }

package/dist/providers/stripe/components/SharedStripeCheckoutV2Summary.internal.d.ts

@@ -1,6 +1,7 @@
 import type { SharedStripeCheckoutV2DialogProps } from './SharedStripeCheckoutV2Dialog.js';
 type SummaryProps = Pick<SharedStripeCheckoutV2DialogProps, 'discountPercent' | 'countdownLabel' | 'remainingSeconds' | 'variant' | 'satisfactionPercent' | 'satisfactionLabel' | 'originalPriceLabel' | 'originalPriceValue' | 'discountLabel' | 'discountAmountLabel' | 'promoCodeLabel' | 'promoCode' | 'totalLabel' | 'totalValue' | 'savedLabel'> & {
     showPromo: boolean;
+    countdownUnit: string;
 };
-export declare function SharedStripeCheckoutV2Summary({ discountPercent, countdownLabel, remainingSeconds, variant, satisfactionPercent, satisfactionLabel, originalPriceLabel, originalPriceValue, discountLabel, discountAmountLabel, promoCodeLabel, promoCode, totalLabel, totalValue, savedLabel, showPromo }: SummaryProps): import("react/jsx-runtime").JSX.Element;
+export declare function SharedStripeCheckoutV2Summary({ discountPercent, countdownLabel, remainingSeconds, variant, satisfactionPercent, satisfactionLabel, originalPriceLabel, originalPriceValue, discountLabel, discountAmountLabel, promoCodeLabel, promoCode, totalLabel, totalValue, savedLabel, showPromo, countdownUnit }: SummaryProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/providers/stripe/components/SharedStripeCheckoutV2Summary.internal.js

@@ -7,10 +7,10 @@ const formatCountdown = (remainingSeconds) => {
     const seconds = normalizedSeconds % 60;
     return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
 };
-export function SharedStripeCheckoutV2Summary({ discountPercent, countdownLabel, remainingSeconds, variant, satisfactionPercent, satisfactionLabel, originalPriceLabel, originalPriceValue, discountLabel, discountAmountLabel, promoCodeLabel, promoCode, totalLabel, totalValue, savedLabel, showPromo }) {
+export function SharedStripeCheckoutV2Summary({ discountPercent, countdownLabel, remainingSeconds, variant, satisfactionPercent, satisfactionLabel, originalPriceLabel, originalPriceValue, discountLabel, discountAmountLabel, promoCodeLabel, promoCode, totalLabel, totalValue, savedLabel, showPromo, countdownUnit }) {
     const countdownValue = formatCountdown(remainingSeconds);
     const normalizedPromoCode = promoCode.trim();
-    return (_jsxs("section", { className: 'shared-checkout-v2-summary', children: [showPromo ? (_jsxs("p", { className: 'shared-checkout-v2-countdown', children: [discountPercent, "% ", countdownLabel, " ", countdownValue, " min"] })) : null, variant === 'standard' ? (_jsxs("p", { className: 'shared-checkout-v2-satisfaction', children: [_jsx("strong", { children: satisfactionPercent }), " ", satisfactionLabel] })) : null, showPromo ? (_jsxs("div", { className: 'shared-checkout-v2-price-stack', children: [_jsxs("div", { className: 'shared-checkout-v2-price-row is-muted', children: [_jsx("span", { children: originalPriceLabel }), _jsx("span", { className: 'shared-checkout-v2-strike', children: originalPriceValue })] }), _jsxs("div", { className: 'shared-checkout-v2-price-row is-discount', children: [_jsx("strong", { children: discountLabel }), _jsx("strong", { children: discountAmountLabel })] }), _jsxs("div", { className: 'shared-checkout-v2-promo', children: [_jsx("span", { children: promoCodeLabel }), _jsx("strong", { children: normalizedPromoCode })] })] })) : null, _jsxs("div", { className: [
+    return (_jsxs("section", { className: 'shared-checkout-v2-summary', children: [showPromo ? (_jsxs("p", { className: 'shared-checkout-v2-countdown', children: [discountPercent, "% ", countdownLabel, " ", countdownValue, " ", countdownUnit] })) : null, variant === 'standard' ? (_jsxs("p", { className: 'shared-checkout-v2-satisfaction', children: [_jsx("strong", { children: satisfactionPercent }), " ", satisfactionLabel] })) : null, showPromo ? (_jsxs("div", { className: 'shared-checkout-v2-price-stack', children: [_jsxs("div", { className: 'shared-checkout-v2-price-row is-muted', children: [_jsx("span", { children: originalPriceLabel }), _jsx("span", { className: 'shared-checkout-v2-strike', children: originalPriceValue })] }), _jsxs("div", { className: 'shared-checkout-v2-price-row is-discount', children: [_jsx("strong", { children: discountLabel }), _jsx("strong", { children: discountAmountLabel })] }), _jsxs("div", { className: 'shared-checkout-v2-promo', children: [_jsx("span", { children: promoCodeLabel }), _jsx("strong", { children: normalizedPromoCode })] })] })) : null, _jsxs("div", { className: [
                     'shared-checkout-v2-total',
                     showPromo ? '' : 'is-plain',
                 ]

package/dist/providers/stripe/components/checkout-v2.content.d.ts

@@ -0,0 +1,14 @@
+export type SharedStripeCheckoutV2Copy = {
+    paymentMethodLabel: string;
+    countdownUnit: string;
+    cardLabel: string;
+    formNotReady: string;
+    paymentFailed: string;
+    cardError: string;
+    verifyingPayment: string;
+    checkPaymentStatus: string;
+    paymentConfirmed: string;
+    billingCountryLabel: string;
+    countryNames: Readonly<Record<string, string>>;
+};
+export declare const defaultCheckoutV2Copy: SharedStripeCheckoutV2Copy;

package/dist/providers/stripe/components/checkout-v2.content.js

@@ -0,0 +1,13 @@
+export const defaultCheckoutV2Copy = {
+    paymentMethodLabel: 'Payment method',
+    countdownUnit: 'min',
+    cardLabel: 'Credit card',
+    formNotReady: 'Payment form is not ready yet.',
+    paymentFailed: 'Payment failed.',
+    cardError: 'Payment failed. Please review your card details and try again.',
+    verifyingPayment: 'Verifying payment…',
+    checkPaymentStatus: 'Check payment status',
+    paymentConfirmed: 'Payment confirmed. You can return to the app.',
+    billingCountryLabel: 'Country',
+    countryNames: { US: 'United States' },
+};

package/dist/providers/stripe/hooks/useStripeOneTimeCheckoutSession.d.ts

@@ -1,4 +1,4 @@
-import type { Stripe } from '@stripe/stripe-js';
+import type { Stripe, StripeConstructorOptions } from '@stripe/stripe-js';
 import type { RuntimeMode } from '@funnelsgrove/runtime';
 import { type CheckoutPreparationLoading, type CheckoutPreparationSource } from '../../paymentProvider.types.js';
 import { type PaywallPlan, type StripeRuntimeConfigOverrides } from '../services/stripe.service.js';
@@ -20,6 +20,7 @@ export type StripeOneTimeCheckoutSessionInput = {
     returnUrl: string;
     runtimeConfig?: StripeRuntimeConfigOverrides;
     stripePublishableKey?: string | null;
+    stripeLocale?: StripeConstructorOptions['locale'];
     userId?: string | null;
 };
 export type StripeOneTimeCheckoutPreparationOptions = {
@@ -51,4 +52,4 @@ export type StripeOneTimeCheckoutIntentKeyInput = Pick<StripeOneTimeCheckoutSess
 };
 export declare function buildStripeOneTimeCheckoutIntentKey({ runtimeConfigRevisionId, paymentProfileId, provider, checkoutMode, couponId, customerEmail, plan, returnUrl, runtimeConfig, stripePublishableKey, userId, }: StripeOneTimeCheckoutIntentKeyInput): string;
 export declare function shouldResetStripeOneTimeCheckoutSessionForIntentKey(previousIntentKey: string | null, nextIntentKey: string): boolean;
-export declare function useStripeOneTimeCheckoutSession({ runtimeConfigRevisionId, paymentProfileId, provider, analyticsMetadata, checkoutAnalytics, checkoutMode, couponId, customerEmail, enabled, onError, plan, returnUrl, runtimeConfig, stripePublishableKey, userId, }: StripeOneTimeCheckoutSessionInput): StripeOneTimeCheckoutSession;
+export declare function useStripeOneTimeCheckoutSession({ runtimeConfigRevisionId, paymentProfileId, provider, analyticsMetadata, checkoutAnalytics, checkoutMode, couponId, customerEmail, enabled, onError, plan, returnUrl, runtimeConfig, stripePublishableKey, stripeLocale, userId, }: StripeOneTimeCheckoutSessionInput): StripeOneTimeCheckoutSession;

package/dist/providers/stripe/hooks/useStripeOneTimeCheckoutSession.js

@@ -71,7 +71,7 @@ export function buildStripeOneTimeCheckoutIntentKey({ runtimeConfigRevisionId, p
 export function shouldResetStripeOneTimeCheckoutSessionForIntentKey(previousIntentKey, nextIntentKey) {
     return previousIntentKey !== null && previousIntentKey !== nextIntentKey;
 }
-export function useStripeOneTimeCheckoutSession({ runtimeConfigRevisionId, paymentProfileId, provider, analyticsMetadata, checkoutAnalytics, checkoutMode, couponId, customerEmail, enabled = true, onError, plan, returnUrl, runtimeConfig, stripePublishableKey, userId, }) {
+export function useStripeOneTimeCheckoutSession({ runtimeConfigRevisionId, paymentProfileId, provider, analyticsMetadata, checkoutAnalytics, checkoutMode, couponId, customerEmail, enabled = true, onError, plan, returnUrl, runtimeConfig, stripePublishableKey, stripeLocale, userId, }) {
     var _a, _b, _c;
     const [clientSecret, setClientSecret] = useState(null);
     const [clientSecretIntentKey, setClientSecretIntentKey] = useState(null);
@@ -114,8 +114,8 @@ export function useStripeOneTimeCheckoutSession({ runtimeConfigRevisionId, payme
     const activeCheckoutSessionId = clientSecretIntentKey === intentKey ? checkoutSessionId : null;
     const stripePromise = useMemo(() => {
         var _a;
-        return getStripePromise(checkoutMode, (_a = runtimeStripePublishableKey !== null && runtimeStripePublishableKey !== void 0 ? runtimeStripePublishableKey : stripePublishableKey) !== null && _a !== void 0 ? _a : runtimeConfig === null || runtimeConfig === void 0 ? void 0 : runtimeConfig.funnelSdkPublishableKey);
-    }, [checkoutMode, runtimeConfig === null || runtimeConfig === void 0 ? void 0 : runtimeConfig.funnelSdkPublishableKey, runtimeStripePublishableKey, stripePublishableKey]);
+        return getStripePromise(checkoutMode, (_a = runtimeStripePublishableKey !== null && runtimeStripePublishableKey !== void 0 ? runtimeStripePublishableKey : stripePublishableKey) !== null && _a !== void 0 ? _a : runtimeConfig === null || runtimeConfig === void 0 ? void 0 : runtimeConfig.funnelSdkPublishableKey, stripeLocale);
+    }, [checkoutMode, runtimeConfig === null || runtimeConfig === void 0 ? void 0 : runtimeConfig.funnelSdkPublishableKey, runtimeStripePublishableKey, stripePublishableKey, stripeLocale]);
     const previousIntentKeyRef = useRef(intentKey);
     const analyticsMetadataRef = useRef(analyticsMetadata);
     useEffect(() => {

package/dist/providers/stripe/hooks/useStripeSubscriptionCheckoutSession.d.ts

@@ -1,4 +1,4 @@
-import type { Stripe } from '@stripe/stripe-js';
+import type { Stripe, StripeConstructorOptions } from '@stripe/stripe-js';
 import type { RuntimeMode } from '@funnelsgrove/runtime';
 import { type CheckoutPreparationLoading, type CheckoutPreparationSource } from '../../paymentProvider.types.js';
 import type { PaywallDisplayPlan } from '../../../services/paywallOffer.service.js';
@@ -21,6 +21,7 @@ export type StripeSubscriptionCheckoutSessionInput = {
     paymentProfileId?: string | null;
     provider?: 'stripe' | null;
     stripePublishableKey?: string | null;
+    stripeLocale?: StripeConstructorOptions['locale'];
     userId?: string | null;
 };
 export type StripeSubscriptionCheckoutPreparationOptions = {
@@ -58,4 +59,4 @@ export declare function shouldResetStripeSubscriptionCheckoutSessionForIntentKey
 export declare function isInactiveCheckoutSessionError(message?: string | null): boolean;
 export declare function shouldAutoRecoverStripeSubscriptionCheckoutSession(message: string | null | undefined, alreadyRecovered: boolean): boolean;
 export declare const shouldReportStripeCheckoutFailureShown: (message: string) => boolean;
-export declare function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMetadata, checkoutAnalytics, couponId, customerEmail, displayPlan, enabled, onError, plan, returnUrl, runtimeConfig, runtimeConfigRevisionId, paymentProfileId, provider, stripePublishableKey, userId, }: StripeSubscriptionCheckoutSessionInput): StripeSubscriptionCheckoutSession;
+export declare function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMetadata, checkoutAnalytics, couponId, customerEmail, displayPlan, enabled, onError, plan, returnUrl, runtimeConfig, runtimeConfigRevisionId, paymentProfileId, provider, stripePublishableKey, stripeLocale, userId, }: StripeSubscriptionCheckoutSessionInput): StripeSubscriptionCheckoutSession;

package/dist/providers/stripe/hooks/useStripeSubscriptionCheckoutSession.js

@@ -71,7 +71,7 @@ export function shouldAutoRecoverStripeSubscriptionCheckoutSession(message, alre
     return !alreadyRecovered && isInactiveCheckoutSessionError(message);
 }
 export const shouldReportStripeCheckoutFailureShown = (message) => !isInactiveCheckoutSessionError(message);
-export function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMetadata, checkoutAnalytics, couponId, customerEmail, displayPlan, enabled = true, onError, plan, returnUrl, runtimeConfig, runtimeConfigRevisionId, paymentProfileId, provider, stripePublishableKey, userId, }) {
+export function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMetadata, checkoutAnalytics, couponId, customerEmail, displayPlan, enabled = true, onError, plan, returnUrl, runtimeConfig, runtimeConfigRevisionId, paymentProfileId, provider, stripePublishableKey, stripeLocale, userId, }) {
     var _a, _b, _c, _d, _e;
     const [clientSecret, setClientSecret] = useState(null);
     const [clientSecretIntentKey, setClientSecretIntentKey] = useState(null);
@@ -119,7 +119,7 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMe
     const activeClientSecret = clientSecretIntentKey === intentKey ? clientSecret : null;
     const activeCheckoutSessionId = clientSecretIntentKey === intentKey ? checkoutSessionId : null;
     const activePlanKey = clientSecretIntentKey === intentKey ? clientSecretPlanKey : null;
-    const stripePromise = useMemo(() => getStripePromise(checkoutMode, runtimeStripePublishableKey !== null && runtimeStripePublishableKey !== void 0 ? runtimeStripePublishableKey : stripePublishableKey), [checkoutMode, runtimeStripePublishableKey, stripePublishableKey]);
+    const stripePromise = useMemo(() => getStripePromise(checkoutMode, runtimeStripePublishableKey !== null && runtimeStripePublishableKey !== void 0 ? runtimeStripePublishableKey : stripePublishableKey, stripeLocale), [checkoutMode, runtimeStripePublishableKey, stripePublishableKey, stripeLocale]);
     const previousIntentKeyRef = useRef(intentKey);
     const analyticsMetadataRef = useRef(analyticsMetadata);
     useEffect(() => {

package/dist/providers/stripe/services/stripeClient.d.ts

@@ -1,4 +1,4 @@
-import type { Stripe } from '@stripe/stripe-js';
+import type { Stripe, StripeConstructorOptions } from '@stripe/stripe-js';
 import type { RuntimeMode } from '@funnelsgrove/runtime';
 export declare function isStripeConfigured(mode: RuntimeMode): boolean;
-export declare function getStripePromise(_mode: RuntimeMode, runtimePublishableKey?: string | null): Promise<Stripe | null> | null;
+export declare function getStripePromise(_mode: RuntimeMode, runtimePublishableKey?: string | null, locale?: StripeConstructorOptions['locale']): Promise<Stripe | null> | null;

package/dist/providers/stripe/services/stripeClient.js

@@ -5,15 +5,16 @@ export function isStripeConfigured(mode) {
     void mode;
     return FUNNEL_SDK_PUBLISHABLE_KEY.length > 0;
 }
-export function getStripePromise(_mode, runtimePublishableKey) {
+export function getStripePromise(_mode, runtimePublishableKey, locale) {
     const resolvedPublishableKey = (runtimePublishableKey === null || runtimePublishableKey === void 0 ? void 0 : runtimePublishableKey.trim()) || '';
     if (!resolvedPublishableKey) {
         return null;
     }
-    let stripePromise = stripePromiseByKey.get(resolvedPublishableKey) || null;
+    const cacheKey = JSON.stringify([resolvedPublishableKey, locale !== null && locale !== void 0 ? locale : 'auto']);
+    let stripePromise = stripePromiseByKey.get(cacheKey) || null;
     if (!stripePromise) {
-        stripePromise = loadStripe(resolvedPublishableKey);
-        stripePromiseByKey.set(resolvedPublishableKey, stripePromise);
+        stripePromise = locale ? loadStripe(resolvedPublishableKey, { locale }) : loadStripe(resolvedPublishableKey);
+        stripePromiseByKey.set(cacheKey, stripePromise);
     }
     return stripePromise;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnelsgrove/payments",
-  "version": "0.20.0",
+  "version": "0.21.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/The-Solid-Grove/funnelsgrove.git",
@@ -32,8 +32,6 @@
     "test:run": "vitest run --passWithNoTests"
   },
   "dependencies": {
-    "@funnelsgrove/analytics": "0.1.110",
-    "@funnelsgrove/runtime": "0.19.0",
     "@solidgate/react-sdk": "1.34.0",
     "@stripe/react-stripe-js": "^5.6.0",
     "@stripe/stripe-js": "^8.7.0",
@@ -47,6 +45,12 @@
     "@types/react-dom": "^19",
     "jsdom": "20.0.3",
     "typescript": "^5",
-    "vitest": "^3.2.4"
+    "vitest": "^3.2.4",
+    "@funnelsgrove/runtime": "0.19.1",
+    "@funnelsgrove/analytics": "0.2.0"
+  },
+  "peerDependencies": {
+    "@funnelsgrove/runtime": "^0.19.1",
+    "@funnelsgrove/analytics": "^0.1.111 || ^0.2.0"
   }
 }