Damanmokha | Stripe Developers | Page 1

strange jewelBOT May 11, 2023, 2:52 PM

#

lean kindle May 11, 2023, 2:55 PM

#

Is this just the sample quickstart app that you downloaded? Or is this your modified version?

calm spade May 11, 2023, 2:58 PM

#

This is just a sample code that I used in my project. I copied the specific part from the sample and added it to my React application. It worked fine for the first two steps where the payment intent was successfully created. However, when it comes to the payment collection step, I encountered the error mentioned earlier.

lean kindle May 11, 2023, 3:01 PM

#

Ah ok so you merged the code into your existing app

#

Can you share the contents of your attach.js file?

#

Also what line number is it saying the error is occurring on? Screenshot is cut off

calm spade May 11, 2023, 3:06 PM

#

This is my component file, the attach.js file is just react runtime thing, it's asking for authorisation on terminal.collectPaymentMethod, which is on 83 line of my component file which is attached.

📎 Stripe.jsx

lean kindle May 11, 2023, 3:08 PM

#

Oh looks like you leaked your test mode secret key

#

You'll need to roll that key now since it's been exposed: https://stripe.com/docs/keys#rolling-keys

API keys

Use API keys to authenticate API requests.

calm spade May 11, 2023, 3:10 PM

#

opps, sorry. that was not needed in here, added for some hit and trail forgot to remove it 😐

lean kindle May 11, 2023, 3:10 PM

#

Also apiKey isn't a valid parameter to StripeTerminal.create

calm spade May 11, 2023, 3:11 PM

#

yes, I checked that later in API reference. was trying to provide auth token as it was not populating itself.

#

any idea on that why i am getting auth error?

lean kindle May 11, 2023, 3:12 PM

#

Let me check with a colleague. I'm not as familiar with terminal

maiden cedar May 11, 2023, 3:13 PM

#

Hello 👋

calm spade May 11, 2023, 3:13 PM

#

okay, thanks, will be waiting

#

Hey @maiden cedar

maiden cedar May 11, 2023, 3:14 PM

#

You're using the Javascript SDK correct?

calm spade May 11, 2023, 3:15 PM

#

yes

#

in react

maiden cedar May 11, 2023, 3:16 PM

#

It sounds like your StripeTerminal object is losing the connectionToken somewhere
https://stripe.com/docs/terminal/payments/setup-integration?terminal-sdk-platform=js#initialize

#

Can you try printing terminal before calling collectPaymentMethod?

calm spade May 11, 2023, 3:17 PM

#

ok let me check and share you the console for it.

#

maiden cedar May 11, 2023, 3:18 PM

#

Can you expand the object?

#

Do you a reference to the fetchConnectionToken callback function?

calm spade May 11, 2023, 3:19 PM

#

maiden cedar May 11, 2023, 3:19 PM

#

Oh I think your fetchConnectionToken() is returning a promise instead of a string value

#

Can you change the syntax to use async-await instead as shown in the example?
https://stripe.com/docs/terminal/payments/setup-integration?terminal-sdk-platform=js#connection-token-client-side

calm spade May 11, 2023, 3:21 PM

#

for only fetchConnectionToken

maiden cedar May 11, 2023, 3:21 PM

#

yup

calm spade May 11, 2023, 3:21 PM

#

let me do it and then check

maiden cedar May 11, 2023, 3:22 PM

#

👍 I believe the function needs to return a string value for the connectionToken that the client-side SDK then uses to perform operations. Currently, the function is returning a promise instead (returned by fetch)

calm spade May 11, 2023, 3:23 PM

#

Done but its same.

maiden cedar May 11, 2023, 3:24 PM

#

Hmm it seems to be failing a GET request for the PaymentIntent 🤔

calm spade May 11, 2023, 3:24 PM

#

i checked it's returning string check the fetchConnectionToken line

#

yes GET request for payment intent is failing and saying to authorise 😐

maiden cedar May 11, 2023, 3:25 PM

#

Great! Are you calling Stripe API endpoint directly from your client-side code?
what is the value for API_ORDER_PAYMENT_INTENT ?

#

Is it calling your server OR stripe API directly?

calm spade May 11, 2023, 3:26 PM

#

API_ORDER_PAYMENT_INTENT
this is my server BE endpoint for generating Intent.

maiden cedar May 11, 2023, 3:27 PM

#

Gotcha. If you comment out the collectPaymentMethod function, do you see the error OR does it go away?

calm spade May 11, 2023, 3:27 PM

#

Yup, it goes away,

maiden cedar May 11, 2023, 3:28 PM

#

Fascinating.. Hmm, thinking..

calm spade May 11, 2023, 3:29 PM

#

i consoled client_secret just before terminal.collectPaymentMethod, i am getting client_secret, but after that stripe payment intent api fails with authentication.

maiden cedar May 11, 2023, 3:35 PM

#

Can you share the PaymentIntent ID?

calm spade May 11, 2023, 3:36 PM

#

this one is the latest pi_3N6bXfE1QPAb4xC506wh31ls

maiden cedar May 11, 2023, 3:37 PM

#

The reader is registered to the same account correct?

calm spade May 11, 2023, 3:38 PM

#

yes

#

reader is simulator right now.

maiden cedar May 11, 2023, 3:41 PM

#

Ah you're running the example code that we have in our quick start right?
https://stripe.com/docs/terminal/quickstart?platform=web&client=js

#

Only diff is you're running it in a react component

calm spade May 11, 2023, 3:42 PM

