stripe.confirmCardPayment意图secret返回空字符串

Question

我正试图使用Netlify函数在我的React应用程序中实现Stripe Elements Payment Intents。提交付款单返回错误：Unhandled Rejection (IntegrationError): Invalid value for stripe.confirmCardPayment intent secret: value should be a client secret of the form ${id}_secret_${secret}. You specified: .

我可以在paymentIntent对象中看到client_secret值，因此无服务器函数正在返回client_secret，但我不能在客户端中适当地实现它。如果我将data.clientSecret作为参数传递给stripe.confirmCardPayment，则我的付款成功完成，但Elements表单没有重置，这向我表明此实现存在问题。

setClientSecret是否未更新clientSecret的状态？

这是我的Netlify函数：

const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);
exports.handler = async (event) => {  
const paymentObject = JSON.parse(event.body);
const amount = paymentObject.amount;
const donorName = paymentObject.metadata.donorName;
const address = paymentObject.metadata.address;
const city = paymentObject.metadata.city;
const state = paymentObject.metadata.state;
const zip = paymentObject.metadata.zip;
const email = paymentObject.metadata.email
try {
const paymentIntent = await stripe.paymentIntents.create({
amount,
currency: 'usd',
description: 'USS Idaho Donation',
receipt_email: email,
metadata: {
donorName,
address,
city,
state,
zip,
email,
},
});
return {
statusCode: 200,
body: JSON.stringify({ 
paymentIntent, 
clientSecret: paymentIntent.client_secret
})
};
} catch (error) {
console.log({ error });
return {
statusCode: 400,
body: JSON.stringify({ error }),
};
}
};

handleSubmit函数：

const handleSubmit = async ev => {
ev.preventDefault();
setProcessing(true);
window
.fetch("/.netlify/functions/charge", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
amount,
receipt_email: email,
metadata: {
donorName: donorName,
address: address,
city: city,
state: state,
zip: zip,
email: email
}
}
)
})
.then(res => {
return res.json();

})
.then(data => {
setClientSecret(data.clientSecret)
console.log(`clientSecret: ${clientSecret}`)

const payload = stripe.confirmCardPayment(data.clientSecret, {
payment_method: {
card: elements.getElement(CardElement)
}
});

if (payload.error) {
setError(`Payment failed: ${payload.error.message}`);
setProcessing(false);
} else {
setError(null);
setProcessing(false);
setSucceeded(true);
reset();
} 

})
};

Answer 1

stripe.confirmCardPayment函数返回一个Promise，因此在更新组件状态之前，您需要等待该Promise得到解决：

• https://stripe.com/docs/js/payment_intents/confirm_card_payment(向下滚动到"返回"部分(

在您的代码中，这看起来像：

const handleSubmit = async ev => {
ev.preventDefault();
setProcessing(true);
window
.fetch("/.netlify/functions/charge", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
amount,
receipt_email: email,
metadata: {
donorName: donorName,
address: address,
city: city,
state: state,
zip: zip,
email: email
}
}
)
})
.then(res => {
return res.json();

})
.then(data => {
setClientSecret(data.clientSecret);

return stripe.confirmCardPayment(data.clientSecret, {
payment_method: {
card: elements.getElement(CardElement)
}
});
})
.then((paymentResult) => {
if (paymentResult.error) {
setError(`Payment failed: ${payload.error.message}`);
setProcessing(false);
} else {
if (paymentResult.paymentIntent.status === 'succeeded') {
setError(null);
setProcessing(false);
setSucceeded(true);
reset();
}
}
});
};