如何启用Stripe Przelewy24(P24)支付并解决组件导入错误

1. 修正P24BankElement导入错误 #

核心问题是组件命名错误：Stripe React库中的P24银行选择组件正确名称是P24BankElement，而非StripeP24BankElement。同时所有Stripe支付元素必须在Elements上下文内使用（依赖其提供的Stripe实例）。

修正后的组件代码：

import { P24BankElement, useStripe, useElements } from "@stripe/react-stripe-js";
import { StripeP24BankElementOptions } from "@stripe/stripe-js";
import React from "react";

const PaymentStripePrzelewy24: React.FC = () => {
  const options: StripeP24BankElementOptions = {
    style: {
      base: {
        fontFamily: "Inter, sans-serif",
        color: "#424270",
        padding: "10px 12px",
        "::placeholder": {
          color: "#CFD7E0",
        },
      },
    },
    // 可选：指定默认银行或限制显示的银行列表
    // banks: ["ing", "pko"]
  };

  return (
    <div className="flex flex-col relative w-full pb-6">
      <P24BankElement options={options} />
    </div>
  );
};

export default PaymentStripePrzelewy24;

额外注意：

• 确保@stripe/react-stripe-js和@stripe/stripe-js版本在v1.19.0及以上，可通过npm update @stripe/react-stripe-js @stripe/stripe-js更新
• 组件必须被包裹在Elements内部（已有卡支付集成应包含该结构），外层示例：

  import { Elements } from "@stripe/react-stripe-js";
  import { loadStripe } from "@stripe/stripe-js";
  import PaymentStripePrzelewy24 from "./PaymentStripePrzelewy24";
  
  const stripePromise = loadStripe("你的Stripe公钥");
  
  const PaymentPage = () => {
    return (
      <Elements stripe={stripePromise}>
        <PaymentStripePrzelewy24 />
        {/* 支付按钮组件 */}
      </Elements>
    );
  };
  

2. 优化支付按钮获取选中银行并完成支付 #

支付按钮需完成获取选中银行信息和调用Stripe支付确认接口两个核心动作，完整实现如下：

import React, { useState } from "react";
import { useStripe, useElements, P24BankElement } from "@stripe/react-stripe-js";

const P24PaymentButton: React.FC = () => {
  const stripe = useStripe();
  const elements = useElements();
  const [isLoading, setIsLoading] = useState(false);
  const [errorMessage, setErrorMessage] = useState<string | null>(null);

  const handlePayment = async () => {
    if (!stripe || !elements) return;

    setIsLoading(true);
    setErrorMessage(null);

    // 获取P24银行组件实例
    const p24Element = elements.getElement(P24BankElement);
    if (!p24Element) {
      setErrorMessage("无法获取银行选择组件");
      setIsLoading(false);
      return;
    }

    // 从后端创建PaymentIntent（必须后端执行，避免暴露私钥）
    const response = await fetch("/api/create-payment-intent", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        amount: 1000, // 单位：分，示例为10PLN
        currency: "pln",
        payment_method_types: ["p24"]
      })
    });
    const { clientSecret } = await response.json();

    // 确认P24支付，自动携带选中的银行信息
    const { error, paymentIntent } = await stripe.confirmPrzelewy24Payment(
      clientSecret,
      {
        payment_method: {
          p24: p24Element,
          billing_details: {
            name: "用户姓名", // 可从表单获取真实用户信息
            email: "user@example.com"
          }
        }
      }
    );

    if (error) {
      setErrorMessage(error.message || "支付失败，请重试");
    } else if (paymentIntent.status === "succeeded") {
      // 支付成功逻辑：跳转成功页、更新订单状态等
      alert("支付成功");
    }

    setIsLoading(false);
  };

  return (
    <div>
      {errorMessage && <div className="text-red-500 mb-4">{errorMessage}</div>}
      <button
        onClick={handlePayment}
        disabled={isLoading || !stripe || !elements}
        className="bg-blue-600 text-white px-4 py-2 rounded disabled:opacity-50"
      >
        {isLoading ? "处理中..." : "通过Przelewy24支付"}
      </button>
    </div>
  );
};

export default P24PaymentButton;

关键说明：

• 必须通过后端创建PaymentIntent：这是Stripe的安全要求，后端需使用Stripe服务端SDK生成clientSecret返回给前端
• 选中银行自动携带：通过elements.getElement(P24BankElement)获取组件实例后，Stripe会自动将选中的银行代码传入支付确认接口，无需手动提取
• 状态处理：根据confirmPrzelewy24Payment返回结果处理成功/失败逻辑，paymentIntent.status === "succeeded"表示支付完成

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