Meet-react

[drowsy furnace]

hi, generally, no, you would have your backend call https://stripe.com/docs/api/payment_methods/customer_list and then return back relevant info like the IDs/brand/last4 for display on the frontend

[white pivot]

I am getting is kind of error in add secret key in react js

Invalid value for elements(): clientSecret should be a client secret of the form ${id}secret${secret}.

[jovial zenith]

Hi! I'm taking over this thread.

Can you console.log the client secret you are using?

[white pivot]

yes I am console log the secret key

[jovial zenith]

Can you copy-past it here?

I mean the clientSecret. Can you past it here since it looks like it's the wrong value?

Just to be clear, with the Elements component you need to pass a clientSecret. And based on the error message you shared it looks like there's an issue with it.

[white pivot]

seti_1LfKUbSDKDxgNBOJBQ5EFY22_secret_MO6iV79UTLuWEeqk9VO4xr8RBNSojm8

I am doing like this
const options = {
// passing the client secret obtained from the server
clientSecret: 'seti_1LfKUbSDKDxgNBOJBQ5EFY22_secret_MO6iV79UTLuWEeqk9VO4xr8RBNSojm8',
};

//getting key from API pass it down
clientSecretkey ="seti_1LfKUbSDKDxgNBOJBQ5EFY22_secret_MO6iV79UTLuWEeqk9VO4xr8RBNSojm8"

const options = {
clientSecret: clientSecretkey,
};

[jovial zenith]

Thanks! And how do you use the Element component?

[white pivot]

<div className="App">
<Elements stripe={stripePromise} options={options}>
<CheckoutForm />
</Elements>
</div>

[jovial zenith]

It looks okay to me. And you are still getting this error message?

Invalid value for elements(): clientSecret should be a client secret of the form ${id}secret${secret}.

[white pivot]

yes

[jovial zenith]

Do you have a URL with your website so I can try to reproduce this?

[white pivot]

No, actually I don't

[jovial zenith]

Or could you try to do a console.log(options) to see exactly what's in there?

[white pivot]

no I am not try this let me check

[jovial zenith]

This client secret looks correct seti_1LfKUbSDKDxgNBOJBQ5EFY22_secret_MO6iV79UTLuWEeqk9VO4xr8RBNSojm8
So I'm guessing it is not passed correctly to the Elements component.

[white pivot]

Actually, I found what happened here when the first time load the page stripe element not found the key that is why I am getting this error

{clientSecretKey &&
<Elements stripe={stripePromise} options={options}>
<CheckoutForm />
</Elements>}

[jovial zenith]

Yes, you need to make sure the clientSecretKey exist before loading the Element.

[white pivot]

now I'm getting this error while confirm payment
No such payment_intent: 'seti_1LfLNESDKDxgNBOJMEkQ9Pch'

This from API
code: "resource_missing"
doc_url: "https://stripe.com/docs/error-codes/resource-missing"
message: "No such payment_intent: 'seti_1LfLNESDKDxgNBOJMEkQ9Pch'"
param: "intent"
type: "invalid_request_error"

I cross check the ID but it's same

[jovial zenith]

Well seti_xxx isn't a PaymentIntent, it's a SetupIntent.

So you need to use https://stripe.com/docs/js/setup_intents/confirm_setup instead

[white pivot]

payment intent and setup intent both are different?

[jovial zenith]

Yes:

• PaymentIntent: create a charge to collect payment right now
• SetupIntent: save the payment method for later use

[white pivot]

Thanks