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