aaroninbound

[true marsh]

Hi there, do you mean the setup_future_usage param (https://stripe.com/docs/api/payment_intents/create#create_payment_intent-setup_future_usage) ? If so, this param is for the PaymentIntent itself, so you can also use card element to setup a payment method for future usage.

[stark phoenix]

I mean this : https://stripe.com/docs/payments/save-and-reuse?platform=web. It only gives a PaymentElement example. And if I switch to a different element it doesn't work.

[true marsh]

Have you tested it out? what error did you see?

[stark phoenix]

Yes I have tested it. The error I got is this: Uncaught (in promise) IntegrationError: Invalid value for stripe.confirmSetup(): elements should have a mounted Payment Element or Express Checkout Element. It looks like you have other Elements on the page. Refer to https://stripe.com/docs/js/setup_intents/payment_method to confirm a Setup Intent by payment method.

[true marsh]

You should use stripe.confirmCardSetup (https://stripe.com/docs/js/setup_intents/confirm_card_setup#stripe_confirm_card_setup)

[stark phoenix]

But confirmCardSetup also gave another error

and confirmSetup is from the official documentation example

[true marsh]

Show me your code?

[stark phoenix]

`const AddPayment = (props: any) => {
const { clientSecret } = props;
const submitRef = useRef<HTMLButtonElement>(null);

return (
<div className={classNames(styles.pageContainer)}>
<PageHeader title="Add Payment Method" nextPath="/mypage" isFixed/>
{clientSecret && (
<Elements
stripe={stripePromise}
options={{ clientSecret: clientSecret }}
>
<PaymentCheckoutForm
submitRef={submitRef}
/>
{/* <PaymentSetupForm /> */}

      <PaymentStatus />
    </Elements>
  )}
  <Button block color="primary" onClick={() => submitRef.current!.click()}>
    Add Payment
  </Button>
</div>

);
};`

In PaymentCheckoutForm:

`
const stripe = useStripe();
const elements = useElements();
if (!elements) {
return;
}

const { error } = await stripe!.confirmSetup({
elements,
confirmParams: {
return_url: "http://localhost:3000/url",
},
});

if (error) {
setErrorMessage(error.message);
}`

[true marsh]

Where do you use <CardElement>?

[stark phoenix]

Card Element is used in react render codes

It works when we do the stripe payment

but it doesn't work if we save the card for future payment

[true marsh]

I don't see it in the code that you pasted earlier.

Anyway what's the error when you call stripe.confirmCardSetup?

[stark phoenix]

wait I am trying to rewrite it

Oh it seems to work. The payment method is submitted. But I can't use stripe.retrieveSetupIntent to get the setupIntent status now even if I provide a return_url.
If I use PaymentElement it will display the status after I setup the payment method.

This approach completely varies from the example provided by the official documentation.

[true marsh]

That's two different integration path. The doc that you are reading is for PaymentElement, but you are integrating a CardElement.

[stark phoenix]

Thanks. Where is the CardElement setup documentation?

[true marsh]

https://stripe.com/docs/payments/save-during-payment-cards-only

[stark phoenix]

Thanks. This is what we used for card payment. But this page doesn't mention anything about confirmCardSetup.

[true marsh]

I'm unable to find the page anymore, using cardElement is no longer the recommended integration path