diff --git a/src/pages/PlanPage/PlanPage.jsx b/src/pages/PlanPage/PlanPage.jsx
index 2608b9efb9..97ce11ffae 100644
--- a/src/pages/PlanPage/PlanPage.jsx
+++ b/src/pages/PlanPage/PlanPage.jsx
@@ -54,6 +54,7 @@ function PlanPage() {
         stripe={stripePromise}
         options={{
           ...StripeAppearance(isDarkMode),
+          // mode and currency are required for the PaymentElement
           mode: 'setup',
           currency: 'usd',
         }}
diff --git a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/Address/AddressCard.test.tsx b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/Address/AddressCard.test.tsx
index 5142eafd5c..14372d9175 100644
--- a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/Address/AddressCard.test.tsx
+++ b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/Address/AddressCard.test.tsx
@@ -224,7 +224,7 @@ describe('AddressCard', () => {
         { wrapper }
       )
 
-      expect(screen.getByText('Cardholder name')).toBeInTheDocument()
+      expect(screen.getByText('Full name')).toBeInTheDocument()
       expect(screen.getByText('N/A')).toBeInTheDocument()
       expect(screen.getByText('Billing address')).toBeInTheDocument()
       expect(screen.queryByText(/null/)).not.toBeInTheDocument()
@@ -241,7 +241,7 @@ describe('AddressCard', () => {
         { wrapper }
       )
 
-      expect(screen.getByText(/Cardholder name/)).toBeInTheDocument()
+      expect(screen.getByText(/Full name/)).toBeInTheDocument()
       expect(screen.getByText(/Bob Smith/)).toBeInTheDocument()
     })
   })
