update pay

This commit is contained in:
Zixin Zhou 2025-08-27 23:56:27 +08:00
parent 6022c6ec25
commit d734179302
5 changed files with 29 additions and 32 deletions

View File

@ -58,7 +58,8 @@ export default function DashboardPage() {
// 获取支付详情 // 获取支付详情
const fetchPaymentDetails = async (sessionId: string) => { const fetchPaymentDetails = async (sessionId: string) => {
try { try {
const response = await fetch(`/api/payment/checkout-status/${sessionId}?user_id=test_user_123`); const User = JSON.parse(localStorage.getItem("currentUser") || "{}");
const response = await fetch(`/api/payment/checkout-status/${sessionId}?user_id=${User.id}`);
const result = await response.json(); const result = await response.json();
if (result.successful && result.data) { if (result.successful && result.data) {

View File

@ -42,7 +42,8 @@ export default function PaymentSuccessPage() {
try { try {
// 使用新的Checkout Session状态查询 // 使用新的Checkout Session状态查询
const { getCheckoutSessionStatus } = await import('@/lib/stripe'); const { getCheckoutSessionStatus } = await import('@/lib/stripe');
const result = await getCheckoutSessionStatus(sessionId, 'test_user_123'); // 临时测试用户ID const User = JSON.parse(localStorage.getItem("currentUser") || "{}");
const result = await getCheckoutSessionStatus(sessionId, User.id);
if (result.successful && result.data) { if (result.successful && result.data) {
setPaymentData(result.data); setPaymentData(result.data);

View File

@ -9,7 +9,7 @@ import { fetchSubscriptionPlans, SubscriptionPlan } from '@/lib/stripe';
export default function PricingPage() { export default function PricingPage() {
const router = useRouter(); const router = useRouter();
const [billingCycle, setBillingCycle] = useState<'monthly' | 'yearly'>('monthly'); const [billingCycle, setBillingCycle] = useState<'month' | 'year'>('month');
const [plans, setPlans] = useState<SubscriptionPlan[]>([]); const [plans, setPlans] = useState<SubscriptionPlan[]>([]);
// 从后端获取订阅计划数据 // 从后端获取订阅计划数据
@ -28,15 +28,15 @@ export default function PricingPage() {
// 转换后端数据为前端显示格式,保持原有的数据结构 // 转换后端数据为前端显示格式,保持原有的数据结构
const transformPlanForDisplay = (plan: SubscriptionPlan) => { const transformPlanForDisplay = (plan: SubscriptionPlan) => {
const monthlyPrice = plan.price_monthly / 100; // 后端存储的是分,转换为元 const monthlyPrice = plan.price_month / 100; // 后端存储的是分,转换为元
const yearlyPrice = plan.price_yearly / 100; const yearlyPrice = plan.price_year / 100;
return { return {
name: plan.name, name: plan.name,
displayName: plan.display_name, displayName: plan.display_name,
price: { price: {
monthly: monthlyPrice, month: monthlyPrice,
yearly: yearlyPrice year: yearlyPrice
}, },
description: plan.description, description: plan.description,
features: plan.features || [], features: plan.features || [],
@ -103,16 +103,16 @@ export default function PricingPage() {
<div className="inline-flex items-center bg-gray-900/50 rounded-full p-1"> <div className="inline-flex items-center bg-gray-900/50 rounded-full p-1">
<button <button
onClick={() => setBillingCycle('yearly')} onClick={() => setBillingCycle('year')}
className={`flex items-center justify-center px-6 py-2.5 rounded-full transition-all duration-300 ease-out font-medium text-base ${ className={`flex items-center justify-center px-6 py-2.5 rounded-full transition-all duration-300 ease-out font-medium text-base ${
billingCycle === 'yearly' billingCycle === 'year'
? 'bg-gradient-to-r from-pink-500 to-purple-600 text-white' ? 'bg-gradient-to-r from-pink-500 to-purple-600 text-white'
: 'text-gray-300 hover:text-white' : 'text-gray-300 hover:text-white'
}`} }`}
> >
Pay Yearly Pay Yearly
<span className={`ml-2 text-sm ${ <span className={`ml-2 text-sm ${
billingCycle === 'yearly' billingCycle === 'year'
? 'text-white/90' ? 'text-white/90'
: 'text-gray-400' : 'text-gray-400'
}`}> }`}>
@ -120,9 +120,9 @@ export default function PricingPage() {
</span> </span>
</button> </button>
<button <button
onClick={() => setBillingCycle('monthly')} onClick={() => setBillingCycle('month')}
className={`px-6 py-2.5 rounded-full transition-all duration-300 ease-out font-medium text-base ${ className={`px-6 py-2.5 rounded-full transition-all duration-300 ease-out font-medium text-base ${
billingCycle === 'monthly' billingCycle === 'month'
? 'bg-gradient-to-r from-pink-500 to-purple-600 text-white' ? 'bg-gradient-to-r from-pink-500 to-purple-600 text-white'
: 'text-gray-300 hover:text-white' : 'text-gray-300 hover:text-white'
}`} }`}
@ -165,16 +165,16 @@ export default function PricingPage() {
{/* Billing Toggle */} {/* Billing Toggle */}
<div className="inline-flex items-center bg-gray-900/50 rounded-full p-1"> <div className="inline-flex items-center bg-gray-900/50 rounded-full p-1">
<button <button
onClick={() => setBillingCycle('yearly')} onClick={() => setBillingCycle('year')}
className={`flex items-center justify-center px-6 py-2.5 rounded-full transition-all duration-300 ease-out font-medium text-base ${ className={`flex items-center justify-center px-6 py-2.5 rounded-full transition-all duration-300 ease-out font-medium text-base ${
billingCycle === 'yearly' billingCycle === 'year'
? 'bg-gradient-to-r from-pink-500 to-purple-600 text-white' ? 'bg-gradient-to-r from-pink-500 to-purple-600 text-white'
: 'text-gray-300 hover:text-white' : 'text-gray-300 hover:text-white'
}`} }`}
> >
Pay Yearly Pay Yearly
<span className={`ml-2 text-sm ${ <span className={`ml-2 text-sm ${
billingCycle === 'yearly' billingCycle === 'year'
? 'text-white/90' ? 'text-white/90'
: 'text-gray-400' : 'text-gray-400'
}`}> }`}>
@ -182,9 +182,9 @@ export default function PricingPage() {
</span> </span>
</button> </button>
<button <button
onClick={() => setBillingCycle('monthly')} onClick={() => setBillingCycle('month')}
className={`px-6 py-2.5 rounded-full transition-all duration-300 ease-out font-medium text-base ${ className={`px-6 py-2.5 rounded-full transition-all duration-300 ease-out font-medium text-base ${
billingCycle === 'monthly' billingCycle === 'month'
? 'bg-gradient-to-r from-pink-500 to-purple-600 text-white' ? 'bg-gradient-to-r from-pink-500 to-purple-600 text-white'
: 'text-gray-300 hover:text-white' : 'text-gray-300 hover:text-white'
}`} }`}
@ -234,7 +234,7 @@ export default function PricingPage() {
<> <>
<span className="text-5xl">${displayPlan.price[billingCycle]}</span> <span className="text-5xl">${displayPlan.price[billingCycle]}</span>
<span className="text-lg text-gray-400 font-normal"> <span className="text-lg text-gray-400 font-normal">
/{billingCycle === 'monthly' ? 'month' : 'year'} /{billingCycle === 'month' ? 'month' : 'year'}
</span> </span>
</> </>
)} )}

View File

@ -8,19 +8,14 @@ import { VideoCarouselLayout } from '@/components/video-carousel-layout';
import { VideoGridLayout } from '@/components/video-grid-layout'; import { VideoGridLayout } from '@/components/video-grid-layout';
import { motion, AnimatePresence } from "framer-motion"; import { motion, AnimatePresence } from "framer-motion";
import { LiquidButton } from "@/components/ui/liquid-glass-button"; import { LiquidButton } from "@/components/ui/liquid-glass-button";
import {
createScriptProject,
CreateScriptProjectRequest
} from '@/api/script_project';
import {
ProjectTypeEnum,
ModeEnum,
ResolutionEnum
} from '@/app/model/enums';
import { import {
getResourcesList, getResourcesList,
Resource Resource
} from '@/api/resources'; } from '@/api/resources';
import {
getCheckoutSessionStatus,
PaymentStatusResponse
} from "@/lib/stripe";
export function HomePage2() { export function HomePage2() {
const router = useRouter(); const router = useRouter();
@ -85,8 +80,8 @@ export function HomePage2() {
// 获取支付详情 // 获取支付详情
const fetchPaymentDetails = async (sessionId: string) => { const fetchPaymentDetails = async (sessionId: string) => {
try { try {
const response = await fetch(`/api/payment/checkout-status/${sessionId}?user_id=test_user_123`); const User = JSON.parse(localStorage.getItem("currentUser") || "{}");
const result = await response.json(); const result: PaymentStatusResponse = await getCheckoutSessionStatus(sessionId, User.id);
if (result.successful && result.data) { if (result.successful && result.data) {
setPaymentData(result.data); setPaymentData(result.data);

View File

@ -9,8 +9,8 @@ export interface SubscriptionPlan {
name: string; name: string;
display_name: string; display_name: string;
description: string; description: string;
price_monthly: number; price_month: number;
price_yearly: number; price_year: number;
features: string[]; features: string[];
is_free: boolean; is_free: boolean;
is_popular: boolean; is_popular: boolean;
@ -34,7 +34,7 @@ export type PaymentStatusResponse = ApiResponse<PaymentStatusData>;
export interface CreateCheckoutSessionRequest { export interface CreateCheckoutSessionRequest {
user_id: string; user_id: string;
plan_name: string; plan_name: string;
billing_cycle: 'monthly' | 'yearly'; billing_cycle: 'month' | 'year';
} }
export interface CreateCheckoutSessionData { export interface CreateCheckoutSessionData {