_andriiko

[stuck fjord]

Hi! Let me help you with this.

[shell swallow]

React code

`
const [clientSecret, setClientSecret] = useState('');
const createPaymentIntent = async (id: string) => {
try {
const { client_secret } = await API.getSubscription({
price_id: id,
});

  if (client_secret) {
    setClientSecret(client_secret);
  }
  setIsLoading(false);
} catch (error) {}

};

const handlePeriodChange = (id: string) => {
createPaymentIntent(id);
};
....
{clientSecret && stripePromise && (
<Elements
stripe={stripePromise}
options={{
** clientSecret,**
appearance: {
theme: 'flat',
rules: FORM_STYLES,
},
}}
>
<CheckoutForm selectedPeriodId={priceId} onPeriodChange={handlePeriodChange} plan={selectedPlan} />
</Elements>
)}`

Submit func

const stripe = useStripe(); const elements = useElements(); const handleSubmit = async () => { const { error } = await stripe.confirmPayment({ elements, redirect: 'if_required', }); };

[stuck fjord]

I guess the question here is if the application actually updates the client secret.

Actually, I would suggest you to update the existing PaymentIntent intead of creating a new one.

[shell swallow]

I am entirely confident that I am updating the client_secret and always passing the updated client_secret to <Elements> as follows:

`
<Elements
stripe={stripePromise}
options={{
clientSecret
}}

`

I suspect that by passing options={{ clientSecret }} inside Elements, I am not updating the client_secret. However, I am no longer aware of ways through which I could achieve this.

[stuck fjord]

As I meantioned, I suggest updating the PaymentIntent on the backend instead: https://stripe.com/docs/api/payment_intents/update