diff --git a/.changeset/thin-owls-draw.md b/.changeset/thin-owls-draw.md
new file mode 100644
index 00000000000..c1cdd6bffbe
--- /dev/null
+++ b/.changeset/thin-owls-draw.md
@@ -0,0 +1,7 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Update checkout downgrade notice placement and text.
diff --git a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx
index 81cae6377c5..917c1b61ca1 100644
--- a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx
+++ b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx
@@ -11,7 +11,7 @@ import type { SetupIntent } from '@stripe/stripe-js';
import { useEffect, useMemo, useState } from 'react';
import { useCheckoutContext } from '../../contexts';
-import { Box, Button, Col, descriptors, Form, localizationKeys, Span } from '../../customizables';
+import { Box, Button, Col, descriptors, Form, localizationKeys, Text } from '../../customizables';
import { Alert, Drawer, LineItems, SegmentedControl, Select, SelectButton, SelectOptionList } from '../../elements';
import { useFetch } from '../../hooks';
import { ArrowUpDown } from '../../icons';
@@ -47,18 +47,6 @@ export const CheckoutForm = ({
})}
>
- {/* TODO(@Commerce): needs localization */}
- {showDowngradeInfo && (
- ({
- fontSize: t.fontSizes.$sm,
- color: t.colors.$colorTextSecondary,
- })}
- />
- )}
-
{/* TODO(@Commerce): needs localization */}
@@ -94,6 +82,23 @@ export const CheckoutForm = ({
+ {/* TODO(@Commerce): needs localization */}
+ {showDowngradeInfo && (
+ ({
+ paddingBlockStart: t.space.$4,
+ paddingInline: t.space.$4,
+ })}
+ >
+
+
+ )}
+