我试图在我的react应用程序中使用stripe中的新支付元素进行支付处理,但实现的后端要求我发送通过stripe收集的令牌化支付详细信息,并发送后端将创建费用。我看到的例子不这样做,所有的过程中直接支付条纹。我看到的所有使用令牌的例子似乎都不适用于支付元素,只适用于旧的卡元素。
下面是表格:
<form id="payment-form" onSubmit={handleSubmit}>
<LinkAuthenticationElement
id="link-authentication-element"
onChange={(e) => setEmail(e.target.value)}
/>
<PaymentElement id="payment-element" options={paymentElementOptions} />
<button className="mt-5 rounded-lg text-center flex items-center justify-center w-full px-8 py-4 bg-main text-white border-0 text-sm leading-4 font-medium sm:font-semibold sm:text-base sm:leading-[19px]" disabled={isLoading || !stripe || !elements} id="submit">
<span id="button-text">
{isLoading ? <div className="spinner" id="spinner"></div> : "Pay now"}
</span>
</button>
{/* Show any error or success messages */}
{message && <div id="payment-message" className="text-center mt-2">{message}</div>}
</form>
下面是一个使用card元素的旧方法的例子:
stripe.createToken(card).then(function(result) {
if (result.error) {
// Inform the user if there was an error.
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
} else {
// Send the token to your server.
stripeTokenHandler(result.token);
}
});
我尝试了以下方法,但似乎都不起作用:
const cardElement = elements.getElement(cardElement);
stripe.createToken(cardElement).then(function(result) {
if (result.error) {
// Inform the user if there was an error.
// var errorElement = document.getElementById('card-errors');
// errorElement.textContent = result.error.message;
console.log(result.error.message)
} else {
// Send the token to your server.
console.log(result);
}
}).catch((error) => {
console.log(error);
});
3条答案
按热度按时间von4xj4u1#
这是与
payment
元素最接近的东西:https://stripe.com/docs/payments/build-a-two-step-confirmation
在其中,您可以使用
createPaymentMethod
函数创建付款方式,该函数对应于您当前的createToken
函数。然后,您可以在后台使用此付款方式与您的付款意向。
不过,它可能并不完全适合,因为这个流在前端仍然使用
confirmPayment()
函数,这与我猜您使用的函数不同。我想象你的集成更多地使用后端确认,就像在这个遗留流中一样:https://stripe.com/docs/payments/accept-a-payment-synchronously
ql3eal8s2#
新的Stripe PaymentElements需要使用新的PaymentIntent和PaymentMethods API。我邀请您参考this guide,以便从令牌迁移到PaymentMethods。你需要改变:
变成这样:
mftmpeh83#
和我一样的情况。我查看了Stripe文档,发现Stripe API令牌不接受新的PaymentElement。
然后,我认为目前没有办法从支付元素创建令牌。因此,您需要更新后端以使用paymentIntent(由PaymentElement生成),或者更新前端以使用旧的可标记的Stripe Card元素。
参考号:https://stripe.com/docs/js/tokens/create_token?type=cardElement