diff --git a/.changeset/tiny-cameras-battle.md b/.changeset/tiny-cameras-battle.md
new file mode 100644
index 00000000000..2d866ebacf8
--- /dev/null
+++ b/.changeset/tiny-cameras-battle.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Display info tooltip for past due amounts at checkout.
diff --git a/.changeset/violet-views-sip.md b/.changeset/violet-views-sip.md
new file mode 100644
index 00000000000..814b9bb3862
--- /dev/null
+++ b/.changeset/violet-views-sip.md
@@ -0,0 +1,6 @@
+---
+'@clerk/localizations': patch
+'@clerk/types': patch
+---
+
+Introduce `commerce.checkout.pastDueNotice` localization key.
diff --git a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx
index af18cfd0760..a6f08a684bc 100644
--- a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx
+++ b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx
@@ -14,11 +14,12 @@ import { Drawer } from '@/ui/elements/Drawer';
import { LineItems } from '@/ui/elements/LineItems';
import { SegmentedControl } from '@/ui/elements/SegmentedControl';
import { Select, SelectButton, SelectOptionList } from '@/ui/elements/Select';
+import { Tooltip } from '@/ui/elements/Tooltip';
import { DevOnly } from '../../common/DevOnly';
import { useCheckoutContext, usePaymentSources } from '../../contexts';
import { Box, Button, Col, descriptors, Flex, Form, localizationKeys, Text } from '../../customizables';
-import { ChevronUpDown } from '../../icons';
+import { ChevronUpDown, InformationCircle } from '../../icons';
import { handleError } from '../../utils';
import * as AddPaymentSource from '../PaymentSources/AddPaymentSource';
import { PaymentSourceRow } from '../PaymentSources/PaymentSourceRow';
@@ -79,7 +80,15 @@ export const CheckoutForm = withCardStateProvider(() => {
)}
{showPastDue && (
-
+
+
+
+
+
+
)}
diff --git a/packages/clerk-js/src/ui/elements/LineItems.tsx b/packages/clerk-js/src/ui/elements/LineItems.tsx
index 1f4e4c68f4f..461806babf4 100644
--- a/packages/clerk-js/src/ui/elements/LineItems.tsx
+++ b/packages/clerk-js/src/ui/elements/LineItems.tsx
@@ -83,9 +83,10 @@ function Group({ children, borderTop = false, variant = 'primary' }: GroupProps)
interface TitleProps {
title: string | LocalizationKey;
description?: string | LocalizationKey;
+ icon?: React.ComponentType;
}
-function Title({ title, description }: TitleProps) {
+const Title = React.forwardRef(({ title, description, icon }, ref) => {
const context = React.useContext(GroupContext);
if (!context) {
throw new Error('LineItems.Title must be used within LineItems.Group');
@@ -94,6 +95,7 @@ function Title({ title, description }: TitleProps) {
const textVariant = variant === 'primary' ? 'subtitle' : 'caption';
return (
({
@@ -102,7 +104,22 @@ function Title({ title, description }: TitleProps) {
...common.textVariants(t)[textVariant],
})}
>
-
+ ({
+ display: 'inline-flex',
+ alignItems: 'center',
+ gap: t.space.$1,
+ })}
+ >
+ {icon ? (
+
+ ) : null}
+
+
{description ? (
);
-}
+});
/* -------------------------------------------------------------------------------------------------
* LineItems.Description
diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts
index 533cf82048b..e8e829d98e4 100644
--- a/packages/localizations/src/en-US.ts
+++ b/packages/localizations/src/en-US.ts
@@ -38,6 +38,7 @@ export const enUS: LocalizationResource = {
description__subscriptionSuccessful: 'Your new subscription is all set.',
downgradeNotice:
'You will keep your current subscription and its features until the end of the billing cycle, then you will be switched to this subscription.',
+ pastDueNotice: 'Your previous subscription was past due, with no payment.',
emailForm: {
subtitle: 'Before you can complete your purchase you must add an email address where receipts will be sent.',
title: 'Add an email address',
diff --git a/packages/types/src/localization.ts b/packages/types/src/localization.ts
index 77b54c7b90d..4208d30e653 100644
--- a/packages/types/src/localization.ts
+++ b/packages/types/src/localization.ts
@@ -178,6 +178,7 @@ type _LocalizationResource = {
subtitle: LocalizationValue;
};
downgradeNotice: LocalizationValue;
+ pastDueNotice: LocalizationValue;
perMonth: LocalizationValue;
};
};