Nelsonct7

[void grail]

Can you elaborate on what it is you're trying to do?

Like a visual checkbox to save the payment details?

[edgy mountain]

ya

[void grail]

Where's that 2nd screenshot from?

[edgy mountain]

its from the customer portal

[void grail]

Can you share an example pi_xxx that you're using with your Payment Element?

[edgy mountain]

I am using setup intent to creat the element, to store the card for future use

const setupIntent = await stripe.setupIntents.create({
// payment_method_types: ['bancontact', 'card', 'ideal','sofort'],
payment_method_types: ["card"],
customer: customerId,
});

[void grail]

Got it. Yep there's no checkbox like that for the Payment Element I'm afraid. Customer portal uses a custom UI

You'd need to build that yourself

[edgy mountain]

and how can I update the customer from front end

to set the default payment option

[void grail]

You can't, you'd need to make a server-side call to set that: https://stripe.com/docs/api/customers/update#update_customer-invoice_settings-default_payment_method

[edgy mountain]

ok, there is a chance some pyment cards fails, at that case how can I resolve the pyment intent status after redirected to the url

[void grail]

Depends what you mean by 'resolve'?

If you're using confirmSetup/confirmPayment then you'd just catch the decline/error in the Promise chain and reattempt the confirmation/prompt for new payment details

[edgy mountain]

in the switch cases

?

[void grail]

Which switch cases? Error handling for declines is outlined here: https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements#web-submit-payment

const {error} = await stripe.confirmPayment({
      //`Elements` instance that was used to create the Payment Element
      elements,
      confirmParams: {
        return_url: 'https://example.com/order/123/complete',
      },
    });


    if (error) {
      // This point will only be reached if there is an immediate error when
      // confirming the payment. Show error to your customer (for example, payment
      // details incomplete)
      setErrorMessage(error.message);
    } else {
      // Your customer will be redirected to your `return_url`. For some payment
      // methods like iDEAL, your customer will be redirected to an intermediate
      // site first to authorize the payment, then redirected to the `return_url`.
    }

[edgy mountain]

but I am getting redirectd to another router of my site, so from there how can I check the payment method status ?

[void grail]

Is this in the front-end? Can you share some code?

[edgy mountain]

switch (setupIntent.status) {
case 'succeeded':
setMessage('Success! Your payment method has been saved.');
break;
case 'processing':
setMessage(
"Processing payment details. We'll update you when processing is complete."
);
break;
default:
setMessage('');
break;
}
when I tried to make the api call from here, the page redirected but api didnt reach the back end

[void grail]

You'll need to share more code. When is this switch function invoked?

But I guess, yes. You'd want a new case to handle failures

[edgy mountain]

inside useEffect

[void grail]

Right, but that means nothing in the context of your application. When does that effect run? What are its dependencies?

[edgy mountain]

stripe object

[void grail]

You're giving me very small fragments of code without any context, its difficult to understand the root issue

[edgy mountain]

strip=useStripe()

<form onSubmit={handleSubmit}>
<AddressElement
options={{ mode: 'billing' }}
className="address_element"
/>
<PaymentElement
options={paymentElementOptions}
className="payment_element"
/>
<button
disabled={isLoading || !stripe || !elements}
id="submit"
type="submit"
className="checkout_submit"
>
<span id="button-text">
{isLoading ? <div className="spinner" id="spinner" /> : 'Submit'}
</span>
</button>
{/* Show any error or success messages */}
{message && <div id="payment-message">{message}</div>}
</form>

[void grail]

I don't understand why you have a switch statement like that. Why not just handle the error in your handleSubmit fn?

[edgy mountain]

so I can make the api call from the handle submit

the page wont get redirected by stripe

[void grail]

Which API call?

[edgy mountain]

to update the default_payment_option

[void grail]

I recommend just following the guide, there's a React example: https://stripe.com/docs/payments/save-and-reuse?platform=web&client=react#web-submit-payment-details

Personally, I'd set the default asynchronously via webhooks. Listen for setup_intent.successful and then make the API call

There's no guarantee your customer doesn't close the payment page before your React/JS code can make that call

[edgy mountain]

ya thats why I am making the call from the redirected page,

[void grail]

Right, but there's no guarantee that call is ever made

[edgy mountain]

but if the card fails my api will update the default_payment_method

[void grail]

Not if you do it via webhooks and only action setup_intent.succeeded events

[edgy mountain]

but the page is not in the scope of the elements tag

I am unable to retrieve the set up in tent there,

can the backend can check for the setup in tent status

[void grail]

A webhook endpoint to receive the setup_intent.succeeded events is backend code yes. And you wouldn't need to retrieve the Setup Intent as its included in the event payload

https://stripe.com/docs/webhooks

[edgy mountain]

ok, thanks man. I think I have an option now

[void grail]

np