#shaon

1 messages · Page 1 of 1 (latest)

wintry sleetBOT
jaunty mason
#

What kind of errors, can you share some context or an example?

late cove
#

Sure here is the error when calling the following endpoint:

ttps://api.stripe.com/v1/elements/sessions?key=<stripe_pub_key>&_stripe_account=<stripe_account_key>&type=setup_intent&locale=en-GB&client_secret=<client_secret>&expand[0]=payment_method_preference.setup_intent.payment_method

#

The provided key 'pk_test_...' does not have access to account

#

i know that the stripe publishable key is wrong

#

but i'd like to catch this error and add a toast

#

since it causes our application to break on this edge case

jaunty mason
late cove
#

do you have a reference for how to use this?

#

any examples?

jaunty mason
#

There's a stub for adding the listener in the reference I linked, but I don't have a deeper example handy right now

#

The main error you encounter is wrong API key?

#

Can you explain how that ends up happening, and if you're trying to address that particular error more systematically to avoid it?

late cove
#

yep wrong publishable key. So we generate a setup intent using the client secret that's given by a setup intent

const options = {
appearance,
clientSecret: setupIntent?.client_secret,
};

return (
<Elements stripe={stripePromise} options={options}>
<AddCardForm hashedId={setupIntent.payment_id} />
</Elements>
);

#

all the details seem to be correct except the publishable key which is incorrect

#

so the element will not load due to this and then basically the application will crash as the component inside Elements can't be rendered properly

jaunty mason
#
paymentElement.on('loaderror',(event) => {
    console.log('paymentElement loaderror');
    console.log(event);
  });

Using this I do catch invalid API key errors

#

Ok so with react you can likely do this with onError={handler}

#

on the Payment Element

#

let me try to add this too

late cove
#

hmm i'm not 100% sure how to do this as <Elements stripe={stripePromise} options={options}> seems to be the cause of the issue

#

and not sure how to listen for this load error

jaunty mason
#

Hmm yea trying to get that working myself, too

jaunty mason
#

ahh frustrating, i was using an outdated version of react-stripe-js 🤦

#

This should be supported using onLoadError={} on the payment element as long as you're on version 1.9 or later