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) => {
|
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) {
|
||||||
|
|||||||
@ -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);
|
||||||
|
|||||||
@ -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>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@ -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);
|
||||||
|
|||||||
@ -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 {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user