diff --git a/packages/server/src/api/controllers/PaymentServices/PaymentServicesController.ts b/packages/server/src/api/controllers/PaymentServices/PaymentServicesController.ts
index dc3126db8..8d02eaffa 100644
--- a/packages/server/src/api/controllers/PaymentServices/PaymentServicesController.ts
+++ b/packages/server/src/api/controllers/PaymentServices/PaymentServicesController.ts
@@ -34,6 +34,12 @@ export class PaymentServicesController extends BaseController {
       this.validationResult,
       asyncMiddleware(this.updatePaymentMethod.bind(this))
     );
+    router.delete(
+      '/:paymentMethodId',
+      [param('paymentMethodId').exists()],
+      this.validationResult,
+      this.deletePaymentMethod.bind(this)
+    );
 
     return router;
   }
@@ -141,4 +147,33 @@ export class PaymentServicesController extends BaseController {
       next(error);
     }
   }
+
+  /**
+   * Deletes the given payment method.
+   * @param {Request<{ paymentMethodId: number }>} req - Request.
+   * @param {Response} res - Response.
+   * @param {NextFunction} next - Next function.
+   * @return {Promise<Response | void>}
+   */
+  private async deletePaymentMethod(
+    req: Request<{ paymentMethodId: number }>,
+    res: Response,
+    next: NextFunction
+  ) {
+    const { tenantId } = req;
+    const { paymentMethodId } = req.params;
+
+    try {
+      await this.paymentServicesApp.deletePaymentMethod(
+        tenantId,
+        paymentMethodId
+      );
+      return res.status(204).send({
+        id: paymentMethodId,
+        message: 'The payment method has been deleted.',
+      });
+    } catch (error) {
+      next(error);
+    }
+  }
 }
diff --git a/packages/webapp/src/containers/Preferences/PaymentMethods/PreferencesPaymentMethodsPage.tsx b/packages/webapp/src/containers/Preferences/PaymentMethods/PreferencesPaymentMethodsPage.tsx
index 8ca2c3302..b23bc278a 100644
--- a/packages/webapp/src/containers/Preferences/PaymentMethods/PreferencesPaymentMethodsPage.tsx
+++ b/packages/webapp/src/containers/Preferences/PaymentMethods/PreferencesPaymentMethodsPage.tsx
@@ -124,10 +124,11 @@ function StripePaymentMethod() {
           )}
         </Group>
         <Group spacing={10}>
-          <Button small onClick={handleEditBtnClick}>
-            Edit
-          </Button>
-
+          {isAccountActive && (
+            <Button small onClick={handleEditBtnClick}>
+              Edit
+            </Button>
+          )}
           {!isAccountCreated && (
             <Button intent={Intent.PRIMARY} small onClick={handleSetUpBtnClick}>
               Set it Up
diff --git a/packages/webapp/src/hooks/query/payment-methods.ts b/packages/webapp/src/hooks/query/payment-methods.ts
index cb3d7da24..e796fcbef 100644
--- a/packages/webapp/src/hooks/query/payment-methods.ts
+++ b/packages/webapp/src/hooks/query/payment-methods.ts
@@ -20,7 +20,7 @@ export const useDeletePaymentMethod = (
   return useMutation<void, Error, DeletePaymentMethodValues>(
     ({ paymentMethodId }) => {
       return apiRequest
-        .delete(`/payment-methods/${paymentMethodId}`)
+        .delete(`/payment-services/${paymentMethodId}`)
         .then((res) => res.data);
     },
     { ...options },
diff --git a/packages/webapp/src/hooks/state/dashboard.tsx b/packages/webapp/src/hooks/state/dashboard.tsx
index c2b246999..dadcc9666 100644
--- a/packages/webapp/src/hooks/state/dashboard.tsx
+++ b/packages/webapp/src/hooks/state/dashboard.tsx
@@ -91,9 +91,11 @@ export const useDrawerActions = () => {
 };
 
 export const useAlertActions = () => {
+  const dispatch = useDispatch();
+
   return {
-    openAlert: useDispatchAction(openAlert),
-    closeAlert: useDispatchAction(closeAlert),
+    openAlert: (name, payload) => dispatch(openAlert(name, payload)),
+    closeAlert: (name, payload) => dispatch(closeAlert(name, payload)),
   };
 };