React/Firebase:实现订阅的分条支付

Question

我对Stripe与Firebase的集成非常陌生。

我有以下创建Stripe中的payment_method(可以在日志中看到)

我希望用户只订阅我已经在Stripe中设置的一个产品。

我试过paymentents。创建etc，但在创建时返回一个未定义错误。

有人能帮忙吗?

const CheckoutForm = () => {
const stripe = useStripe();
const elements = useElements();
const handleSubmit = async (event) => {
event.preventDefault();
if (elements == null) {
return;
}
const {error, paymentMethod} = await stripe.createPaymentMethod({
type: 'card',
card: elements.getElement(CardElement),
billing_details: {
email: '[e-mail]',
},
});

if (error) {
alert('1')
} else {
alert('2')
}
};
return (
<form onSubmit={handleSubmit}>
<CardElement options={CARD_ELEMENT_OPTIONS} />
<button type="submit" disabled={!stripe || !elements}>
Pay
</button>
</form>
);
};
const stripePromise = loadStripe('XXX');
const CARD_ELEMENT_OPTIONS = {
style: {
base: {
'color': '#32325d',
'fontFamily': 'inherit',
'fontSmoothing': 'antialiased',
'fontSize': '16px',
'::placeholder': {
color: '#aab7c4',
},
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a',
},
},
};
const SignUp = () => {

return (
<>
<Elements stripe={stripePromise}>
<CheckoutForm />
</Elements>
</>
);

Answer 1

这只是前端代码，你需要在后端创建PaymentIntent。参考Stripe官方文档。

另外，您可能希望使用PaymentElements来代替。PaymentElements是较新的，支持多种支付方式，从长远来看，这将是有益的。