forked from 77media/video-flow
update pay
This commit is contained in:
parent
6022c6ec25
commit
d734179302
@ -58,7 +58,8 @@ export default function DashboardPage() {
|
||||
// 获取支付详情
|
||||
const fetchPaymentDetails = async (sessionId: string) => {
|
||||
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();
|
||||
|
||||
if (result.successful && result.data) {
|
||||
|
||||
@ -42,7 +42,8 @@ export default function PaymentSuccessPage() {
|
||||
try {
|
||||
// 使用新的Checkout Session状态查询
|
||||
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) {
|
||||
setPaymentData(result.data);
|
||||
|
||||
@ -9,7 +9,7 @@ import { fetchSubscriptionPlans, SubscriptionPlan } from '@/lib/stripe';
|
||||
|
||||
export default function PricingPage() {
|
||||
const router = useRouter();
|
||||
const [billingCycle, setBillingCycle] = useState<'monthly' | 'yearly'>('monthly');
|
||||
const [billingCycle, setBillingCycle] = useState<'month' | 'year'>('month');
|
||||
const [plans, setPlans] = useState<SubscriptionPlan[]>([]);
|
||||
|
||||
// 从后端获取订阅计划数据
|
||||
@ -28,15 +28,15 @@ export default function PricingPage() {
|
||||
|
||||
// 转换后端数据为前端显示格式,保持原有的数据结构
|
||||
const transformPlanForDisplay = (plan: SubscriptionPlan) => {
|
||||
const monthlyPrice = plan.price_monthly / 100; // 后端存储的是分,转换为元
|
||||
const yearlyPrice = plan.price_yearly / 100;
|
||||
const monthlyPrice = plan.price_month / 100; // 后端存储的是分,转换为元
|
||||
const yearlyPrice = plan.price_year / 100;
|
||||
|
||||
return {
|
||||
name: plan.name,
|
||||
displayName: plan.display_name,
|
||||
price: {
|
||||
monthly: monthlyPrice,
|
||||
yearly: yearlyPrice
|
||||
month: monthlyPrice,
|
||||
year: yearlyPrice
|
||||
},
|
||||
description: plan.description,
|
||||
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">
|
||||
<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 ${
|
||||
billingCycle === 'yearly'
|
||||
billingCycle === 'year'
|
||||
? 'bg-gradient-to-r from-pink-500 to-purple-600 text-white'
|
||||
: 'text-gray-300 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
Pay Yearly
|
||||
<span className={`ml-2 text-sm ${
|
||||
billingCycle === 'yearly'
|
||||
billingCycle === 'year'
|
||||
? 'text-white/90'
|
||||
: 'text-gray-400'
|
||||
}`}>
|
||||
@ -120,9 +120,9 @@ export default function PricingPage() {
|
||||
</span>
|
||||
</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 ${
|
||||
billingCycle === 'monthly'
|
||||
billingCycle === 'month'
|
||||
? 'bg-gradient-to-r from-pink-500 to-purple-600 text-white'
|
||||
: 'text-gray-300 hover:text-white'
|
||||
}`}
|
||||
@ -165,16 +165,16 @@ export default function PricingPage() {
|
||||
{/* Billing Toggle */}
|
||||
<div className="inline-flex items-center bg-gray-900/50 rounded-full p-1">
|
||||
<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 ${
|
||||
billingCycle === 'yearly'
|
||||
billingCycle === 'year'
|
||||
? 'bg-gradient-to-r from-pink-500 to-purple-600 text-white'
|
||||
: 'text-gray-300 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
Pay Yearly
|
||||
<span className={`ml-2 text-sm ${
|
||||
billingCycle === 'yearly'
|
||||
billingCycle === 'year'
|
||||
? 'text-white/90'
|
||||
: 'text-gray-400'
|
||||
}`}>
|
||||
@ -182,9 +182,9 @@ export default function PricingPage() {
|
||||
</span>
|
||||
</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 ${
|
||||
billingCycle === 'monthly'
|
||||
billingCycle === 'month'
|
||||
? 'bg-gradient-to-r from-pink-500 to-purple-600 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-lg text-gray-400 font-normal">
|
||||
/{billingCycle === 'monthly' ? 'month' : 'year'}
|
||||
/{billingCycle === 'month' ? 'month' : 'year'}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
|
||||
@ -8,19 +8,14 @@ import { VideoCarouselLayout } from '@/components/video-carousel-layout';
|
||||
import { VideoGridLayout } from '@/components/video-grid-layout';
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { LiquidButton } from "@/components/ui/liquid-glass-button";
|
||||
import {
|
||||
createScriptProject,
|
||||
CreateScriptProjectRequest
|
||||
} from '@/api/script_project';
|
||||
import {
|
||||
ProjectTypeEnum,
|
||||
ModeEnum,
|
||||
ResolutionEnum
|
||||
} from '@/app/model/enums';
|
||||
import {
|
||||
getResourcesList,
|
||||
Resource
|
||||
} from '@/api/resources';
|
||||
import {
|
||||
getCheckoutSessionStatus,
|
||||
PaymentStatusResponse
|
||||
} from "@/lib/stripe";
|
||||
|
||||
export function HomePage2() {
|
||||
const router = useRouter();
|
||||
@ -85,8 +80,8 @@ export function HomePage2() {
|
||||
// 获取支付详情
|
||||
const fetchPaymentDetails = async (sessionId: string) => {
|
||||
try {
|
||||
const response = await fetch(`/api/payment/checkout-status/${sessionId}?user_id=test_user_123`);
|
||||
const result = await response.json();
|
||||
const User = JSON.parse(localStorage.getItem("currentUser") || "{}");
|
||||
const result: PaymentStatusResponse = await getCheckoutSessionStatus(sessionId, User.id);
|
||||
|
||||
if (result.successful && result.data) {
|
||||
setPaymentData(result.data);
|
||||
|
||||
@ -9,8 +9,8 @@ export interface SubscriptionPlan {
|
||||
name: string;
|
||||
display_name: string;
|
||||
description: string;
|
||||
price_monthly: number;
|
||||
price_yearly: number;
|
||||
price_month: number;
|
||||
price_year: number;
|
||||
features: string[];
|
||||
is_free: boolean;
|
||||
is_popular: boolean;
|
||||
@ -34,7 +34,7 @@ export type PaymentStatusResponse = ApiResponse<PaymentStatusData>;
|
||||
export interface CreateCheckoutSessionRequest {
|
||||
user_id: string;
|
||||
plan_name: string;
|
||||
billing_cycle: 'monthly' | 'yearly';
|
||||
billing_cycle: 'month' | 'year';
|
||||
}
|
||||
|
||||
export interface CreateCheckoutSessionData {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user