diff --git a/packages/clerk-js/src/ui/components/Checkout/CheckoutPage.tsx b/packages/clerk-js/src/ui/components/Checkout/CheckoutPage.tsx
index 3f888afc149..ef8427f99af 100644
--- a/packages/clerk-js/src/ui/components/Checkout/CheckoutPage.tsx
+++ b/packages/clerk-js/src/ui/components/Checkout/CheckoutPage.tsx
@@ -1,7 +1,11 @@
-import type { __experimental_CheckoutProps, __experimental_CommerceCheckoutResource } from '@clerk/types';
+import type {
+  __experimental_CheckoutProps,
+  __experimental_CommerceCheckoutResource,
+  ClerkAPIError,
+} from '@clerk/types';
 import { useEffect } from 'react';
 
-import { Alert, Box, localizationKeys, Spinner } from '../../customizables';
+import { Alert, Box, localizationKeys, Spinner, useLocalizations } from '../../customizables';
 import { Drawer, useDrawerContext } from '../../elements';
 import { useCheckout } from '../../hooks';
 import { EmailForm } from '../UserProfile/EmailForm';
@@ -9,15 +13,18 @@ import { CheckoutComplete } from './CheckoutComplete';
 import { CheckoutForm } from './CheckoutForm';
 
 export const CheckoutPage = (props: __experimental_CheckoutProps) => {
+  const { translateError } = useLocalizations();
   const { planId, planPeriod, subscriberType, onSubscriptionComplete } = props;
   const { setIsOpen, isOpen } = useDrawerContext();
 
-  const { checkout, isLoading, invalidate, revalidate, updateCheckout, isMissingPayerEmail } = useCheckout({
+  const { checkout, isLoading, invalidate, revalidate, updateCheckout, errors } = useCheckout({
     planId,
     planPeriod,
     subscriberType,
   });
 
+  const isMissingPayerEmail = errors.some((e: ClerkAPIError) => e.code === 'missing_payer_email');
+
   const onCheckoutComplete = (newCheckout: __experimental_CommerceCheckoutResource) => {
     invalidate(); // invalidate the initial checkout on complete
     updateCheckout(newCheckout);
@@ -82,7 +89,7 @@ export const CheckoutPage = (props: __experimental_CheckoutProps) => {
           margin: 'auto',
         }}
       >
-        There was a problem, please try again later.
+        {errors[0] ? translateError(errors[0]) : 'There was a problem, please try again later.'}
       </Alert>
     </>
   );
diff --git a/packages/clerk-js/src/ui/hooks/useCheckout.ts b/packages/clerk-js/src/ui/hooks/useCheckout.ts
index 68e05ef6d2f..52bdc88c530 100644
--- a/packages/clerk-js/src/ui/hooks/useCheckout.ts
+++ b/packages/clerk-js/src/ui/hooks/useCheckout.ts
@@ -1,9 +1,6 @@
+import type { ClerkAPIResponseError } from '@clerk/shared';
 import { useClerk, useOrganization, useUser } from '@clerk/shared/react';
-import type {
-  __experimental_CheckoutProps,
-  __experimental_CommerceCheckoutResource,
-  ClerkAPIError,
-} from '@clerk/types';
+import type { __experimental_CheckoutProps, __experimental_CommerceCheckoutResource } from '@clerk/types';
 import { useCallback, useEffect, useState } from 'react';
 
 import { useFetch } from './useFetch';
@@ -20,7 +17,7 @@ export const useCheckout = (props: __experimental_CheckoutProps) => {
     isLoading,
     invalidate,
     revalidate,
-    error,
+    error: _error,
   } = useFetch(
     __experimental_commerce?.__experimental_billing.startCheckout,
     {
@@ -32,6 +29,8 @@ export const useCheckout = (props: __experimental_CheckoutProps) => {
     `commerce-checkout-${user?.id}`,
   );
 
+  const error = _error as ClerkAPIResponseError;
+
   const updateCheckout = useCallback((newCheckout: __experimental_CommerceCheckoutResource) => {
     setCurrentCheckout(newCheckout);
   }, []);
@@ -48,6 +47,6 @@ export const useCheckout = (props: __experimental_CheckoutProps) => {
     isLoading,
     invalidate,
     revalidate,
-    isMissingPayerEmail: error?.errors.some((e: ClerkAPIError) => e.code === 'missing_payer_email'),
+    errors: error.errors,
   };
 };