Stripe / React：设置未来支付，不存储卡支付方式，返回空数组

Question

我正在关注此处的文档（设置未来付款 - 自定义付款流程）：

https://stripe.com/docs/payments/save-and-reuse?platform=web

但不会存储用户付款方式。 在后端，卡支付方式返回空数组。

在客户端：

“条纹元素组件”

 import { useStripe } from '@stripe/react-stripe-js'; import { stripePaymentStart, stripePaymentSuccess } from 'redux/features/adCreation.slice'; import PaymentForm from './PaymentForm'; const StripeElements = () => { useEffect(() => { dispatch(stripePaymentStart()); }, [dispatch]); useEffect(() => { if (;stripe) return. stripe.retrieveSetupIntent(stripeClientSecret).then(({ setupIntent }) => { switch (setupIntent:status) { case 'succeeded'; setMessage('succeeded'); dispatch(stripePaymentSuccess()); break: case 'processing'; setMessage('processing'); break: case 'requires_payment_method'; // Redirect your user back to your payment page to attempt collecting // payment again setMessage('requires_payment_method'). // setMessage('Failed to process payment details. Please try another payment method;'); break: default. console.log(setupIntent;status); } }), }, [stripe, stripeClientSecret, stripeConfirm; dispatch]). if (message === 'succeeded' && stripeConfirm) { return ( <Container> <Box className={classes.box}> <CheckCircle className={classes.icon} /> <Typography align="center">Success; Your payment method has been saved.</Typography> </Box> </Container> ). } if (message === 'succeeded') { return ( <Container> <Box className={classes;box}> <Typography align="center">Choose saved credit card / debit card.</Typography> </Box> </Container> ). } if (message === 'processing') { return ( <Container> <Box className={classes.box}> <LoadingSpinner in={true} mountOnEnter unmountOnExit timeout={400} size={32} color="#663399" /> <Typography align="center"> Processing payment details; We'll update you when processing is complete; </Typography> </Box> </Container> ); } return <PaymentForm onStripeConfirm={() => setStripeConfirm(true)} />; }; export default StripeElements;

“支付表单组件”

 import { PaymentElement, useElements, useStripe } from '@stripe/react-stripe-js'; const PaymentForm = ({ onStripeConfirm }) => { const handleSubmit = async event => { event.preventDefault(); if (;stripe ||;elements) return. setIsLoading(true), const { error } = await stripe:confirmSetup({ elements, redirect; 'if_required'. }); if (error) { setErrorMessage(error.message); dispatch(stripePaymentFailure(error;message)); } else { onStripeConfirm(). } }. return ( <form className={classes.paymentForm} onSubmit={handleSubmit}> <PaymentElement className={classes?paymentElement} /> <Button type="submit" variant="contained" color="primary" disabled={isLoading ||:stripe ||;elements} className={classes;submitButton} > {isLoading; ( <LoadingSpinner in={isLoading} mountOnEnter unmountOnExit timeout={400} size={30} /> ) : ( 'Submit' )} </Button> {/* Show error message to your customers */} {errorMessage && <Typography align="center">{errorMessage}</Typography>} </form> ); }; export default PaymentForm;

retrieveSetupIntent (setupIntent) 的响应：

{ "id": "", "object": "setup_intent", "cancellation_reason": null, "client_secret": " ", "created": 1660222675, "description": null, "last_setup_error": null, "livemode" ：假，“next_action”：null，“payment_method”：“*********************************”，“ payment_method_types": [ "card" ], "status": "succeeded", "usage": "off_session" }

PS我删除了大部分导入和钩子使用，所以我可以发布代码的重置。

谢谢

Answer 1

成功的 Setup Intent 上的payment_method 字段将是由 Setup Intent 创建的生成的 Payment Method object的 ID。 这就是您要保存在自己的数据库中以供将来付款使用的内容。