60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
|
|
type PayButtonProps = {
|
|
children: React.ReactNode;
|
|
size?: "sm" | "md" | "lg";
|
|
className?: string;
|
|
channel?: "alipay" | "wxpay";
|
|
};
|
|
|
|
const sizeClasses = {
|
|
sm: "px-3 py-1.5 text-xs sm:px-4 sm:py-2 sm:text-sm",
|
|
md: "px-5 py-2.5 text-base",
|
|
lg: "px-8 py-4 text-lg sm:px-10",
|
|
};
|
|
|
|
export function PayButton({ children, size = "md", className = "", channel = "alipay" }: PayButtonProps) {
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const handlePay = () => {
|
|
if (loading) return;
|
|
setLoading(true);
|
|
const form = document.createElement("form");
|
|
form.method = "POST";
|
|
form.action = "/api/pay";
|
|
form.style.display = "none";
|
|
|
|
const fields = {
|
|
user_id: `user_${Date.now()}`,
|
|
return_url: typeof window !== "undefined" ? `${window.location.origin}/pay/paid` : "",
|
|
total_fee: 80,
|
|
type: "meetup",
|
|
channel,
|
|
html: "1",
|
|
};
|
|
|
|
for (const [k, v] of Object.entries(fields)) {
|
|
const input = document.createElement("input");
|
|
input.name = k;
|
|
input.value = String(v);
|
|
form.appendChild(input);
|
|
}
|
|
|
|
document.body.appendChild(form);
|
|
form.submit();
|
|
};
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={handlePay}
|
|
disabled={loading}
|
|
className={`inline-flex items-center justify-center gap-2 rounded-full bg-[var(--accent)] font-medium text-[var(--accent-foreground)] transition hover:opacity-90 disabled:opacity-70 ${sizeClasses[size]} ${className}`}
|
|
>
|
|
{loading ? "跳转中..." : children}
|
|
</button>
|
|
);
|
|
}
|