diff --git a/packages/react-components/src/components/customers/CustomerContainer.tsx b/packages/react-components/src/components/customers/CustomerContainer.tsx
index cc4c720d..648f999e 100644
--- a/packages/react-components/src/components/customers/CustomerContainer.tsx
+++ b/packages/react-components/src/components/customers/CustomerContainer.tsx
@@ -4,6 +4,7 @@ import customerReducer, {
   getCustomerAddresses,
   getCustomerOrders,
   getCustomerPaymentSources,
+  deleteCustomerPayment,
   setCustomerEmail,
   setCustomerErrors,
   deleteCustomerAddress,
@@ -156,6 +157,17 @@ export function CustomerContainer(props: Props): JSX.Element {
       getCustomerPaymentSources: () => {
         getCustomerPaymentSources({ dispatch, order })
       },
+      deleteCustomerPayment: async ({
+        customerPaymentSourceId
+      }: {
+        customerPaymentSourceId: string
+      }) => {
+        await deleteCustomerPayment({
+          customerPaymentSourceId,
+          dispatch,
+          config
+        })
+      },
       deleteCustomerAddress: async ({
         customerAddressId
       }: {
diff --git a/packages/react-components/src/components/customers/CustomerPaymentSource.tsx b/packages/react-components/src/components/customers/CustomerPaymentSource.tsx
index e8a2047f..0627cf10 100644
--- a/packages/react-components/src/components/customers/CustomerPaymentSource.tsx
+++ b/packages/react-components/src/components/customers/CustomerPaymentSource.tsx
@@ -1,7 +1,6 @@
 import { type JSX, useEffect, useState } from "react"
 import CustomerContext from "#context/CustomerContext"
 import CustomerPaymentSourceContext from "#context/CustomerPaymentSourceContext"
-import useCommerceLayer from "#hooks/useCommerceLayer"
 import type { PaymentResource } from "#reducers/PaymentMethodReducer"
 import type { DefaultChildrenType } from "#typings/globals"
 import getCardDetails from "#utils/getCardDetails"
@@ -19,9 +18,8 @@ export function CustomerPaymentSource({
   children,
   loader = "Loading...",
 }: Props): JSX.Element {
-  const { sdkClient } = useCommerceLayer()
   const [loading, setLoading] = useState(true)
-  const { payments, getCustomerPaymentSources } = useCustomContext({
+  const { payments, deleteCustomerPayment } = useCustomContext({
     context: CustomerContext,
     contextComponentName: "CustomerContainer",
     currentComponentName: "CustomerPaymentSource",
@@ -45,13 +43,11 @@ export function CustomerPaymentSource({
         handleDeleteClick: (e: MouseEvent) => {
           e?.preventDefault()
           e?.stopPropagation()
-          const sdk = sdkClient()
-          if (sdk == null) return
-          sdk.customer_payment_sources.delete(p.id).then(() => {
-            if (getCustomerPaymentSources) {
-              getCustomerPaymentSources()
-            }
-          })
+          if (deleteCustomerPayment != null) {
+            deleteCustomerPayment({
+              customerPaymentSourceId: p.id
+            })
+          }
         },
       }
       return (
diff --git a/packages/react-components/src/context/CustomerContext.ts b/packages/react-components/src/context/CustomerContext.ts
index 999dd460..58f7456b 100644
--- a/packages/react-components/src/context/CustomerContext.ts
+++ b/packages/react-components/src/context/CustomerContext.ts
@@ -8,7 +8,8 @@ import type {
   getCustomerAddresses,
   getCustomerOrders,
   getCustomerSubscriptions,
-  setResourceTrigger
+  setResourceTrigger,
+  deleteCustomerPayment
 } from '#reducers/CustomerReducer'
 import { createContext } from 'react'
 
@@ -18,6 +19,7 @@ export type InitialCustomerContext = Partial<
     setCustomerErrors: SetCustomerErrors
     setCustomerEmail: typeof setCustomerEmail
     getCustomerPaymentSources: typeof getCustomerPaymentSources
+    deleteCustomerPayment: typeof deleteCustomerPayment
     deleteCustomerAddress: typeof deleteCustomerAddress
     getCustomerAddresses: typeof getCustomerAddresses
     createCustomerAddress: (address: TCustomerAddress) => Promise<void>
diff --git a/packages/react-components/src/reducers/CustomerReducer.ts b/packages/react-components/src/reducers/CustomerReducer.ts
index 79803705..a93350de 100644
--- a/packages/react-components/src/reducers/CustomerReducer.ts
+++ b/packages/react-components/src/reducers/CustomerReducer.ts
@@ -459,6 +459,31 @@ export async function getCustomerPayments({
   }
 }
 
+export interface DeleteCustomerPayment {
+  customerPaymentSourceId: string
+  dispatch?: Dispatch<CustomerAction>
+  config?: CommerceLayerConfig
+}
+
+export async function deleteCustomerPayment({
+  customerPaymentSourceId,
+  dispatch,
+  config,
+}: DeleteCustomerPayment): Promise<void> {
+  if (config && dispatch) {
+    try {
+      const sdk = getSdk(config)
+      await sdk.customer_payment_sources.delete(customerPaymentSourceId)
+      getCustomerPayments({
+        config,
+        dispatch
+      })
+    } catch (error) {
+      throw new Error("Couldn't delete payment source")
+    }
+  }
+}
+
 export async function getCustomerInfo({
   config,
   dispatch