diff --git a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentMethodForm.test.tsx b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentMethodForm.test.tsx
index 8d824d2282..0be02e77d5 100644
--- a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentMethodForm.test.tsx
+++ b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentMethodForm.test.tsx
@@ -93,9 +93,15 @@ const mocks = {
useUpdatePaymentMethod: vi.fn(),
}
-vi.mock('services/account/useUpdatePaymentMethod', () => ({
- useUpdatePaymentMethod: () => mocks.useUpdatePaymentMethod(),
-}))
+vi.mock('services/account/useUpdatePaymentMethod', async () => {
+ const original = await vi.importActual(
+ 'services/account/useUpdatePaymentMethod'
+ )
+ return {
+ ...original,
+ useUpdatePaymentMethod: () => mocks.useUpdatePaymentMethod(),
+ }
+})
afterEach(() => {
vi.clearAllMocks()
@@ -214,7 +220,13 @@ describe('PaymentMethodForm', () => {
await user.click(screen.getByTestId('save-payment-method'))
- expect(screen.getByText(randomError)).toBeInTheDocument()
+ expect(
+ screen.getByText((content) =>
+ content.includes(
+ "There's been an error. Please try refreshing your browser"
+ )
+ )
+ ).toBeInTheDocument()
})
})
diff --git a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentMethodForm.tsx b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentMethodForm.tsx
index 5804b9ad77..c69af50d96 100644
--- a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentMethodForm.tsx
+++ b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentMethodForm.tsx
@@ -4,8 +4,14 @@ import cs from 'classnames'
import { z } from 'zod'
import { AccountDetailsSchema, BillingDetailsSchema } from 'services/account'
-import { useUpdatePaymentMethod } from 'services/account/useUpdatePaymentMethod'
+import {
+ MissingAddressError,
+ MissingEmailError,
+ MissingNameError,
+ useUpdatePaymentMethod,
+} from 'services/account/useUpdatePaymentMethod'
import { Provider } from 'shared/api/helpers'
+import A from 'ui/A'
import Button from 'ui/Button'
interface PaymentMethodFormProps {
@@ -81,7 +87,7 @@ const PaymentMethodForm = ({
}}
/>
- {showError && error?.message}
+ {showError ? getErrorMessage(error) : null}