上下文

我有一个Next.js项目，我想通过Stripe处理订阅付款。为此，我使用了@stripe/stripe-js和@stripe/react-stripe-js库。我面临的问题是，当用户输入他的卡信息时，CVV或到期日期是错误的，交易成功。我很困惑，为什么会发生这种情况，并希望解决这个问题，以避免欺诈发生在我的网站。

代码实现

我在网站上有一个按钮，看起来像这样：

<button onClick={() => handlePayment("price_9GWxvwZT9I0y2hA0wd7J8gec")}>
    Checkout
</button>

字符串
通过此按钮调用的函数将创建Stripe订阅。

const handlePayment = async (price_id) => {
    fetch('https://api.example.com/create_stripe_subscription', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            "price_id": price_id,
            "user_email": 'user@example.com',
        })
    }).then(response => {
        if (response.ok) {
            response.json().then(data => {
                router.push(`/checkout?client=${data.client_secret}`)
            });
        }
    })
};

型
API调用creates a subscription并返回客户端密码，然后将其作为查询字符串传递到结帐页面。如果这个handlePayment()函数成功执行，则 checkout 页面包含以下代码。

import { loadStripe } from '@stripe/stripe-js';
import { Elements } from '@stripe/react-stripe-js';
import { useRouter } from "next/router"
import MetaHead from "@/components/meta-head"
import CheckoutForm from "@/components/checkout-form"

// Call outside of a component’s render to avoid recreating the `Stripe` object on every render.
const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY);

export default function Checkout() {
    const router = useRouter();
    const clientSecret = router.query.client;

    return (
        <>
            <h1>Checkout</h1>
            {clientSecret && stripePromise && (
                <div>
                    <Elements stripe={stripePromise} options={{ clientSecret: clientSecret }}>
                        <CheckoutForm />
                    </Elements>
                </div >
            )}
        </>
    );
}

型
这里的CheckoutForm组件包含以下代码。

import { useStripe, useElements, PaymentElement } from '@stripe/react-stripe-js';
import { useState } from 'react';

export default function CheckoutForm() {
    const stripe = useStripe();
    const elements = useElements();

    const [message, setMessage] = useState(null);
    const [isProcessing, setIsProcessing] = useState(false);

    const handleSubmit = async (event) => {
        // Prevent default form submission, this would refresh the page.
        event.preventDefault();

        if (!stripe || !elements) {
            // Stripe.js hasn't yet loaded, make sure to disable form submission until Stripe.js has loaded.
            return;
        }

        setIsProcessing(true);

        const { error } = await stripe.confirmPayment({
            // `Elements` instance that was used to create the Payment Element.
            elements,
            confirmParams: {
                return_url: `${window.location.origin}/admin?load=panel`,
            }
        });

        if (error) {
            setMessage(error.message);
        } else {
            setMessage("Unexpected state...");
        }

        setIsProcessing(false);
    };

    return (
        <>
            <div>
                <form id="payment-form" onSubmit={handleSubmit}>
                    <PaymentElement />
                    <button disabled={isProcessing} id="submit">
                        Pay now
                    </button>
                </form>
            </div>

            {/* Handle user messaging */}
            {message && (
                <span>{message}</span>
            )}
        </>
    )
};

型
非常感谢您的帮助！