zhbanchikk

[jaunty crag]

@uncut ravine let's continue in this thread

[uncut ravine]

sure, thanks

this is what I have in my 'parent' component ```<Elements
options={{
clientSecret: clientSecret,
appearance: {
theme: 'stripe',
}
}}
stripe={stripeClient}

<StripePayment
order={order}
{...props}
/>
</Elements>```

[jaunty crag]

Putting aside how to cancel PaymentIntent, I think your issue is purely how to take the latest PaymentIntent reflected when customer click "Pay"

[uncut ravine]

yep I don't have to cancel it if I can figure out how to use the latest PaymentIntent

[jaunty crag]

Then it comes to debug that part. You mentioned you did create a new payment intent with the new amount, you just need to find out how to save that new payment intent's secret to use on "Pay" button

[uncut ravine]

the problem is that when I debug, I see the latest PaymentIntent object with the latest amount.
Could you please tell me more about this part?

const elements = useElements();
...
const { error } = await stripe.confirmPayment({
  elements,
  confirmParams: {
    return_url: CLIENT_URL,
   },
});```
is that a reference to the instance of Elements that was created in the parent component ?

let's say what do I need to add to the above guide if I wanted to have a 'cancel' payment button (apart from the button)?

[jaunty crag]

It's the confirmation call using elements. The thing is elements use client secret indirectly on

React.useEffect(() => {
    // Create PaymentIntent as soon as the page loads
    fetch("/api/create-payment-intent", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ items: [{ id: "xl-tshirt" }] }),
    })
      .then((res) => res.json())
      .then((data) => setClientSecret(data.clientSecret));
  }, []);

These part the clientSecret is passed as option to the Elements

const options = {
    clientSecret,
    appearance,
  };

  return (
    <div className="App">
      {clientSecret && (
        <Elements options={options} stripe={stripePromise}>
          <CheckoutForm />
        </Elements>
      )}
    </div>
  );

You need to somehow update the latest clientSecret or options into this Elements

I guess this is some React thing