reactjs 使用React和Django后端的条带卡元素

cetgtptt  于 2023-03-01  发布在  React
关注(0)|答案(1)|浏览(136)

我尝试使用以下代码用React实现StripeCard元素:

const CreditModalCard = ({ ModalPlanData, ModalStatus, SetModalStatus }) => {
    const [ModalplanMonthly, setModalplanMonthly] = useState(false);
    const planModalClose = () => SetModalStatus(false);
    const ModalPlanchange = val => { if (!isSubmit) setModalplanMonthly(val); }

    const stripe = useStripe();
    const elements = useElements();
    const creditForm = useRef();
    const [ErrMsg, SetErrMsg] = useState("");
    const [isSubmit, SetisSubmit] = useState(false);
    const [SuccessSub, SetSuccessSub] = useState(false);

return (
    label className={`${isSubmit ? 'subscription-disable' : ''}`}>Payment Option</label>
    <Box className="planModal-rightBody-cardElementWrapper">
    <Box className="planModal-rightBody-cardElement">
    <CardElement options={{ hidePostalCode: true, disabled: isSubmit }} />
    </Box>
    </Box>
)

然而,当我尝试在后端使用相同的card元素时,代码如下:

stripe.confirmCardPayment(customer_resultState.data.clientsecret, {
  payment_method: {
    card: info.card_element,
    billing_details: {
      name: "Name Surname",
    },
  }
}).then((result) => { ...
})

出现以下错误:

Received unknown parameters: livemode, type, created, id, object, card

信息结构来自stripe.createPaymentMethod函数:

const { error, paymentMethod } = await stripe.createPaymentMethod({ type: "card", card: elements.getElement(CardElement) });
        if (error || !paymentMethod) {
            SetisSubmit(false);
            SetErrMsg(error.message);
            return;
        }

        let creditInfo = {
            product : GetSelectedPlan(),
            email: checkemail,
            card: paymentMethod,
            plan: ModalplanMonthly ? "monthly" : "annualy"
        };

下面是我得到的payment_method_id和客户端密码的输出,而最后一个错误是我从“stripe.confirmCardPayment”函数得到的消息:

payment_method_id : pm_1MgevyLS6SANVcyC5hbsq1n3

clientsecret : pi_3MgebQLS6SANVcyC1mBTVxTu_secret_xDLFXOqlpIU9tF8wuwaos8uxN
shared-b4b210b16164b8ff74109e131a66ac59.js:1          

POST https://api.stripe.com/v1/payment_intents/pi_3MgebQLS6SANVcyC1mBTVxTu/confirm 400

A processing error occurred.

我应该怎么做才能正确地将卡数据作为参数发送到confirmCardPayment函数中?

zkure5ic

zkure5ic1#

我的第一条建议是不要将这些值嵌套在对象中,这样就不会传递超出预期的数据。
confirmCardPayment函数的签名需要付款意向client_secret作为第一个参数,然后是data对象。第一个元素是包含cardElement的对象(如果您在确认期间收集卡信息)或付款方法的ID(如果您使用现有的付款方法)。
根据您收到的错误消息,/confirm端点正在获取一些它不期望的额外参数,因此我将首先将您需要的值分配给它们自己的const,并将它们记录到您的控制台,以确保您传递的是预期的参数。

相关问题