diff --git a/package-lock.json b/package-lock.json
index 257f5fa3..4f685352 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "easy-invoice",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "easy-invoice",
-      "version": "0.2.0",
+      "version": "0.2.2",
       "license": "MIT",
       "dependencies": {
         "@hookform/resolvers": "^3.9.1",
@@ -47,6 +47,7 @@
         "tailwind-merge": "^2.5.4",
         "tailwindcss-animate": "^1.0.7",
         "ulid": "^2.3.0",
+        "validator": "^13.12.0",
         "viem": "^2.21.48",
         "zod": "^3.23.8"
       },
@@ -57,6 +58,7 @@
         "@types/pg": "^8.11.10",
         "@types/react": "^18",
         "@types/react-dom": "^18",
+        "@types/validator": "^13.12.2",
         "dotenv-cli": "^7.3.0",
         "husky": "^9.1.7",
         "lint-staged": "^15.4.3",
@@ -3348,6 +3350,13 @@
       "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
       "license": "MIT"
     },
+    "node_modules/@types/validator": {
+      "version": "13.12.2",
+      "resolved": "https://registry.npmjs.org/@types/validator/-/validator-13.12.2.tgz",
+      "integrity": "sha512-6SlHBzUW8Jhf3liqrGGXyTJSIFe4nqlJ5A5KaMZ2l/vbM3Wh3KSybots/wfWVzNLK4D1NZluDlSQIbIEPx6oyA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@walletconnect/core": {
       "version": "2.18.0",
       "resolved": "https://registry.npmjs.org/@walletconnect/core/-/core-2.18.0.tgz",
@@ -7689,6 +7698,15 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "license": "MIT"
     },
+    "node_modules/validator": {
+      "version": "13.12.0",
+      "resolved": "https://registry.npmjs.org/validator/-/validator-13.12.0.tgz",
+      "integrity": "sha512-c1Q0mCiPlgdTVVVIJIrBuxNicYE+t/7oKeI9MWLj3fh/uq2Pxh/3eeWbVZ4OcGW1TUf53At0njHw5SMdA3tmMg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/valtio": {
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/valtio/-/valtio-1.13.2.tgz",
diff --git a/package.json b/package.json
index b6a49b48..f021f5d0 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "easy-invoice",
   "description": "A Request Network demo app for easy invoice creation using Request API",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "license": "MIT",
   "scripts": {
     "dev": "chmod +x dev/dev-startup.sh && ./dev/dev-startup.sh ",
@@ -56,6 +56,7 @@
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
     "ulid": "^2.3.0",
+    "validator": "^13.12.0",
     "viem": "^2.21.48",
     "zod": "^3.23.8"
   },
@@ -66,6 +67,7 @@
     "@types/pg": "^8.11.10",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/validator": "^13.12.2",
     "dotenv-cli": "^7.3.0",
     "husky": "^9.1.7",
     "lint-staged": "^15.4.3",
diff --git a/src/app/direct-payment/page.tsx b/src/app/direct-payment/page.tsx
new file mode 100644
index 00000000..ba4ea16b
--- /dev/null
+++ b/src/app/direct-payment/page.tsx
@@ -0,0 +1,41 @@
+import { BackgroundWrapper } from "@/components/background-wrapper";
+import { DirectPayment } from "@/components/direct-payment";
+import { Footer } from "@/components/footer";
+import { Header } from "@/components/header";
+import { getCurrentSession } from "@/server/auth";
+import type { Metadata } from "next";
+import { redirect } from "next/navigation";
+
+export const metadata: Metadata = {
+  title: "Direct Payment | Easy Invoice",
+  description: "Send payments directly without creating a request first",
+};
+
+export default async function DirectPaymentPage() {
+  const { user } = await getCurrentSession();
+
+  // Redirect to home if not logged in
+  if (!user) {
+    redirect("/");
+  }
+
+  return (
+    <BackgroundWrapper
+      topGradient={{ from: "blue-100", to: "indigo-200" }}
+      bottomGradient={{ from: "zinc-100", to: "zinc-200" }}
+    >
+      <Header user={user} />
+      <main className="flex-grow flex flex-col max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 z-10">
+        <h1 className="mb-2 text-4xl font-bold tracking-tight">
+          Direct Payment
+        </h1>
+        <p className="mb-8 text-lg text-muted-foreground">
+          Send payments quickly without having to create a request first.
+        </p>
+
+        <DirectPayment />
+      </main>
+      <Footer />
+    </BackgroundWrapper>
+  );
+}
diff --git a/src/components/background-wrapper.tsx b/src/components/background-wrapper.tsx
index 18d14300..a3642ff7 100644
--- a/src/components/background-wrapper.tsx
+++ b/src/components/background-wrapper.tsx
@@ -23,17 +23,48 @@ export function BackgroundWrapper({
     to: "zinc-200",
   },
 }: BackgroundWrapperProps) {
+  // Convert Tailwind color names to CSS variables or hex values
+  const getTailwindColor = (colorName: string): string => {
+    const colors: Record<string, string> = {
+      // Orange colors
+      "orange-100": "#ffedd5",
+      "orange-200": "#fed7aa",
+
+      // Blue colors
+      "blue-100": "#dbeafe",
+      "blue-200": "#bfdbfe",
+
+      // Indigo colors
+      "indigo-100": "#e0e7ff",
+      "indigo-200": "#c7d2fe",
+
+      // Zinc colors
+      "zinc-100": "#f4f4f5",
+      "zinc-200": "#e4e4e7",
+
+      // Add any other colors you need here
+    };
+
+    return colors[colorName] || "#f4f4f5"; // Default to zinc-100 if color not found
+  };
+
   return (
     <div className="min-h-screen relative overflow-hidden bg-[#FAFAFA]">
       {/* Decorative elements */}
       <div className="absolute top-0 right-0 w-[600px] h-[600px] -translate-y-1/2 translate-x-1/2">
         <div
-          className={`w-full h-full rounded-full bg-gradient-to-br from-${topGradient.from} to-${topGradient.to} opacity-30 blur-3xl`}
+          className="w-full h-full rounded-full opacity-30 blur-3xl"
+          style={{
+            background: `linear-gradient(to bottom right, ${getTailwindColor(topGradient.from)}, ${getTailwindColor(topGradient.to)})`,
+          }}
         />
       </div>
       <div className="absolute bottom-0 left-0 w-[600px] h-[600px] translate-y-1/2 -translate-x-1/2">
         <div
-          className={`w-full h-full rounded-full bg-gradient-to-tr from-${bottomGradient.from} to-${bottomGradient.to} opacity-30 blur-3xl`}
+          className="w-full h-full rounded-full opacity-30 blur-3xl"
+          style={{
+            background: `linear-gradient(to top right, ${getTailwindColor(bottomGradient.from)}, ${getTailwindColor(bottomGradient.to)})`,
+          }}
         />
       </div>
 
diff --git a/src/components/direct-payment.tsx b/src/components/direct-payment.tsx
new file mode 100644
index 00000000..89ec13ee
--- /dev/null
+++ b/src/components/direct-payment.tsx
@@ -0,0 +1,445 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  useAppKit,
+  useAppKitAccount,
+  useAppKitProvider,
+} from "@reown/appkit/react";
+import { ethers } from "ethers";
+import {
+  ArrowRight,
+  CheckCircle,
+  CreditCard,
+  Loader2,
+  LogOut,
+  Send,
+  Wallet,
+  X,
+} from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  INVOICE_CURRENCIES,
+  type InvoiceCurrency,
+  type PaymentCurrency,
+  formatCurrencyLabel,
+  getPaymentCurrenciesForInvoice,
+} from "@/lib/currencies";
+import {
+  type PaymentFormValues,
+  paymentFormSchema,
+} from "@/lib/schemas/payment";
+import { api } from "@/trpc/react";
+
+export function DirectPayment() {
+  const { mutateAsync: pay } = api.payment.pay.useMutation();
+
+  const [paymentStatus, setPaymentStatus] = useState<
+    "idle" | "processing" | "success" | "error"
+  >("idle");
+  const [currentStep, setCurrentStep] = useState<1 | 2>(1);
+  const [isAppKitReady, setIsAppKitReady] = useState(false);
+
+  const form = useForm<PaymentFormValues>({
+    resolver: zodResolver(paymentFormSchema),
+    defaultValues: {
+      payee: "",
+      amount: 0,
+      invoiceCurrency: "USD",
+      paymentCurrency: "ETH-sepolia-sepolia",
+    },
+  });
+
+  const invoiceCurrency = form.watch("invoiceCurrency") as InvoiceCurrency;
+  const paymentCurrency = form.watch("paymentCurrency") as PaymentCurrency;
+
+  const showPaymentCurrencySelect = invoiceCurrency === "USD";
+
+  const { open } = useAppKit();
+  const { isConnected, address } = useAppKitAccount();
+  const { walletProvider } = useAppKitProvider("eip155");
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsAppKitReady(true);
+    }, 2000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  useEffect(() => {
+    if (isConnected) {
+      setCurrentStep(2);
+    } else {
+      setCurrentStep(1);
+    }
+  }, [isConnected]);
+
+  const handleInvoiceCurrencyChange = (value: string) => {
+    const newInvoiceCurrency = value as InvoiceCurrency;
+    form.setValue("invoiceCurrency", newInvoiceCurrency);
+
+    if (newInvoiceCurrency !== "USD") {
+      form.setValue("paymentCurrency", newInvoiceCurrency);
+    } else {
+      const validPaymentCurrencies =
+        getPaymentCurrenciesForInvoice(newInvoiceCurrency);
+      form.setValue("paymentCurrency", validPaymentCurrencies[0]);
+    }
+  };
+
+  const onSubmit = async (data: PaymentFormValues) => {
+    if (!isConnected) {
+      toast.error("Please connect your wallet first");
+      return;
+    }
+
+    setPaymentStatus("processing");
+
+    try {
+      const ethersProvider = new ethers.providers.Web3Provider(
+        walletProvider as ethers.providers.ExternalProvider,
+      );
+
+      const signer = await ethersProvider.getSigner();
+
+      toast.info("Initiating payment...");
+
+      const paymentData = await pay(data);
+
+      const isApprovalNeeded = paymentData.metadata?.needsApproval;
+
+      if (isApprovalNeeded) {
+        toast.info("Approval required", {
+          description: "Please approve the transaction in your wallet",
+        });
+
+        const approvalIndex = paymentData.metadata.approvalTransactionIndex;
+
+        const approvalTransaction = await signer.sendTransaction(
+          paymentData.transactions[approvalIndex],
+        );
+
+        await approvalTransaction.wait();
+      }
+
+      toast.info("Sending payment", {
+        description: "Please confirm the transaction in your wallet",
+      });
+
+      const paymentTransaction = await signer.sendTransaction(
+        paymentData.transactions[isApprovalNeeded ? 1 : 0],
+      );
+
+      await paymentTransaction.wait();
+
+      toast.success("Payment successful", {
+        description: `You've paid ${data.amount} ${formatCurrencyLabel(
+          data.invoiceCurrency,
+        )} to ${data.payee.substring(0, 6)}...${data.payee.substring(
+          data.payee.length - 4,
+        )}`,
+      });
+
+      setPaymentStatus("success");
+
+      // Reset form after successful payment
+      setTimeout(() => {
+        form.reset({
+          payee: "",
+          amount: 0,
+          invoiceCurrency: "USD",
+          paymentCurrency: "ETH-sepolia-sepolia",
+        });
+        setPaymentStatus("idle");
+      }, 3000);
+    } catch (error) {
+      console.error("Payment error:", error);
+      toast.error("Payment failed", {
+        description:
+          "There was an error processing your payment. Please try again.",
+      });
+      setPaymentStatus("error");
+    }
+  };
+
+  return (
+    <div className="flex justify-center mx-auto w-full max-w-2xl">
+      <Card className="w-full shadow-lg border-zinc-200/80">
+        <CardHeader className="bg-zinc-50 rounded-t-lg border-b border-zinc-200/80">
+          <CardTitle className="flex items-center gap-2">
+            <CreditCard className="h-5 w-5" />
+            Direct Payment
+          </CardTitle>
+          <CardDescription>
+            Send payments instantly without creating a request first
+          </CardDescription>
+        </CardHeader>
+
+        {!isAppKitReady ? (
+          <CardContent className="py-16">
+            <div className="flex flex-col items-center justify-center space-y-4">
+              <Loader2 className="h-10 w-10 animate-spin text-zinc-400" />
+              <p className="text-zinc-500">Initializing payment system...</p>
+            </div>
+          </CardContent>
+        ) : (
+          <>
+            <CardContent className="pt-6 pb-2 space-y-6">
+              {/* Payment steps indicator */}
+              <div className="flex justify-center mb-6">
+                <div className="flex items-center space-x-4">
+                  <div
+                    className={`flex items-center ${
+                      currentStep >= 1 ? "text-black" : "text-zinc-300"
+                    }`}
+                  >
+                    <div
+                      className={`w-8 h-8 rounded-full border-2 flex items-center justify-center ${
+                        currentStep >= 1
+                          ? "border-black bg-zinc-50"
+                          : "border-zinc-300"
+                      }`}
+                    >
+                      <Wallet className="w-4 h-4" />
+                    </div>
+                    <span className="ml-2 font-medium">Connect Wallet</span>
+                  </div>
+
+                  <div
+                    className={`w-16 h-0.5 ${
+                      currentStep >= 2 ? "bg-black" : "bg-zinc-300"
+                    }`}
+                  />
+
+                  <div
+                    className={`flex items-center ${
+                      currentStep >= 2 ? "text-black" : "text-zinc-300"
+                    }`}
+                  >
+                    <div
+                      className={`w-8 h-8 rounded-full border-2 flex items-center justify-center ${
+                        currentStep >= 2
+                          ? "border-black bg-zinc-50"
+                          : "border-zinc-300"
+                      }`}
+                    >
+                      <Send className="w-4 h-4" />
+                    </div>
+                    <span className="ml-2 font-medium">Send Payment</span>
+                  </div>
+                </div>
+              </div>
+
+              {currentStep === 1 ? (
+                <div className="flex flex-col items-center justify-center py-10 space-y-4">
+                  <p className="text-zinc-600 text-center max-w-md">
+                    Connect your wallet to send direct payments to any address
+                  </p>
+                  <Button onClick={() => open()} size="lg" className="mt-2">
+                    <Wallet className="mr-2 h-4 w-4" />
+                    Connect Wallet
+                  </Button>
+                </div>
+              ) : (
+                <form
+                  onSubmit={form.handleSubmit(onSubmit)}
+                  className="space-y-4"
+                >
+                  {/* Payment form */}
+                  <div className="space-y-4">
+                    <div
+                      className={`grid ${
+                        showPaymentCurrencySelect
+                          ? "grid-cols-2"
+                          : "grid-cols-1"
+                      } gap-4`}
+                    >
+                      <div className="space-y-2">
+                        <Label htmlFor="invoiceCurrency">
+                          Invoice Currency
+                        </Label>
+                        <Select
+                          value={invoiceCurrency}
+                          onValueChange={handleInvoiceCurrencyChange}
+                          disabled={paymentStatus === "processing"}
+                        >
+                          <SelectTrigger id="invoiceCurrency">
+                            <SelectValue placeholder="Select currency" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {INVOICE_CURRENCIES.map((currency) => (
+                              <SelectItem key={currency} value={currency}>
+                                {formatCurrencyLabel(currency)}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                        {form.formState.errors.invoiceCurrency && (
+                          <p className="text-sm text-red-500">
+                            {form.formState.errors.invoiceCurrency.message}
+                          </p>
+                        )}
+                      </div>
+
+                      {showPaymentCurrencySelect && (
+                        <div className="space-y-2">
+                          <Label htmlFor="paymentCurrency">
+                            Payment Currency
+                          </Label>
+                          <Select
+                            value={paymentCurrency}
+                            onValueChange={(value) =>
+                              form.setValue(
+                                "paymentCurrency",
+                                value as PaymentCurrency,
+                              )
+                            }
+                            disabled={paymentStatus === "processing"}
+                          >
+                            <SelectTrigger id="paymentCurrency">
+                              <SelectValue placeholder="Select payment currency" />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {getPaymentCurrenciesForInvoice(
+                                invoiceCurrency,
+                              ).map((currency) => (
+                                <SelectItem key={currency} value={currency}>
+                                  {formatCurrencyLabel(currency)}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                          {form.formState.errors.paymentCurrency && (
+                            <p className="text-sm text-red-500">
+                              {form.formState.errors.paymentCurrency.message}
+                            </p>
+                          )}
+                        </div>
+                      )}
+                    </div>
+
+                    <div className="space-y-2">
+                      <Label htmlFor="amount">Amount</Label>
+                      <Input
+                        id="amount"
+                        type="number"
+                        placeholder="0.00"
+                        {...form.register("amount", {
+                          valueAsNumber: true,
+                        })}
+                        className="pr-12"
+                        disabled={paymentStatus === "processing"}
+                      />
+                      {form.formState.errors.amount && (
+                        <p className="text-sm text-red-500">
+                          {form.formState.errors.amount.message}
+                        </p>
+                      )}
+                    </div>
+
+                    <div className="space-y-2">
+                      <Label htmlFor="payee">Recipient Address</Label>
+                      <Input
+                        id="payee"
+                        placeholder="0x..."
+                        {...form.register("payee")}
+                        disabled={paymentStatus === "processing"}
+                        className="font-mono"
+                      />
+                      {form.formState.errors.payee && (
+                        <p className="text-sm text-red-500">
+                          {form.formState.errors.payee.message}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+
+                  {/* Security notice */}
+                  <div className="p-4 bg-green-50 border border-green-200 rounded-lg mt-4">
+                    <h3 className="font-semibold text-green-800 mb-1 text-sm">
+                      Secure Transaction
+                    </h3>
+                    <p className="text-xs text-green-700">
+                      This payment is secured using Request Network. Your
+                      transaction will be processed safely and transparently on
+                      the blockchain.
+                    </p>
+                  </div>
+
+                  <CardFooter className="flex justify-between items-center pt-2 pb-0 px-0">
+                    <button
+                      type="button"
+                      onClick={() => open()}
+                      className="flex items-center text-sm text-zinc-500 hover:text-zinc-800 transition-colors"
+                    >
+                      <span className="font-mono mr-2">
+                        {address?.substring(0, 6)}...
+                        {address?.substring(address?.length - 4)}
+                      </span>
+                      <LogOut className="h-3 w-3" />
+                    </button>
+                    <Button
+                      type="submit"
+                      className="relative"
+                      disabled={paymentStatus === "processing"}
+                    >
+                      {paymentStatus === "processing" ? (
+                        <>
+                          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                          Processing...
+                        </>
+                      ) : paymentStatus === "success" ? (
+                        <>
+                          <CheckCircle className="mr-2 h-4 w-4" />
+                          Payment Sent
+                        </>
+                      ) : paymentStatus === "error" ? (
+                        <>
+                          <X className="mr-2 h-4 w-4" />
+                          Try Again
+                        </>
+                      ) : (
+                        <>
+                          <ArrowRight className="mr-2 h-4 w-4" />
+                          Send Payment
+                        </>
+                      )}
+                    </Button>
+                  </CardFooter>
+                </form>
+              )}
+            </CardContent>
+
+            {currentStep === 2 && !form.formState.isSubmitSuccessful && (
+              <CardFooter className="pt-2 pb-6">
+                {/* Empty footer for spacing when form is displayed */}
+              </CardFooter>
+            )}
+          </>
+        )}
+      </Card>
+    </div>
+  );
+}
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 9ebf38c8..627c1f0f 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -6,11 +6,7 @@ import { usePathname } from "next/navigation";
 import { Button } from "./ui/button";
 import { UserMenu } from "./user-menu";
 
-export function Header({
-  user,
-}: {
-  user?: User | undefined;
-}) {
+export function Header({ user }: { user?: User | undefined }) {
   const demoMeetingUrl = process.env.NEXT_PUBLIC_DEMO_MEETING;
   const pathname = usePathname();
 
@@ -39,6 +35,12 @@ export function Header({
               >
                 Dashboard
               </Link>
+              <Link
+                href="/direct-payment"
+                className="text-zinc-900 hover:text-zinc-600 transition-colors"
+              >
+                Direct Payment
+              </Link>
               <Link
                 href="/invoice-me"
                 className="text-zinc-900 hover:text-zinc-600 transition-colors"
diff --git a/src/lib/schemas/invoice.ts b/src/lib/schemas/invoice.ts
index 74c5e104..cf3de458 100644
--- a/src/lib/schemas/invoice.ts
+++ b/src/lib/schemas/invoice.ts
@@ -1,4 +1,5 @@
 import { INVOICE_CURRENCIES } from "@/lib/currencies";
+import { isEthereumAddress } from "validator";
 import { z } from "zod";
 
 export const invoiceFormSchema = z.object({
@@ -23,7 +24,7 @@ export const invoiceFormSchema = z.object({
     required_error: "Please select an invoice currency",
   }),
   paymentCurrency: z.string().min(1, "Payment currency is required"),
-  walletAddress: z.string().min(1, "Wallet address is required"),
+  walletAddress: z.string().refine(isEthereumAddress, "Invalid wallet address"),
 });
 
 export type InvoiceFormValues = z.infer<typeof invoiceFormSchema>;
diff --git a/src/lib/schemas/payment.ts b/src/lib/schemas/payment.ts
new file mode 100644
index 00000000..24f15820
--- /dev/null
+++ b/src/lib/schemas/payment.ts
@@ -0,0 +1,17 @@
+import { INVOICE_CURRENCIES } from "@/lib/currencies";
+import { isEthereumAddress } from "validator";
+import { z } from "zod";
+
+export const paymentFormSchema = z.object({
+  payee: z
+    .string()
+    .min(1, "Recipient address is required")
+    .refine(isEthereumAddress, "Invalid Ethereum address format"),
+  amount: z.number().gt(0, "Amount must be greater than 0"),
+  invoiceCurrency: z.enum(INVOICE_CURRENCIES, {
+    required_error: "Please select an invoice currency",
+  }),
+  paymentCurrency: z.string().min(1, "Payment currency is required"),
+});
+
+export type PaymentFormValues = z.infer<typeof paymentFormSchema>;
diff --git a/src/server/index.ts b/src/server/index.ts
index 637a3d85..7894aeeb 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -1,12 +1,14 @@
 import { authRouter } from "./routers/auth";
 import { invoiceRouter } from "./routers/invoice";
 import { invoiceMeRouter } from "./routers/invoice-me";
+import { paymentRouter } from "./routers/payment";
 import { router } from "./trpc";
 
 export const appRouter = router({
   auth: authRouter,
   invoice: invoiceRouter,
   invoiceMe: invoiceMeRouter,
+  payment: paymentRouter,
 });
 
 export type AppRouter = typeof appRouter;
diff --git a/src/server/routers/payment.ts b/src/server/routers/payment.ts
new file mode 100644
index 00000000..8d61abf3
--- /dev/null
+++ b/src/server/routers/payment.ts
@@ -0,0 +1,35 @@
+import { apiClient } from "@/lib/axios";
+import { paymentFormSchema } from "@/lib/schemas/payment";
+import { TRPCError } from "@trpc/server";
+import { protectedProcedure, router } from "../trpc";
+
+export const paymentRouter = router({
+  pay: protectedProcedure
+    .input(paymentFormSchema)
+    .mutation(async ({ ctx, input }) => {
+      const { user } = ctx;
+
+      if (!user) {
+        throw new TRPCError({
+          code: "UNAUTHORIZED",
+          message: "You must be logged in to pay",
+        });
+      }
+
+      const response = await apiClient.post("v1/pay", {
+        amount: input.amount.toString(),
+        payee: input.payee,
+        invoiceCurrency: input.invoiceCurrency,
+        paymentCurrency: input.paymentCurrency,
+      });
+
+      if (response.status !== 201) {
+        throw new TRPCError({
+          code: "INTERNAL_SERVER_ERROR",
+          message: "Failed to pay",
+        });
+      }
+
+      return response.data;
+    }),
+});