diff --git a/.changeset/chilled-garlics-knock.md b/.changeset/chilled-garlics-knock.md
new file mode 100644
index 00000000000..962fa085af5
--- /dev/null
+++ b/.changeset/chilled-garlics-knock.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Add support for localizationKeys within commerce components.
diff --git a/packages/clerk-js/src/ui/components/Checkout/CheckoutComplete.tsx b/packages/clerk-js/src/ui/components/Checkout/CheckoutComplete.tsx
index c44ff51e7ba..dea80762f82 100644
--- a/packages/clerk-js/src/ui/components/Checkout/CheckoutComplete.tsx
+++ b/packages/clerk-js/src/ui/components/Checkout/CheckoutComplete.tsx
@@ -1,7 +1,7 @@
 import type { __experimental_CommerceCheckoutResource } from '@clerk/types';
 
 import { useCheckoutContext } from '../../contexts';
-import { Box, Button, descriptors, Heading, Icon, Span, Text } from '../../customizables';
+import { Box, Button, descriptors, Heading, Icon, localizationKeys, Span, Text } from '../../customizables';
 import { Drawer, LineItems } from '../../elements';
 import { Check } from '../../icons';
 
@@ -98,30 +98,35 @@ export const CheckoutComplete = ({ checkout }: { checkout: __experimental_Commer
       >
         <LineItems.Root>
           <LineItems.Group variant='secondary'>
-            <LineItems.Title>Total paid</LineItems.Title>
-            <LineItems.Description>
-              {checkout.invoice
-                ? `${checkout.invoice.totals.grandTotal.currencySymbol}${checkout.invoice.totals.grandTotal.amountFormatted}`
-                : '–'}
-            </LineItems.Description>
+            {/* TODO(@COMMERCE): needs localization */}
+            <LineItems.Title title='Total paid' />
+            <LineItems.Description
+              text={
+                checkout.invoice
+                  ? `${checkout.invoice.totals.grandTotal.currencySymbol}${checkout.invoice.totals.grandTotal.amountFormatted}`
+                  : '–'
+              }
+            />
           </LineItems.Group>
           <LineItems.Group variant='secondary'>
             {/* TODO(@COMMERCE): needs localization */}
-            <LineItems.Title>Payment method</LineItems.Title>
-            <LineItems.Description>
-              {checkout.paymentSource ? `${checkout.paymentSource.cardType} ⋯ ${checkout.paymentSource.last4}` : '–'}
-            </LineItems.Description>
+            <LineItems.Title title='Payment method' />
+            <LineItems.Description
+              text={
+                checkout.paymentSource ? `${checkout.paymentSource.cardType} ⋯ ${checkout.paymentSource.last4}` : '–'
+              }
+            />
           </LineItems.Group>
           <LineItems.Group variant='tertiary'>
             {/* TODO(@COMMERCE): needs localization */}
-            <LineItems.Title>Invoice ID</LineItems.Title>
-            <LineItems.Description>{checkout.invoice ? checkout.invoice.id : '–'}</LineItems.Description>
+            <LineItems.Title title='Invoice ID' />
+            <LineItems.Description text={checkout.invoice ? checkout.invoice.id : '–'} />
           </LineItems.Group>
         </LineItems.Root>
-        <Button onClick={handleClose}>
-          {/* TODO(@COMMERCE): needs localization */}
-          Continue
-        </Button>
+        <Button
+          onClick={handleClose}
+          localizationKey={localizationKeys('formButtonPrimary')}
+        />
       </Drawer.Footer>
     </>
   );
diff --git a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx
index eeee8a29933..6edeb1167f1 100644
--- a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx
+++ b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx
@@ -40,40 +40,36 @@ export const CheckoutForm = ({
       >
         <LineItems.Root>
           <LineItems.Group>
-            <LineItems.Title>{plan.name}</LineItems.Title>
+            <LineItems.Title title={plan.name} />
             {/* TODO(@Commerce): needs localization */}
-            <LineItems.Description suffix={`per month${planPeriod === 'annual' ? ', times 12 months' : ''}`}>
-              {plan.currencySymbol}
-              {planPeriod === 'month' ? plan.amountFormatted : plan.annualMonthlyAmountFormatted}
-            </LineItems.Description>
+            <LineItems.Description
+              text={`${plan.currencySymbol} ${planPeriod === 'month' ? plan.amountFormatted : plan.annualMonthlyAmountFormatted}`}
+              suffix={`per month${planPeriod === 'annual' ? ', times 12 months' : ''}`}
+            />
           </LineItems.Group>
           <LineItems.Group
             borderTop
             variant='tertiary'
           >
             {/* TODO(@Commerce): needs localization */}
-            <LineItems.Title>Subtotal</LineItems.Title>
-            <LineItems.Description>
-              {totals.subtotal.currencySymbol}
-              {totals.subtotal.amountFormatted}
-            </LineItems.Description>
+            <LineItems.Title title='Subtotal' />
+            <LineItems.Description text={`${totals.subtotal.currencySymbol} ${totals.subtotal.amountFormatted}`} />
           </LineItems.Group>
           <LineItems.Group variant='tertiary'>
             {/* TODO(@Commerce): needs localization */}
-            <LineItems.Title>Tax</LineItems.Title>
-            <LineItems.Description>
-              {totals.taxTotal.currencySymbol}
-              {totals.taxTotal.amountFormatted}
-            </LineItems.Description>
+            <LineItems.Title title='Tax' />
+            <LineItems.Description text={`${totals.taxTotal.currencySymbol} ${totals.taxTotal.amountFormatted}`} />
           </LineItems.Group>
           <LineItems.Group borderTop>
             {/* TODO(@Commerce): needs localization */}
-            <LineItems.Title>Total{totals.totalDueNow ? ' Due Today' : ''}</LineItems.Title>
-            <LineItems.Description>
-              {totals.totalDueNow
-                ? `${totals.totalDueNow.currencySymbol}${totals.totalDueNow.amountFormatted}`
-                : `${totals.grandTotal.currencySymbol}${totals.grandTotal.amountFormatted}`}
-            </LineItems.Description>
+            <LineItems.Title title={`Total${totals.totalDueNow ? ' Due Today' : ''}`} />
+            <LineItems.Description
+              text={`${
+                totals.totalDueNow
+                  ? `${totals.totalDueNow.currencySymbol}${totals.totalDueNow.amountFormatted}`
+                  : `${totals.grandTotal.currencySymbol}${totals.grandTotal.amountFormatted}`
+              }`}
+            />
           </LineItems.Group>
         </LineItems.Root>
       </Box>
@@ -201,7 +197,7 @@ const CheckoutFormElements = ({
             onOpenChange={setOpenAccountFundsDropDown}
           >
             {/* TODO(@Commerce): needs localization */}
-            <Disclosure.Trigger>Account Funds</Disclosure.Trigger>
+            <Disclosure.Trigger text='Account Funds' />
             <Disclosure.Content>
               <Col gap={3}>
                 <PaymentSourceMethods
@@ -222,7 +218,7 @@ const CheckoutFormElements = ({
         onOpenChange={setOpenAddNewSourceDropDown}
       >
         {/* TODO(@Commerce): needs localization */}
-        <Disclosure.Trigger>Add a New Payment Source</Disclosure.Trigger>
+        <Disclosure.Trigger text='Add a New Payment Source' />
         <Disclosure.Content>
           <StripePaymentMethods
             totalDueNow={checkout.totals.totalDueNow || checkout.totals.grandTotal}
diff --git a/packages/clerk-js/src/ui/components/PricingTable/PlanCard.tsx b/packages/clerk-js/src/ui/components/PricingTable/PlanCard.tsx
index 691c52b4742..cda2191c97d 100644
--- a/packages/clerk-js/src/ui/components/PricingTable/PlanCard.tsx
+++ b/packages/clerk-js/src/ui/components/PricingTable/PlanCard.tsx
@@ -325,8 +325,16 @@ export const PlanCardHeader = React.forwardRef<HTMLDivElement, PlanCardHeaderPro
             value={planPeriod}
             onChange={value => setPlanPeriod(value as PlanPeriod)}
           >
-            <SegmentedControl.Button value='month'>Monthly</SegmentedControl.Button>
-            <SegmentedControl.Button value='annual'>Annually</SegmentedControl.Button>
+            <SegmentedControl.Button
+              value='month'
+              // TODO(@Commerce): needs localization
+              text='Monthly'
+            />
+            <SegmentedControl.Button
+              value='annual'
+              // TODO(@Commerce): needs localization
+              text='Annually'
+            />
           </SegmentedControl.Root>
         </Box>
       ) : null}
diff --git a/packages/clerk-js/src/ui/elements/Disclosure.tsx b/packages/clerk-js/src/ui/elements/Disclosure.tsx
index 6731e394716..cf1a4a31749 100644
--- a/packages/clerk-js/src/ui/elements/Disclosure.tsx
+++ b/packages/clerk-js/src/ui/elements/Disclosure.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 
-import { Box, descriptors, Icon, SimpleButton, useAppearance } from '../customizables';
+import type { LocalizationKey } from '../customizables';
+import { Box, descriptors, Icon, SimpleButton, Span, useAppearance } from '../customizables';
 import { usePrefersReducedMotion } from '../hooks';
 import { ChevronDown } from '../icons';
 import type { ThemableCssProp } from '../styledSystem';
@@ -72,10 +73,10 @@ Root.displayName = 'Disclosure.Root';
  * -----------------------------------------------------------------------------------------------*/
 
 interface TriggerProps {
-  children: React.ReactNode;
+  text: string | LocalizationKey;
 }
 
-const Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(({ children }, ref) => {
+const Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(({ text }, ref) => {
   const context = React.useContext(DisclosureContext);
   if (!context) {
     throw new Error('Disclosure.Trigger must be used within Disclosure.Root');
@@ -99,7 +100,7 @@ const Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(({ children },
         zIndex: 2,
       })}
     >
-      {children}
+      <Span localizationKey={text} />
       <Icon
         icon={ChevronDown}
         colorScheme='neutral'
diff --git a/packages/clerk-js/src/ui/elements/Drawer.tsx b/packages/clerk-js/src/ui/elements/Drawer.tsx
index 05b3ab2c9de..b7552cdf102 100644
--- a/packages/clerk-js/src/ui/elements/Drawer.tsx
+++ b/packages/clerk-js/src/ui/elements/Drawer.tsx
@@ -14,6 +14,7 @@ import {
 import * as React from 'react';
 
 import { transitionDurationValues, transitionTiming } from '../../ui/foundations/transitions';
+import type { LocalizationKey } from '../customizables';
 import { Box, descriptors, Flex, Heading, Icon, Span, useAppearance } from '../customizables';
 import { usePrefersReducedMotion } from '../hooks';
 import { useScrollLock } from '../hooks/useScrollLock';
@@ -263,7 +264,7 @@ Overlay.displayName = 'Drawer.Content';
  * -----------------------------------------------------------------------------------------------*/
 
 interface HeaderProps {
-  title?: string;
+  title?: string | LocalizationKey;
   children?: React.ReactNode;
   sx?: ThemableCssProp;
 }
@@ -295,15 +296,14 @@ const Header = React.forwardRef<HTMLDivElement, HeaderProps>(({ title, children,
       {title ? (
         <>
           <Heading
+            localizationKey={title}
             as='h2'
             elementDescriptor={descriptors.drawerTitle}
             textVariant='h2'
             sx={{
               alignSelf: 'center',
             }}
-          >
-            {title}
-          </Heading>
+          />
           <Close />
         </>
       ) : (
@@ -416,6 +416,9 @@ interface ConfirmationProps {
   onOpenChange: (open: boolean) => void;
   children: React.ReactNode;
   actionsSlot: React.ReactNode;
+  /**
+   * @see https://floating-ui.com/docs/userole
+   */
   roleProps?: UseRoleProps;
 }
 
diff --git a/packages/clerk-js/src/ui/elements/LineItems.tsx b/packages/clerk-js/src/ui/elements/LineItems.tsx
index 9f6e6263ec5..4fb365953d4 100644
--- a/packages/clerk-js/src/ui/elements/LineItems.tsx
+++ b/packages/clerk-js/src/ui/elements/LineItems.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import type { LocalizationKey } from '../customizables';
 import { Box, Dd, descriptors, Dl, Dt, Span } from '../customizables';
 import { common } from '../styledSystem';
 
@@ -76,11 +77,11 @@ function Group({ children, borderTop = false, variant = 'primary' }: GroupProps)
  * -----------------------------------------------------------------------------------------------*/
 
 interface TitleProps {
-  children: React.ReactNode;
-  description?: React.ReactNode;
+  title: string | LocalizationKey;
+  description?: string | LocalizationKey;
 }
 
-function Title({ children, description }: TitleProps) {
+function Title({ title, description }: TitleProps) {
   const context = React.useContext(GroupContext);
   if (!context) {
     throw new Error('LineItems.Title must be used within LineItems.Group');
@@ -98,17 +99,16 @@ function Title({ children, description }: TitleProps) {
         ...common.textVariants(t)[textVariant],
       })}
     >
-      {children}
+      <Span localizationKey={title} />
       {description ? (
         <Span
+          localizationKey={description}
           elementDescriptor={descriptors.lineItemsTitleDescription}
           sx={t => ({
             fontSize: t.fontSizes.$sm,
             color: t.colors.$colorTextSecondary,
           })}
-        >
-          {description}
-        </Span>
+        />
       ) : null}
     </Dt>
   );
@@ -119,18 +119,12 @@ function Title({ children, description }: TitleProps) {
  * -----------------------------------------------------------------------------------------------*/
 
 interface DescriptionProps {
-  children: React.ReactNode;
-  /**
-   * Render a piece of text before the description text.
-   */
-  prefix?: React.ReactNode;
-  /**
-   * Render a note below the description text.
-   */
-  suffix?: React.ReactNode;
+  text: string | LocalizationKey;
+  prefix?: string | LocalizationKey;
+  suffix?: string | LocalizationKey;
 }
 
-function Description({ children, prefix, suffix }: DescriptionProps) {
+function Description({ text, prefix, suffix }: DescriptionProps) {
   const context = React.useContext(GroupContext);
   if (!context) {
     throw new Error('LineItems.Description must be used within LineItems.Group');
@@ -157,34 +151,31 @@ function Description({ children, prefix, suffix }: DescriptionProps) {
       >
         {prefix ? (
           <Span
+            localizationKey={prefix}
             elementDescriptor={descriptors.lineItemsDescriptionPrefix}
             sx={t => ({
               color: t.colors.$colorTextSecondary,
               ...common.textVariants(t).caption,
             })}
-          >
-            {prefix}
-          </Span>
+          />
         ) : null}
         <Span
+          localizationKey={text}
           elementDescriptor={descriptors.lineItemsDescriptionText}
           sx={t => ({
             ...common.textVariants(t).body,
           })}
-        >
-          {children}
-        </Span>
+        />
       </Span>
       {suffix ? (
         <Span
+          localizationKey={suffix}
           elementDescriptor={descriptors.lineItemsDescriptionSuffix}
           sx={t => ({
             color: t.colors.$colorTextSecondary,
             ...common.textVariants(t).caption,
           })}
-        >
-          {suffix}
-        </Span>
+        />
       ) : null}
     </Dd>
   );
diff --git a/packages/clerk-js/src/ui/elements/SegmentedControl.tsx b/packages/clerk-js/src/ui/elements/SegmentedControl.tsx
index c3f9d2d03ae..44f3d637bfb 100644
--- a/packages/clerk-js/src/ui/elements/SegmentedControl.tsx
+++ b/packages/clerk-js/src/ui/elements/SegmentedControl.tsx
@@ -1,6 +1,7 @@
 import { Composite, CompositeItem } from '@floating-ui/react';
 import React, { createContext, useContext, useState } from 'react';
 
+import type { LocalizationKey } from '../customizables';
 import { descriptors, Flex, SimpleButton } from '../customizables';
 
 /* -------------------------------------------------------------------------------------------------
@@ -83,11 +84,11 @@ Root.displayName = 'SegmentedControl.Root';
  * -----------------------------------------------------------------------------------------------*/
 
 interface ButtonProps {
-  children: React.ReactNode;
+  text: string | LocalizationKey;
   value: string;
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({ children, value }, ref) => {
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({ text, value }, ref) => {
   const { currentValue, onValueChange } = useSegmentedControlContext();
   const isSelected = value === currentValue;
 
@@ -98,6 +99,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({ children, val
           <SimpleButton
             ref={ref}
             {...compProps}
+            localizationKey={text}
             elementDescriptor={descriptors.segmentedControlButton}
             variant='unstyled'
             role='radio'
@@ -118,9 +120,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({ children, val
                 zIndex: 2,
               },
             })}
-          >
-            {children}
-          </SimpleButton>
+          />
         );
       }}
     />