tsahnar-paymentElement | Stripe Developers | Page 1

gusty bison Mar 14, 2022, 8:04 AM

#

Hi there, do you have a page where I can reproduce the problem?

worn crow Mar 14, 2022, 8:37 AM

#

It is hapenning when we are working locally

#

on the dev enviormant

#

#

Nothing is loading in the input fields and we cannot type in them

fair flume Mar 14, 2022, 9:04 AM

#

Hi! Can you share your code?

worn crow Mar 14, 2022, 9:27 AM

#

yes

#

just a second

#

We have this wrapper that wraps places where we use the form:

#

export const StripeElementsWrapper: FC = ({ children }) => {
const stripePromise = loadStripe(config.stripePublicKey);
return <Elements stripe={stripePromise}>{children}</Elements>;
};

fair flume Mar 14, 2022, 9:45 AM

#

Where are you passing the clientSecret to the Element?

#

You can see an example here: https://stripe.com/docs/stripe-js/react#elements-provider

worn crow Mar 14, 2022, 9:56 AM

#

No client secret

fair flume Mar 14, 2022, 9:57 AM

#

As mentioned in the doc I just shared: " If you want to use Payment Element, it is required to pass in the clientSecret."

worn crow Mar 14, 2022, 9:58 AM

#

It worked without it

#

up until now

#

#

As you see I cannot even pass a saecret key in options

fair flume Mar 14, 2022, 10:02 AM

#

Are you using React Stripe.js? https://stripe.com/docs/stripe-js/react

worn crow Mar 14, 2022, 10:04 AM

#

yes import { Elements } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";

#

I should say that this is somwthing that worked - we have not changed anything

#

and in our starging/prod enviorments its working. In our deve enviorment we get the error I send you

fair flume Mar 14, 2022, 10:06 AM

#

Strange. And this is the error:

Uncaught (in promise) URIError: URI malformed
at decodeURIComponent (<anonymous>)
And you are sure it comes from the Payment Element?

worn crow Mar 14, 2022, 10:07 AM

#

I think so

#

The fields are not loaded propely and you can see the error is from V3

#

stripe.esm.js

#

error in initStripe method

fair flume Mar 14, 2022, 10:20 AM

#

Sorry Discord is busy right now. Could you send your code and the error message to Stripe Support directly? They will be able to better help you. https://support.stripe.com/?contact=true

worn crow Mar 14, 2022, 10:46 AM

#

We already send it there

#

no response

#

yet\

ornate ingot Mar 14, 2022, 11:22 AM

#

Hey there, taking over from @fair flume

#

Which version of @stripe/react-stripe-js do you have installed?

vestal tideBOT Mar 14, 2022, 12:04 PM

#

This thread has been archived. If you need help with anything else please ask in #dev-help or contact Stripe Support: https://support.stripe.com/contact

Stripe: Help & Support

Find help and support for Stripe. Our support center provides answers on all types of situations, including account information, charges and refunds, and subscriptions information. Get your questions answered and find international support for Stripe.

worn crow Mar 14, 2022, 2:19 PM

#

Hi! se we use version 1.4.1

zinc zealot Mar 14, 2022, 2:20 PM

#

Hey. Give me a bit to catch up here

worn crow Mar 14, 2022, 2:22 PM

#

Ok let me know if you got questions for me

zinc zealot Mar 14, 2022, 2:22 PM

#

I see. Has someone responded to your support request yet over email?

worn crow Mar 14, 2022, 2:26 PM

#

They said they are still checking it

#

but no concrete response

zinc zealot Mar 14, 2022, 2:27 PM

#

Ok. If they are already investigating there, I will let them continue to assist you in that channel

#

They'll give you a concrete response

#

Will be a difficult thing to investigate over Discord

#

As there are many threads

ornate ingot Mar 14, 2022, 2:50 PM

#

@worn crow Sorry, which version of @stripe/stripe-js?

worn crow Mar 14, 2022, 2:51 PM

#

1.4.1

#

sec

#

sorry this is the react one

ornate ingot Mar 14, 2022, 2:51 PM

#

Looks like your types are just out-of-date. So you could silence with // @ts-ignore

worn crow Mar 14, 2022, 2:52 PM

#

1.16.0

ornate ingot Mar 14, 2022, 2:52 PM

#

yup, they were added in 1.18.0 I think: https://github.com/stripe/stripe-js/releases/tag/v1.18.0

GitHub

Release v1.18.0 · stripe/stripe-js

New Features

