From f4e6bec4e857d802a7c7fc7a573a224c026f54d0 Mon Sep 17 00:00:00 2001
From: Keiran Flanigan <keiran@aeliox.com>
Date: Wed, 16 Apr 2025 15:53:30 -0700
Subject: [PATCH] chore(clerk-js): Improve checkout error handling

---
 .changeset/rude-mirrors-jog.md                |  6 +++++
 .../ui/components/Checkout/CheckoutForm.tsx   | 24 +++++++------------
 .../PricingTable/SubscriptionDetailDrawer.tsx |  4 ++--
 3 files changed, 17 insertions(+), 17 deletions(-)
 create mode 100644 .changeset/rude-mirrors-jog.md

diff --git a/.changeset/rude-mirrors-jog.md b/.changeset/rude-mirrors-jog.md
new file mode 100644
index 00000000000..33de0533d3f
--- /dev/null
+++ b/.changeset/rude-mirrors-jog.md
@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Chore: improve checkout error handling
diff --git a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx
index 4911ccaad2e..03478bd8ecf 100644
--- a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx
+++ b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx
@@ -109,17 +109,15 @@ const CheckoutFormElements = ({
   const { data: paymentSources } = data || { data: [] };
 
   const confirmCheckout = async ({ paymentSourceId }: { paymentSourceId: string }) => {
-    return checkout
-      .confirm({
+    try {
+      const newCheckout = await checkout.confirm({
         paymentSourceId,
         ...(subscriberType === 'org' ? { orgId: organization?.id } : {}),
-      })
-      .then(newCheckout => {
-        onCheckoutComplete(newCheckout);
-      })
-      .catch(error => {
-        throw error;
       });
+      onCheckoutComplete(newCheckout);
+    } catch (error) {
+      handleError(error, [], setSubmitError);
+    }
   };
 
   const onPaymentSourceSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
@@ -130,17 +128,13 @@ const CheckoutFormElements = ({
     const data = new FormData(e.currentTarget);
     const paymentSourceId = data.get('payment_source_id') as string;
 
-    try {
-      await confirmCheckout({ paymentSourceId });
-    } catch (error) {
-      handleError(error, [], setSubmitError);
-    } finally {
-      setIsSubmitting(false);
-    }
+    await confirmCheckout({ paymentSourceId });
+    setIsSubmitting(false);
   };
 
   const onAddPaymentSourceSuccess = async (paymentSource: __experimental_CommercePaymentSourceResource) => {
     await confirmCheckout({ paymentSourceId: paymentSource.id });
+    setIsSubmitting(false);
   };
 
   return (
diff --git a/packages/clerk-js/src/ui/components/PricingTable/SubscriptionDetailDrawer.tsx b/packages/clerk-js/src/ui/components/PricingTable/SubscriptionDetailDrawer.tsx
index a3e8e316580..b17cdfd1bc5 100644
--- a/packages/clerk-js/src/ui/components/PricingTable/SubscriptionDetailDrawer.tsx
+++ b/packages/clerk-js/src/ui/components/PricingTable/SubscriptionDetailDrawer.tsx
@@ -342,7 +342,7 @@ const Header = React.forwardRef<HTMLDivElement, HeaderProps>((props, ref) => {
                   <Badge
                     elementDescriptor={descriptors.pricingTableCardBadge}
                     localizationKey={localizationKeys('badge__currentPlan')}
-                    colorScheme={'primary'}
+                    colorScheme={'secondary'}
                   />
                 ) : (
                   <Badge
@@ -350,7 +350,7 @@ const Header = React.forwardRef<HTMLDivElement, HeaderProps>((props, ref) => {
                     localizationKey={localizationKeys('badge__startsAt', {
                       date: subscription?.periodStart,
                     })}
-                    colorScheme={'secondary'}
+                    colorScheme={'primary'}
                   />
                 )}
               </Span>