From 1e12af1c2239174419aab4a28a98bcfda34457ac Mon Sep 17 00:00:00 2001
From: Keiran Flanigan <keiran@aeliox.com>
Date: Fri, 2 May 2025 11:48:29 -0500
Subject: [PATCH 1/3] chore(clerk-js): Adjust the checkout line item rows

---
 .../components/Checkout/CheckoutComplete.tsx  |  9 ------
 .../ui/components/Checkout/CheckoutForm.tsx   | 28 +++++++------------
 2 files changed, 10 insertions(+), 27 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/Checkout/CheckoutComplete.tsx b/packages/clerk-js/src/ui/components/Checkout/CheckoutComplete.tsx
index f52c11cb318..664d8116d31 100644
--- a/packages/clerk-js/src/ui/components/Checkout/CheckoutComplete.tsx
+++ b/packages/clerk-js/src/ui/components/Checkout/CheckoutComplete.tsx
@@ -130,15 +130,6 @@ export const CheckoutComplete = ({ checkout }: { checkout: __experimental_Commer
               }
             />
           </LineItems.Group>
-          <LineItems.Group variant='tertiary'>
-            <LineItems.Title title={localizationKeys('__experimental_commerce.checkout.lineItems.title__invoiceId')} />
-            <LineItems.Description
-              text={checkout.invoice_id || '–'}
-              truncateText
-              copyText
-              copyLabel='Copy invoice ID'
-            />
-          </LineItems.Group>
         </LineItems.Root>
         <Button
           onClick={handleClose}
diff --git a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx
index 235644563b7..2d1b4a5b5f2 100644
--- a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx
+++ b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx
@@ -67,13 +67,18 @@ export const CheckoutForm = ({
               suffix={`per month${planPeriod === 'annual' ? ', times 12 months' : ''}`}
             />
           </LineItems.Group>
+          <LineItems.Group
+            borderTop
+            variant='tertiary'
+          >
+            {/* TODO(@Commerce): needs localization */}
+            <LineItems.Title title='Subtotal' />
+            <LineItems.Description text={`${totals.subtotal.currencySymbol}${totals.subtotal.amountFormatted}`} />
+          </LineItems.Group>
           {showCredits && (
-            <LineItems.Group>
+            <LineItems.Group variant='tertiary'>
               {/* TODO(@Commerce): needs localization */}
-              <LineItems.Title
-                title={'Credit'}
-                description={'Prorated credit for the remainder of your subscription.'}
-              />
+              <LineItems.Title title={'Prorated credit for the remainder of your subscription.'} />
               {/* TODO(@Commerce): needs localization */}
               {/* TODO(@Commerce): Replace client-side calculation with server-side calculation once data are available in the response */}
               <LineItems.Description
@@ -81,19 +86,6 @@ export const CheckoutForm = ({
               />
             </LineItems.Group>
           )}
-          <LineItems.Group
-            borderTop
-            variant='tertiary'
-          >
-            {/* TODO(@Commerce): needs localization */}
-            <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 title='Tax' />
-            <LineItems.Description text={`${totals.taxTotal.currencySymbol} ${totals.taxTotal.amountFormatted}`} />
-          </LineItems.Group>
           <LineItems.Group borderTop>
             {/* TODO(@Commerce): needs localization */}
             <LineItems.Title title={`Total Due Today`} />

From d4e538bc81e255726cd70566f16c84a80828b4b0 Mon Sep 17 00:00:00 2001
From: Keiran Flanigan <keiran@aeliox.com>
Date: Fri, 2 May 2025 11:49:07 -0500
Subject: [PATCH 2/3] changeset

---
 .changeset/stupid-animals-taste.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/stupid-animals-taste.md

diff --git a/.changeset/stupid-animals-taste.md b/.changeset/stupid-animals-taste.md
new file mode 100644
index 00000000000..88729dcb811
--- /dev/null
+++ b/.changeset/stupid-animals-taste.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Adjusts the order and layout of the checkout form's line items

From 4dd12f8edcf7546f9dc0969d809e52cfe43d38d3 Mon Sep 17 00:00:00 2001
From: Keiran Flanigan <keiran@aeliox.com>
Date: Fri, 2 May 2025 11:55:18 -0500
Subject: [PATCH 3/3] copy tweak

---
 packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx
index 2d1b4a5b5f2..b7be35a3351 100644
--- a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx
+++ b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx
@@ -78,7 +78,7 @@ export const CheckoutForm = ({
           {showCredits && (
             <LineItems.Group variant='tertiary'>
               {/* TODO(@Commerce): needs localization */}
-              <LineItems.Title title={'Prorated credit for the remainder of your subscription.'} />
+              <LineItems.Title title={'Credit for the remainder of your current subscription.'} />
               {/* TODO(@Commerce): needs localization */}
               {/* TODO(@Commerce): Replace client-side calculation with server-side calculation once data are available in the response */}
               <LineItems.Description