#

yup

maiden cedar May 11, 2023, 3:43 PM

#

Can you comment out the useEffect() that you have in the component and try again?

calm spade May 11, 2023, 3:43 PM

#

ok let me check

#

Same

maiden cedar May 11, 2023, 3:45 PM

#

Huh so weird

calm spade May 11, 2023, 3:47 PM

#

hmm, not sure why it is not getting it, the quick start guide works fine for me also. i have matched the code on various level it seems similar but, not sure why it's not appending auth in payment intent.

strange jewelBOT May 11, 2023, 3:47 PM

#

maiden cedar May 11, 2023, 3:57 PM

#

You've removed the apiKey parameter from StripeTerminal.create correct?

calm spade May 11, 2023, 4:02 PM

#

Yup!

#

removed.

#

this is the latest file.

📎 Stripe.jsx

strange jewelBOT May 11, 2023, 4:05 PM

#

maiden cedar May 11, 2023, 4:07 PM

#

Thanks, trying to see if I can reproduce this

calm spade May 11, 2023, 4:08 PM

#

Sure thanks. Will be helpful 🙂

maiden cedar May 11, 2023, 4:16 PM

#

Are you using StrictMode?

#

Also, how exactly are you importing @stripe/terminal-js in your app?

calm spade May 11, 2023, 4:21 PM

#

it's just included in index.html

#

maiden cedar May 11, 2023, 4:22 PM

#

Gotcha.

#

Okay I tried the same code on my end but couldn't reproduce the behavior 😦

#

Can you print API_ORDER_PAYMENT_INTENT before calling .collectPaymentMethod ?

#

The other thing you can try is initializing the SDK in index.js instead of the component and pass the terminal object as props

calm spade May 11, 2023, 4:35 PM

#

it's working on your end?

maiden cedar May 11, 2023, 4:35 PM

#

yup

calm spade May 11, 2023, 4:36 PM

#

strange.

#

you want response from API_ORDER_PAYMENT_INTENT
? before collectPaymentMethod

maiden cedar May 11, 2023, 4:38 PM

#

Just wanted to double check if the URL was correct.
If you look into your network tools and check the failed request headers. what do you see?

#

For my successful request, I see something like this

Screenshot_2023-05-11_at_11.38.47_AM.png

#

Do you see Authorization key in the headers?

calm spade May 11, 2023, 4:39 PM

#

it's fine, it's responding the payment intent, as have already console.log just before

Screenshot_2023-05-11_at_10.09.29_PM.png

maiden cedar May 11, 2023, 4:39 PM

#

yup

calm spade May 11, 2023, 4:39 PM

#

no in my request Authorization header is not present.

maiden cedar May 11, 2023, 4:40 PM

#

Ah interesting, that's likely the issue

calm spade May 11, 2023, 4:40 PM

#

yes, but i don't see how to send if its not sent automaticly

#

did you tried the above, in React?

maiden cedar May 11, 2023, 4:42 PM

#

Yup in React
There should be another request to the same path but an OPTIONS request
Can you look at that one and share a screenshot?

#

Is that one failing too?

calm spade May 11, 2023, 4:43 PM

#

let me check.

#

there seems no options request.

Screenshot_2023-05-11_at_10.13.33_PM.png

maiden cedar May 11, 2023, 4:45 PM

#

I see. Can you try moving the terminal SDK intialization code to index.js file and passing the object down as a prop to your component?

So basically moving StripeTerminal.create. fetchConnectionToken and unexpectedDisconnect to the index file

calm spade May 11, 2023, 4:46 PM

#

yeah sure trying that now.

#

Screenshot_2023-05-11_at_10.20.50_PM.png

Screenshot_2023-05-11_at_10.20.59_PM.png

#

still the same 😦

maiden cedar May 11, 2023, 4:52 PM

#

Could you share the complete code in the App component?

#

also try restarting your react server + browser for good luck 😅

calm spade May 11, 2023, 4:55 PM

#

my App component has diffrent routes!

maiden cedar May 11, 2023, 4:55 PM

#

Also, curious about authInterceptor function

calm spade May 11, 2023, 4:55 PM

#

should i share that

#

Aahhh Fish

#

that might be the culprit

maiden cedar May 11, 2023, 4:55 PM

#

you should disable it

#

yup

#

IIRC from Angular concepts

#

it messes with Authorization headers

calm spade May 11, 2023, 4:56 PM

#

because in that i was manipulating the Auth for my Server's auth

#

let me try removing it

maiden cedar May 11, 2023, 4:56 PM

#

99% sure that's it 😅

#

🤞

calm spade May 11, 2023, 4:57 PM

#

Screenshot_2023-05-11_at_10.26.51_PM.png

#

Shit

#

100%

#

it was that

maiden cedar May 11, 2023, 4:57 PM

#

Should've asked for your other code way sooner 😄
No worries, glad we figured it out

calm spade May 11, 2023, 4:58 PM

#

I was also sending you the one with the component, i should have also checked the parent components 😐

maiden cedar May 11, 2023, 4:58 PM

#

All good, glad its working now!

calm spade May 11, 2023, 4:58 PM

#

Thank you so much guys!!!

#

You guys were very quick and helpfull 🙂

maiden cedar May 11, 2023, 4:59 PM

#

Happy to help!

#

I gotta step away now but if you have any follow ups @lethal dirge can help!

calm spade May 11, 2023, 5:00 PM

#

Sure thanks 🙂

#Damanmokha