Add types to support the upcoming Payment Element. (#236)

#

Try updating

worn crow Mar 14, 2022, 2:52 PM

#

where do I get the client secret? How did it work without it up until now?

ornate ingot Mar 14, 2022, 2:52 PM

#

worn crow where do I get the client secret? How did it work without it up until now?

From the Payment Intent

#

Are you just now transitioning to use <PaymentElement />?

worn crow Mar 14, 2022, 2:53 PM

#

No

#

we have this for the last couple on months

#

it worked without it. We use the client secret when trying to confrim setup intent in the client

ornate ingot Mar 14, 2022, 2:54 PM

#

I don't know then. But the <Elements> provider requires the clientSecret prop if you're using the <PaymentElement>

worn crow Mar 14, 2022, 2:54 PM

#

We didnt need it - and in fact this is working on other enviorments (like our prod)

ornate ingot Mar 14, 2022, 2:54 PM

#

Stripe.js will error without it and the Element won't render

#

But anyway, that error you shared is just your types being out-of-date. So update your packages and it'll have new type defs

worn crow Mar 14, 2022, 2:56 PM

#

So should I update stripe.js? ot stripe-react js

#

?

ornate ingot Mar 14, 2022, 2:56 PM

#

Both if you can

#

I think react-stripe-js in this instance as it has a stripe-js dependency for the types anyway: https://github.com/stripe/react-stripe-js/blob/master/package.json#L65

GitHub

react-stripe-js/package.json at master · stripe/react-stripe-js

React components for Stripe.js and Stripe Elements - react-stripe-js/package.json at master · stripe/react-stripe-js

worn crow Mar 14, 2022, 3:12 PM

#

Ok I will try it

vestal tideBOT Mar 14, 2022, 3:46 PM

#

This thread has been archived. If you need help with anything else please ask in #dev-help or contact Stripe Support: https://support.stripe.com/contact

Stripe: Help & Support

Find help and support for Stripe. Our support center provides answers on all types of situations, including account information, charges and refunds, and subscriptions information. Get your questions answered and find international support for Stripe.

worn crow Mar 14, 2022, 4:09 PM

#

Hi again

#

i tried updating but I still get the same result

#

updated both stripe react js and stripe js to latest

slate portal Mar 14, 2022, 4:11 PM

#

Catching up here @worn crow, give me a moment!

worn crow Mar 14, 2022, 4:12 PM

#

I want to add that this is something that worked, we even rolled back to a very old branch but still the same behvior

#

in local env, the stripe credit card fields are not loading properly

slate portal Mar 14, 2022, 4:23 PM

#

I know you are saying it worked before, but Payment Element has always required a client secret in order to render.

worn crow Mar 14, 2022, 4:24 PM

#

I can send you a link now to a form which does not have the client secret

#

and it works

#

locally it stopped working

#

we use the generated secret when calling confirmCardSetup

slate portal Mar 14, 2022, 4:25 PM

#

That would be great

worn crow Mar 14, 2022, 4:27 PM

#

https://checkout-v2.sandbox.getbalance.com/?cid=5743-c5b570a1-6a37-46f6-a365-f369e0369af1&isAuth=false

#

go to the drop down and click add new card

#

This will open our form that uses your elements

#

As you can see everything is working as expected.. in our dev env its not loading properly

slate portal Mar 14, 2022, 4:49 PM

#

Thanks for providing that and sorry for the delay! Still looking, give me a moment.

worn crow Mar 14, 2022, 4:52 PM

#

thanks

slate portal Mar 14, 2022, 4:53 PM

#

Can you provide your account ID?

worn crow Mar 14, 2022, 4:53 PM

#

where do I get it?

slate portal Mar 14, 2022, 4:54 PM

#

It will be in the top right of your Dashboard here: https://dashboard.stripe.com/settings/account

worn crow Mar 14, 2022, 4:57 PM

#

acct_1I2w7nH9XIA4kPmA

#

For the link I send you the account is different

#

because for local dev we got a different account. What I sent you (where it working) its the sandbox

slate portal Mar 14, 2022, 5:10 PM

#

Alright so from testing it doesn't look like you are using Payment Element in that sandbox

#

Ah actually, I'm not sure that is the correct account for that form. I'm not seeing my test in the account at all.

worn crow Mar 14, 2022, 5:17 PM

#

yeah as i told you

#

the link I provided is for ouir sandbox

#

where it works

slate portal Mar 14, 2022, 5:18 PM

#

I ran a test payment on that link that had a working form to take a look at how the payment was created, but it isn't showing in the above account.

worn crow Mar 14, 2022, 5:18 PM

#

Correct

#

I can send you the account of the form

#

but there we do not have any issue

slate portal Mar 14, 2022, 5:18 PM

#

Yep sure, that would still be helpful as you are stating the two forms should behave the same way.

worn crow Mar 14, 2022, 5:20 PM

#

sending now

#

acct_1GmenhDI8A3U6F9i

slate portal Mar 14, 2022, 5:29 PM

#

Okay thank you. So it looks like you are using Card Element here with a SetupIntent. This is a different integration than Payment Element. Card Element does not require a client secret in order to render like Payment Element does.

worn crow Mar 14, 2022, 5:32 PM

#

Ok so we are now aligned on this

#

Got any idea whats causing the error we are seeing?

silver hawk Mar 14, 2022, 5:44 PM

#

👋 Hello! I'm hopping in since @slate portal has to step out

#

You're referring to the URI Malformed error from earlier?

worn crow Mar 14, 2022, 5:54 PM

#

yes

#

Still same behvior when working on dev enviorment

worn crow Mar 14, 2022, 6:13 PM

#

?

silver hawk Mar 14, 2022, 6:19 PM

#

I'm trying to reproduce the same error, but I'm not seeing the same issue - what version of react-stripe-js and stripe-js are you using?

worn crow Mar 14, 2022, 6:21 PM

#

As I wrote above we used 1.4.1 and 1.16

#

but I updated both to latest and it still happening

silver hawk Mar 14, 2022, 6:23 PM

#

and what version of react are you using?

worn crow Mar 14, 2022, 6:26 PM

#

17.0.1

silver hawk Mar 14, 2022, 6:36 PM

#

I'm still not able to reproduce for some reason - is there anything unique about your dev setup that I may be missing in my reproduction?

worn crow Mar 14, 2022, 6:45 PM

#

I dont think so...

#

its just stopped working suddenly

#

The error is not clear - do you have any idea where this can come up? The url deformed error

silver hawk Mar 14, 2022, 6:57 PM

#

I'm not sure why this could be happening at all, and it's tough because I don't see the same thing in my own local integration

#

Is this something you see happen consistently across chrome, firefox, and safari?

worn crow Mar 14, 2022, 7:00 PM

#

yes

#

Also there was another use case that it happned on our sandbox enviormnt - we cleared the stripe cookies, did restart and it worked

#

So it happned one time not in our local env

silver hawk Mar 14, 2022, 7:28 PM

#

Just to triple check - when you log/print config.stripePublicKey right before calling loadStripe you get a pk_xxx value, correct?

worn crow Mar 14, 2022, 8:36 PM

#

yes

zinc raft Mar 14, 2022, 8:53 PM

#

Thank you for confirming. We are still looking in to what may be causing this error.

worn crow Mar 14, 2022, 9:00 PM

#

Thanks!

vivid tide Mar 14, 2022, 9:11 PM

#

hey @worn crow -- how are you accessing this local env? Can you share the URL here (I'm aware it won't work, but would like to see the full URL)

worn crow Mar 14, 2022, 9:12 PM

#

example: http://localhost:3003/?cid=4-b5b08dc4-14cf-40e2-a65d-f5b568532b70&isAuth=false

vivid tide Mar 14, 2022, 9:18 PM

#

Have you been able to narrow this down to a minimal reproduction you can share the complete runnable code for we can inspect?

worn crow Mar 14, 2022, 9:29 PM

#

I think w found the issue - on our end

#

Thank you for you support

#

took a lot of time to investigate and pin point the exact issue

hoary talon Mar 14, 2022, 9:30 PM

#

What was the problem?

vivid tide Mar 14, 2022, 9:30 PM

#

Can you share what that was, exactly?

hoary talon Mar 14, 2022, 9:30 PM

#

If other people run into something similar it would be helpful for us to know what the fix was. 🙂

worn crow Mar 14, 2022, 9:32 PM

#

It was something in our local enviorment

#

we didnt pass some enviorment variables and its messed up our URL

#

explains why it happened only in our local env

vivid tide Mar 14, 2022, 9:34 PM

#

I'm guessing there was some placeholder or missing component leading to an invalid URL structure?

worn crow Mar 14, 2022, 9:34 PM

#

yes exactly

#

Thank you for helping with this

vivid tide Mar 14, 2022, 9:35 PM

#

Similar error to the one seen here, but not exactly the same: https://example.com/test%s

#

in dev console you get The attempt to bind "/test%s" in the workspace failed as this URI is malformed.

#tsahnar-paymentElement