JRietz-client-secret | Stripe Developers | Page 1

ashen moon Sep 23, 2021, 5:39 PM

#

"I am currently creating a payment_intent in the stripe-react-native SDK using a PK" -> can you speak a little more on this? You should only be able to create Payment Intents with a secret key?

radiant crown Sep 23, 2021, 5:45 PM

#

So maybe that is the issue then? If I just provide my sk instead of pk it will give me the correct response as it will be secret and not publishable?

ashen moon Sep 23, 2021, 5:47 PM

#

That could be the issue, but do you have a request ID I could take a look at?

radiant crown Sep 23, 2021, 5:48 PM

#

You mean in the Dashboard logs?

#

req_dQEcuAV1O0yu24

#

This one

ashen moon Sep 23, 2021, 5:49 PM

#

👍 thank you!

radiant crown Sep 23, 2021, 5:49 PM

#

That was for the payment_method

#

This one is for payment_intent: req_OkgIiawWEhCXmC

#

But I should always initialise Stripe with the PK right?

ashen moon Sep 23, 2021, 5:55 PM

#

For your client-side requests, yes, you should be using the PK!

#

req_OkgIiawWEhCXmC is a request to list Payment Intents for a particular customer, it's not actually creating any payment intent

radiant crown Sep 23, 2021, 5:55 PM

#

ahaaa

ashen moon Sep 23, 2021, 5:56 PM

#

Out of curiousity, have you logged what the secret is before whatever line in your code is hitting the error?

radiant crown Sep 23, 2021, 5:57 PM

#

Nope I haven't, but I was about to actually

radiant crown Sep 23, 2021, 5:57 PM

#

ashen moon req_OkgIiawWEhCXmC is a request to list Payment Intents for a particular custome...

Exactly that payment_intent is being created from my phone using Apple Pay

ashen moon Sep 23, 2021, 6:01 PM

#

radiant crown Nope I haven't, but I was about to actually

Definitely do this first, and let me know what it says - I should've asked you to start here in the first place

radiant crown Sep 23, 2021, 6:29 PM

#

I get the assert in the swift code but I think the reason it fails is because the client secret isn't valid

#

It happens here in the else statement:
if publishableKeyIsUserKey { assert( secret.hasPrefix("pi_"), "secret format does not match expected identifer formatting.") endpoint = "\(APIEndpointPaymentIntents)/\(secret)" } else { assert( STPPaymentIntentParams.isClientSecretValid(secret), "secret format does not match expected client secret formatting.") let identifier = STPPaymentIntent.id(fromClientSecret: secret) ?? "" endpoint = "\(APIEndpointPaymentIntents)/\(identifier)" parameters["client_secret"] = secret }

ashen moon Sep 23, 2021, 6:34 PM

#

And what did you see when you printed it out?

radiant crown Sep 23, 2021, 6:36 PM

#

undefined

#

Where would it be suitable to provide the SK?

#

I can obviously do it when using curl but it's a bit different when using TypeScript

#

Would I provide it in the Header?

ashen moon Sep 23, 2021, 6:38 PM

#

The SK is something you should only be using from your server, not client-side at all.

radiant crown Sep 23, 2021, 6:38 PM

#

Yeah

#

Thought so

#

`const fetchPaymentIntentClientSecret = async () => {
const response = await fetch('https://api.stripe.com/v1/payment_intents', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
currency: 'sek',
items: cart,
force3dSecure: true,
}),
});
const { clientSecret } = await response.json();
console.log(clientSecret);

return clientSecret;

};`

#

This is what triggers the issue, I am afraid the response is incorrect

ashen moon Sep 23, 2021, 6:41 PM

#

Again, you shouldn't creating the Payment Intent directly from your client-side code. You should be calling to your own server, which will be creating the Payment Intent and sending back the client secret. We talk about this here: https://stripe.com/docs/payments/accept-a-payment?platform=react-native&ui=custom#react-native-create-client-side

Accept a payment

Securely accept payments online.

radiant crown Sep 23, 2021, 6:45 PM

#

Got it, mainly for security reasons eh?

ashen moon Sep 23, 2021, 6:46 PM

#

yeah... you don't want folks to be able to just take your publishable key and use it to create payments on your account

radiant crown Sep 23, 2021, 6:48 PM

#

Yeah that makes sense of course, I just started developing on Stripe yesterday so still learning a bit. But then I basically keep the server as it is in the example and just provide my secret key and it should be alright

ashen moon Sep 23, 2021, 6:52 PM

#

Very understandable - all this can get very confusing! Are you looking at the example in the docs I linked, or a different one?

radiant crown Sep 23, 2021, 6:57 PM

#

I am looking at the stripe-reaact-native-sdk example

#

https://github.com/stripe/stripe-react-native/tree/master/example

GitHub

stripe-react-native/example at master · stripe/stripe-react-native

React Native library for Stripe. Contribute to stripe/stripe-react-native development by creating an account on GitHub.

ashen moon Sep 23, 2021, 6:57 PM

#

👍 Gotcha, then yes that server example should be a great starting point to get the basic flow working for you

radiant crown Sep 23, 2021, 6:59 PM

#

Yupp I got it working with complete payments on my simulator but got some issues on my real device, thought it had something to do with my server request to the API so I started to experiment a bit there and ended up here 😄

#

But I think my issue was something else, going back to the local server configuration now and testing it again.

#

But when running this on production, do I have to spin up my local server on some service, hosting it on firebase for example? We already have stripe payments integrated but I wanted to add Apple Pay to our offering

ashen moon Sep 23, 2021, 7:11 PM

#

Yes, when you run this in production you need some kind of server to get this whole flow working (firebase should work fine!)

radiant crown Sep 23, 2021, 7:33 PM

#

Yeah, on my real device I still don't manage to connect to the server though. I only get through to initialising Apple Pay if I provide the PK manually

ashen moon Sep 23, 2021, 7:37 PM

#

I need to head out, but @sacred salmon can help you out!

#

@radiant crown can you clarify - is your current issue that Apple Pay isn't working on a real device? are you hitting the same errors (bad client secret format) that you mentioned before?

radiant crown Sep 23, 2021, 7:41 PM

#

Yes it is not working on a real device but since I went back to trying to connect to my local server, I am getting socket issues instead. Seems like it's my server that is not accepting connections.

#

I think this issue is mainly because my phone does not have access to my local host. Which makes sense

sacred salmon Sep 23, 2021, 7:45 PM

#

Yes that will do it

#

Apple Pay doesn't play nice with local host anyways

#

ngrok can help you get a public facing https way to serve your test app https://ngrok.com/

ngrok - secure introspectable tunnels to localhost

ngrok secure introspectable tunnels to localhost webhook development tool and debugging tool

radiant crown Sep 23, 2021, 7:50 PM

#

Yeah because I assume that my example server just automatically utilises localhost as it intends to just work with the simulator anyways?

#

Nice, trying it out now. Forwarded my localhost to a public web interface

sacred salmon Sep 23, 2021, 7:56 PM

#

Sounds good let me know how it goes!

radiant crown Sep 23, 2021, 8:08 PM

#

It worked 😄

sacred salmon Sep 23, 2021, 8:09 PM

#

Awesome!

radiant crown Sep 23, 2021, 8:11 PM

#

Thanks for the help!

sacred salmon Sep 23, 2021, 8:17 PM

#

Of course! Always happy to help

#JRietz-client-secret