diff --git a/islands/dialogs/PopAddPaymentMethodDialog.tsx b/islands/dialogs/PopAddPaymentMethodDialog.tsx
new file mode 100644
index 0000000..b61048a
--- /dev/null
+++ b/islands/dialogs/PopAddPaymentMethodDialog.tsx
@@ -0,0 +1,40 @@
+import { useState } from "preact/hooks";
+import AddPaymentMethodDialog from "./AddPaymentMethodDialog.tsx";
+
+interface PopAddPaymentMethodDialogOptions {
+  userId?: string;
+  defaultOpen?: boolean;
+}
+
+interface PopupController {
+  resolve?: (value: boolean) => void;
+}
+
+export function PopAddPaymentMethodDialog(
+  options: PopAddPaymentMethodDialogOptions = {},
+) {
+  const [popup, setPopup] = useState<PopupController | null>(() => {
+    return options.defaultOpen ? { resolve: () => {} } : null;
+  });
+
+  // Show the popup and return a Promise for the answer
+  const popAddPaymentMethod = (): Promise<boolean> => {
+    return new Promise((resolve) => {
+      setPopup({ resolve });
+    });
+  };
+
+  // Render the popup if needed
+  const popupAddPaymentMethodDialog = popup
+    ? (
+      <AddPaymentMethodDialog
+        onClose={() => {
+          globalThis.location.href = "/tenant/payment-methods?modal=off";
+        }}
+        userId={options.userId}
+      />
+    )
+    : null;
+
+  return [popAddPaymentMethod, popupAddPaymentMethodDialog] as const;
+}