diff --git a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/Address/AddressCard.tsx b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/Address/AddressCard.tsx
index 377a7a3c9e..6280b6dbe5 100644
--- a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/Address/AddressCard.tsx
+++ b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/Address/AddressCard.tsx
@@ -40,7 +40,7 @@ function AddressCard({
       {!isFormOpen && (
         <>
           <div className="flex justify-between">
-            <h4 className="font-semibold">Cardholder name</h4>
+            <h4 className="font-semibold">Full name</h4>
             <A
               variant="semibold"
               onClick={() => setIsFormOpen(true)}
diff --git a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/BankInformation.tsx b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/BankInformation.tsx
new file mode 100644
index 0000000000..f73afae9f8
--- /dev/null
+++ b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/BankInformation.tsx
@@ -0,0 +1,26 @@
+import { z } from 'zod'
+
+import bankLogo from 'assets/billing/bank.svg'
+import { SubscriptionDetailSchema } from 'services/account'
+
+interface BankInformationProps {
+  subscriptionDetail: z.infer<typeof SubscriptionDetailSchema>
+}
+function BankInformation({ subscriptionDetail }: BankInformationProps) {
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex gap-1">
+        <img src={bankLogo} alt="bank logo" />
+        <div className="ml-1 flex flex-col self-center">
+          <b>
+            {subscriptionDetail?.defaultPaymentMethod?.usBankAccount?.bankName}
+            &nbsp;••••&nbsp;
+            {subscriptionDetail?.defaultPaymentMethod?.usBankAccount?.last4}
+          </b>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default BankInformation
diff --git a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentCard.jsx b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentCard.jsx
index 83c001d8a1..a011671d16 100644
--- a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentCard.jsx
+++ b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentCard.jsx
@@ -6,11 +6,13 @@ import A from 'ui/A'
 import Button from 'ui/Button'
 import Icon from 'ui/Icon'
 
+import BankInformation from './BankInformation'
 import CardInformation from './CardInformation'
 import PaymentMethodForm from './PaymentMethodForm'
 function PaymentCard({ subscriptionDetail, provider, owner }) {
   const [isFormOpen, setIsFormOpen] = useState(false)
   const card = subscriptionDetail?.defaultPaymentMethod?.card
+  const usBankAccount = subscriptionDetail?.defaultPaymentMethod?.usBankAccount
 
   return (
     <div className="flex flex-col gap-2 border-t p-4">
@@ -20,7 +22,7 @@ function PaymentCard({ subscriptionDetail, provider, owner }) {
           <A
             variant="semibold"
             onClick={() => setIsFormOpen(true)}
-            hook="edit-card"
+            hook="edit-payment-method"
           >
             Edit <Icon name="chevronRight" size="sm" variant="solid" />
           </A>
@@ -31,14 +33,17 @@ function PaymentCard({ subscriptionDetail, provider, owner }) {
           provider={provider}
           owner={owner}
           closeForm={() => setIsFormOpen(false)}
+          subscriptionDetail={subscriptionDetail}
         />
       ) : card ? (
         <CardInformation card={card} subscriptionDetail={subscriptionDetail} />
+      ) : usBankAccount ? (
+        <BankInformation subscriptionDetail={subscriptionDetail} />
       ) : (
         <div className="flex flex-col gap-4 text-ds-gray-quinary">
           <p className="mt-4">
-            No credit card set. Please contact support if you think it’s an
-            error or set it yourself.
+            No payment method set. Please contact support if you think it&apos;s
+            an error or set it yourself.
           </p>
           <div className="flex self-start">
             <Button
diff --git a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentCard.test.jsx b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentCard.test.jsx
index b8021a7cb6..d6ccb2f6d3 100644
--- a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentCard.test.jsx
+++ b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentCard.test.jsx
@@ -1,3 +1,4 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
@@ -6,18 +7,37 @@ import { Plans } from 'shared/utils/billing'
 
 import PaymentCard from './PaymentCard'
 
+const queryClient = new QueryClient()
+
 const mocks = vi.hoisted(() => ({
-  useUpdateCard: vi.fn(),
+  useUpdatePaymentMethod: vi.fn(),
+  useCreateStripeSetupIntent: vi.fn(),
 }))
 
-vi.mock('services/account', async () => {
-  const actual = await vi.importActual('services/account')
+vi.mock('services/account/useUpdatePaymentMethod', async () => {
+  const actual = await vi.importActual(
+    'services/account/useUpdatePaymentMethod'
+  )
   return {
     ...actual,
-    useUpdateCard: mocks.useUpdateCard,
+    useUpdatePaymentMethod: mocks.useUpdatePaymentMethod,
   }
 })
 
+vi.mock('services/account/useCreateStripeSetupIntent', async () => {
+  const actual = await vi.importActual(
+    'services/account/useCreateStripeSetupIntent'
+  )
+  return {
+    ...actual,
+    useCreateStripeSetupIntent: mocks.useCreateStripeSetupIntent,
+  }
+})
+
+afterEach(() => {
+  vi.clearAllMocks()
+})
+
 const subscriptionDetail = {
   defaultPaymentMethod: {
     card: {
@@ -35,7 +55,9 @@ const subscriptionDetail = {
 }
 
 const wrapper = ({ children }) => (
-  <ThemeContextProvider>{children}</ThemeContextProvider>
+  <QueryClientProvider client={queryClient}>
+    <ThemeContextProvider>{children}</ThemeContextProvider>
+  </QueryClientProvider>
 )
 
 // mocking all the stripe components; and trusting the library :)
@@ -48,9 +70,11 @@ vi.mock('@stripe/react-stripe-js', () => {
   return {
     useElements: () => ({
       getElement: vi.fn(),
+      submit: vi.fn(),
     }),
     useStripe: () => ({}),
-    CardElement: makeFakeComponent('CardElement'),
+    PaymentElement: makeFakeComponent('PaymentElement'),
+    Elements: makeFakeComponent('Elements'),
   }
 })
 
@@ -64,20 +88,20 @@ describe('PaymentCard', () => {
   describe(`when the user doesn't have any subscriptionDetail`, () => {
     // NOTE: This test is misleading because we hide this component from a higher level in
     // BillingDetails.tsx if there is no subscriptionDetail
-    it('renders the set card message', () => {
+    it('renders the set payment method message', () => {
       render(
         <PaymentCard subscriptionDetail={null} provider="gh" owner="codecov" />
       )
 
       expect(
         screen.getByText(
-          /No credit card set. Please contact support if you think it’s an error or set it yourself./
+          /No payment method set. Please contact support if you think it's an error or set it yourself./
         )
       ).toBeInTheDocument()
     })
   })
 
-  describe(`when the user doesn't have any card`, () => {
+  describe(`when the user doesn't have any payment method`, () => {
     it('renders an error message', () => {
       render(
         <PaymentCard
@@ -93,7 +117,7 @@ describe('PaymentCard', () => {
 
       expect(
         screen.getByText(
-          /No credit card set. Please contact support if you think it’s an error or set it yourself./
+          /No payment method set. Please contact support if you think it's an error or set it yourself./
         )
       ).toBeInTheDocument()
     })
@@ -113,7 +137,7 @@ describe('PaymentCard', () => {
           { wrapper }
         )
 
-        mocks.useUpdateCard.mockReturnValue({
+        mocks.useUpdatePaymentMethod.mockReturnValue({
           mutate: () => null,
           isLoading: false,
         })
@@ -136,15 +160,13 @@ describe('PaymentCard', () => {
           { wrapper }
         )
 
-        mocks.useUpdateCard.mockReturnValue({
+        mocks.useUpdatePaymentMethod.mockReturnValue({
           mutate: () => null,
           isLoading: false,
         })
         await user.click(screen.getByTestId('open-modal'))
 
-        expect(
-          screen.getByRole('button', { name: /update/i })
-        ).toBeInTheDocument()
+        expect(screen.getByTestId('save-payment-method')).toBeInTheDocument()
       })
     })
   })
@@ -199,9 +221,9 @@ describe('PaymentCard', () => {
   describe('when the user clicks on Edit card', () => {
     it(`doesn't render the card anymore`, async () => {
       const { user } = setup()
-      const updateCard = vi.fn()
-      mocks.useUpdateCard.mockReturnValue({
-        mutate: updateCard,
+      const updatePaymentMethod = vi.fn()
+      mocks.useUpdatePaymentMethod.mockReturnValue({
+        mutate: updatePaymentMethod,
         isLoading: false,
       })
 
@@ -213,16 +235,16 @@ describe('PaymentCard', () => {
         />,
         { wrapper }
       )
-      await user.click(screen.getByTestId('edit-card'))
+      await user.click(screen.getByTestId('edit-payment-method'))
 
       expect(screen.queryByText(/Visa/)).not.toBeInTheDocument()
     })
 
     it('renders the form', async () => {
       const { user } = setup()
-      const updateCard = vi.fn()
-      mocks.useUpdateCard.mockReturnValue({
-        mutate: updateCard,
+      const updatePaymentMethod = vi.fn()
+      mocks.useUpdatePaymentMethod.mockReturnValue({
+        mutate: updatePaymentMethod,
         isLoading: false,
       })
       render(
@@ -233,21 +255,23 @@ describe('PaymentCard', () => {
         />,
         { wrapper }
       )
-      await user.click(screen.getByTestId('edit-card'))
+      await user.click(screen.getByTestId('edit-payment-method'))
 
-      expect(
-        screen.getByRole('button', { name: /update/i })
-      ).toBeInTheDocument()
+      expect(screen.getByTestId('save-payment-method')).toBeInTheDocument()
     })
 
     describe('when submitting', () => {
       it('calls the service to update the card', async () => {
         const { user } = setup()
-        const updateCard = vi.fn()
-        mocks.useUpdateCard.mockReturnValue({
-          mutate: updateCard,
+        const updatePaymentMethod = vi.fn()
+        mocks.useUpdatePaymentMethod.mockReturnValue({
+          mutate: updatePaymentMethod,
           isLoading: false,
         })
+        mocks.useCreateStripeSetupIntent.mockReturnValue({
+          data: { clientSecret: 'test-secret' },
+        })
+
         render(
           <PaymentCard
             subscriptionDetail={subscriptionDetail}
@@ -256,17 +280,17 @@ describe('PaymentCard', () => {
           />,
           { wrapper }
         )
-        await user.click(screen.getByTestId('edit-card'))
-        await user.click(screen.queryByRole('button', { name: /update/i }))
+        await user.click(screen.getByTestId('edit-payment-method'))
+        await user.click(screen.getByTestId('save-payment-method'))
 
-        expect(updateCard).toHaveBeenCalled()
+        expect(updatePaymentMethod).toHaveBeenCalled()
       })
     })
 
     describe('when the user clicks on cancel', () => {
       it(`doesn't render the form anymore`, async () => {
         const { user } = setup()
-        mocks.useUpdateCard.mockReturnValue({
+        mocks.useUpdatePaymentMethod.mockReturnValue({
           mutate: vi.fn(),
           isLoading: false,
         })
@@ -279,11 +303,11 @@ describe('PaymentCard', () => {
           { wrapper }
         )
 
-        await user.click(screen.getByTestId('edit-card'))
-        await user.click(screen.getByRole('button', { name: /Cancel/ }))
+        await user.click(screen.getByTestId('edit-payment-method'))
+        await user.click(screen.getByTestId('cancel-payment'))
 
         expect(
-          screen.queryByRole('button', { name: /save/i })
+          screen.queryByTestId('update-payment-method')
         ).not.toBeInTheDocument()
       })
     })
@@ -293,7 +317,7 @@ describe('PaymentCard', () => {
     it('renders the error', async () => {
       const { user } = setup()
       const randomError = 'not rich enough'
-      mocks.useUpdateCard.mockReturnValue({
+      mocks.useUpdatePaymentMethod.mockReturnValue({
         mutate: vi.fn(),
         error: { message: randomError },
       })
@@ -306,7 +330,7 @@ describe('PaymentCard', () => {
         { wrapper }
       )
 
-      await user.click(screen.getByTestId('edit-card'))
+      await user.click(screen.getByTestId('edit-payment-method'))
 
       expect(screen.getByText(randomError)).toBeInTheDocument()
     })
@@ -315,7 +339,7 @@ describe('PaymentCard', () => {
   describe('when the form is loading', () => {
     it('has the error and save button disabled', async () => {
       const { user } = setup()
-      mocks.useUpdateCard.mockReturnValue({
+      mocks.useUpdatePaymentMethod.mockReturnValue({
         mutate: vi.fn(),
         isLoading: true,
       })
@@ -327,10 +351,10 @@ describe('PaymentCard', () => {
         />,
         { wrapper }
       )
-      await user.click(screen.getByTestId('edit-card'))
+      await user.click(screen.getByTestId('edit-payment-method'))
 
-      expect(screen.queryByRole('button', { name: /update/i })).toBeDisabled()
-      expect(screen.queryByRole('button', { name: /cancel/i })).toBeDisabled()
+      expect(screen.getByTestId('save-payment-method')).toBeDisabled()
+      expect(screen.getByTestId('cancel-payment')).toBeDisabled()
     })
   })
 })
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 e77927c042..62c30b5901 100644
--- a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentMethodForm.test.tsx
+++ b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentMethodForm.test.tsx
@@ -79,8 +79,8 @@ afterEach(() => {
 })
 
 describe('PaymentMethodForm', () => {
-  describe('when the user clicks on Edit payment method', () => {
-    it(`doesn't render the payment method anymore`, async () => {
+  describe('when the user opens the Payment Method Form', () => {
+    it(`doesn't render the View payment method anymore`, async () => {
       const user = userEvent.setup()
       const updatePaymentMethod = vi.fn()
       mocks.useUpdatePaymentMethod.mockReturnValue({
diff --git a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentMethodForm.tsx b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentMethodForm.tsx
index b6283a7edc..a9c36ad727 100644
--- a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentMethodForm.tsx
+++ b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentMethodForm.tsx
@@ -1,9 +1,10 @@
 import { PaymentElement, useElements } from '@stripe/react-stripe-js'
+import { StripePaymentElement } from '@stripe/stripe-js'
 import cs from 'classnames'
 import { useState } from 'react'
 import { z } from 'zod'
 
-import { SubscriptionDetailSchema } from 'services/account'
+import { stripeAddress, SubscriptionDetailSchema } from 'services/account'
 import { useUpdatePaymentMethod } from 'services/account/useUpdatePaymentMethod'
 import { Provider } from 'shared/api/helpers'
 import Button from 'ui/Button'
@@ -21,7 +22,7 @@ const PaymentMethodForm = ({
   owner,
   subscriptionDetail,
 }: PaymentMethodFormProps) => {
-  const [errorState, _] = useState('')
+  const [errorState, setErrorState] = useState('')
   const elements = useElements()
 
   const {
@@ -38,6 +39,9 @@ const PaymentMethodForm = ({
     email:
       subscriptionDetail?.defaultPaymentMethod?.billingDetails?.email ||
       undefined,
+    address:
+      stripeAddress(subscriptionDetail?.defaultPaymentMethod?.billingDetails) ||
+      undefined,
   })
 
   async function submit(e: React.FormEvent) {
@@ -49,7 +53,9 @@ const PaymentMethodForm = ({
 
     elements.submit()
 
-    const paymentElement = elements.getElement(PaymentElement)
+    const paymentElement = elements.getElement(
+      PaymentElement
+    ) as StripePaymentElement
 
     updatePaymentMethod(paymentElement, {
       onSuccess: async () => {
@@ -65,6 +71,7 @@ const PaymentMethodForm = ({
       <div className={cs('flex flex-col gap-3')}>
         <div className="mt-2 flex flex-col gap-2">
           <PaymentElement
+            onChange={(e) => setErrorState(e?.value?.type || '')}
             options={{
               layout: 'tabs',
               fields: {
@@ -80,11 +87,10 @@ const PaymentMethodForm = ({
           </p>
           <div className="mb-8 mt-4 flex gap-1">
             <Button
-              hook="update-payment-method"
+              hook="save-payment-method"
               type="submit"
               variant="primary"
               disabled={isLoading}
-              to={undefined}
             >
               Save
             </Button>
@@ -94,7 +100,6 @@ const PaymentMethodForm = ({
               variant="plain"
               disabled={isLoading}
               onClick={closeForm}
-              to={undefined}
             >
               Cancel
             </Button>
diff --git a/src/services/account/index.ts b/src/services/account/index.ts
index 4780cda4a0..71d1d41ddd 100644
--- a/src/services/account/index.ts
+++ b/src/services/account/index.ts
@@ -3,6 +3,7 @@ export * from './propTypes'
 export * from './useAccountDetails'
 export * from './useAutoActivate'
 export * from './useCancelPlan'
+export * from './useCreateStripeSetupIntent'
 export * from './useEraseAccount'
 export * from './useInvoice'
 export * from './usePlanData'
diff --git a/src/services/account/useAccountDetails.ts b/src/services/account/useAccountDetails.ts
index d3fb95b85b..a9632d1fa9 100644
--- a/src/services/account/useAccountDetails.ts
+++ b/src/services/account/useAccountDetails.ts
@@ -213,3 +213,20 @@ export function useAccountDetails({
     ...opts,
   })
 }
+
+export const stripeAddress = (
+  billingDetails: z.infer<typeof BillingDetailsSchema> | null | undefined
+) => {
+  const address = billingDetails?.address
+  if (!address) return undefined
+
+  return {
+    line1: address.line1 || null,
+    line2: address.line2 || null,
+    city: address.city || null,
+    state: address.state || null,
+    // eslint-disable-next-line camelcase
+    postal_code: address.postalCode || null,
+    country: address.country || null,
+  }
+}
diff --git a/src/services/account/useUpdatePaymentMethod.ts b/src/services/account/useUpdatePaymentMethod.ts
index 8cdb844901..abef288be6 100644
--- a/src/services/account/useUpdatePaymentMethod.ts
+++ b/src/services/account/useUpdatePaymentMethod.ts
@@ -1,4 +1,5 @@
-import { PaymentElement, useElements, useStripe } from '@stripe/react-stripe-js'
+import { useElements, useStripe } from '@stripe/react-stripe-js'
+import { Address, StripePaymentElement } from '@stripe/stripe-js'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 
 import config from 'config'
@@ -11,7 +12,9 @@ import { useCreateStripeSetupIntent } from './useCreateStripeSetupIntent'
 interface useUpdatePaymentMethodProps {
   provider: Provider
   owner: string
+  name?: string
   email?: string
+  address?: Address
 }
 
 interface useUpdatePaymentMethodReturn {
@@ -19,7 +22,7 @@ interface useUpdatePaymentMethodReturn {
   error: null | Error
   isLoading: boolean
   mutate: (
-    variables: typeof PaymentElement,
+    variables: StripePaymentElement | null,
     data?: { onSuccess?: () => void }
   ) => void
   data: undefined | unknown
@@ -38,7 +41,9 @@ function getPathAccountDetails({
 export function useUpdatePaymentMethod({
   provider,
   owner,
+  name,
   email,
+  address,
 }: useUpdatePaymentMethodProps): useUpdatePaymentMethodReturn {
   const stripe = useStripe()
   const elements = useElements()
@@ -62,7 +67,9 @@ export function useUpdatePaymentMethod({
             payment_method_data: {
               // eslint-disable-next-line camelcase
               billing_details: {
+                name: name,
                 email: email,
+                address: address,
               },
             },
             // eslint-disable-next-line camelcase