Next.js中Stripe Elements布局自定义失效问题咨询

你的问题核心是手风琴布局的配置位置错误：layout 选项需要直接传递给 <PaymentElement> 组件的props，而不是放在 <Elements> 的全局options里。Elements的options中的layout配置仅适用于传统的单个Stripe元素（如CardElement），对PaymentElement不生效。

修改后的代码示例 #

重点修改CheckoutForm组件中的<PaymentElement>部分，将布局配置直接传入：

'use client';

import { useState, useEffect } from "react";
import { loadStripe } from "@stripe/stripe-js";
import { Elements, PaymentElement, useStripe, useElements } from "@stripe/react-stripe-js";

const stripePromise = loadStripe("pk_test ");

export default function PaymentPage() {
    const [clientSecret, setClientSecret] = useState("");

    useEffect(() => {
        fetch("/api/create-payment-intent", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ amount: 5000, currency: "pln" }),
        })
            .then((res) => res.json())
            .then((data) => setClientSecret(data.clientSecret));
    }, []);

    const appearance = {
        theme: "stripe",  
    };

    // 全局options保留clientSecret和appearance即可
    const options = {
        clientSecret,
        appearance,
    };

    return (
        <div className="flex flex-col items-center gap-4 p-6">
            {clientSecret ? (
                <Elements stripe={stripePromise} options={options}>
                    <CheckoutForm />
                </Elements>
            ) : (
                <p>Loading payment options...</p>
            )}
        </div>
    );
}

function CheckoutForm() {
    const stripe = useStripe();
    const elements = useElements();
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState("");

    // 手风琴布局配置直接定义在组件内，或者从父组件传递
    const paymentElementLayout = {
        type: 'accordion',         
        defaultCollapsed: false,    
        radios: true,             
        spacedAccordionItems: true,  
    };

    const handleSubmit = async (event) => {
        event.preventDefault();
        if (!stripe || !elements) return;

        setLoading(true);

        const { error } = await stripe.confirmPayment({
            elements,
            confirmParams: { return_url: `${process.env.NEXT_PUBLIC_FRONTEND_URL}/success` },
            redirect: "if_required",
        });

        if (error) {
            setError(error.message);
            setLoading(false);
        } else {
            alert("Payment successful!");
        }
    };

    return (
        <form onSubmit={handleSubmit} className="w-full max-w-full">
            {/* 将layout配置传入PaymentElement */}
            <PaymentElement layout={paymentElementLayout} />
            {error && <p className="text-red-500">{error}</p>}
            <button
                type="submit"
                disabled={!stripe || loading}
                className="px-4 py-2 bg-blue-500 text-white rounded"
            >
                {loading ? "Processing..." : "Pay Now"}
            </button>
        </form>
    );
}

额外注意事项 #

• 版本要求：确保你的@stripe/react-stripe-js版本不低于v2.1.0，@stripe/stripe-js版本不低于v1.54.0，手风琴布局是较新的特性，低版本不支持。
• 验证配置：如果修改后仍不生效，打开浏览器开发者工具，检查Stripe的加载日志，确认没有版本不兼容或配置格式错误的提示。
• 样式冲突：如果你的自定义CSS（比如Tailwind）对PaymentElement的容器有强制布局样式，可能会覆盖Stripe的手风琴布局，需要检查容器的display、flex等属性是否干扰了Stripe的默认样式。

内容的提问来源于stack exchange，提问作者Sylwester Zabielski