#B33fb0n3

1 messages · Page 1 of 1 (latest)

upper ravenBOT
neon swallow
#

Hello 👋
Can you share the code you're using for this?

cunning cypress
#

My Code is:
DirectPayment.js:

import React from 'react';

function DirectPayment() {
    return (
        <>
            <stripe-buy-button
                buy-button-id="buy_btn_1NB..."
                publishable-key="pk_live_51N1Zka..."
            >
            </stripe-buy-button>
        </>
    )
}

export default DirectPayment

And in my index.html (inside my head):

<script async
        src="https://js.stripe.com/v3/buy-button.js">
</script>
upper ravenBOT
halcyon cedar
#

Thanks for the code, trying to repro this and will get back to you

#

For my own understanding, what are the empty angle brackets for?

cunning cypress
#

Thanks!
You mean these ones?

<>
...
</>
halcyon cedar
#

Correct

cunning cypress
#

It for an React Fragment. You know them?

halcyon cedar
#

I'm familiar with fragments, less familiar with that specific HTML. I just wanted to make sure I didn't need to do anything specific with my setup around them to reproduce what you are doing

cunning cypress
#

ah no problem. You can also use

<React.Fragment>
...
</React.Fragment>
halcyon cedar
#

Having trouble recreating this, do you have a test site I can look a this on?
And have you tried making a page that is just that DirectPayment component to see if that sees the same error?

cunning cypress
#

Yeah, same error. Let me create a project for you...

cunning cypress
halcyon cedar
#

Thank you! Checking in to that

#

How can I see this error? I see the buy button properly on that page and don't see errors in the console.

image.png
#

Poor phrasing. I meant to ask: is there a place I should be looking for this error other than the console?

cunning cypress
halcyon cedar
#

Gotcha, so the page should just load with that "Uncaught runtime errors" overlay immediately if this error is happening?

#

What browser are you using? I can try in another

cunning cypress
#

and this error shows only if I use the stripe-buy-button

halcyon cedar
#

Oh if you use it. Gotcha

cunning cypress
#

I should not show the error ^^

cunning cypress
halcyon cedar
#

Clicking on the button works for me too in Chrome. Have you tried in incognito mode without plugins?

#

Would you mind checking your chrome version so I can test with that one as well?

cunning cypress
#

yes, if I just click on the cross to remove the display of the error everything works fine. But the error display shows

cunning cypress
cunning cypress
halcyon cedar
#

I'm sorry if I'm being slow here but I am still not recreating this. So it should show up once I click on the button? Or do I need to do something else?

cunning cypress
#

you just need to load the page

cunning cypress
halcyon cedar
#

Yes please. I think I have a clear picture of this but I think that would still help

cunning cypress
cunning cypress
#

@halcyon cedar you got my problem?

halcyon cedar
#

Still not working for me. The playcode page that you made loads properly and works for me. I will ask my colleagues to take a look to see if they can reproduce this error.

cunning cypress
upper ravenBOT
cunning cypress
#

@boreal quiver So... what's next? or @halcyon cedar or @neon swallow ?

boreal quiver
#

Just coming online. Give me a moment to catch up

cunning cypress
#

oh ok. Just saw you are offline...

boreal quiver
#

So if you put the buy button on a page all by itself you are seeing this runtime error?

#

Hmm yeah I don't see it in the playground at all

#

So seems like something to do with your project

#

Have you tried a fresh project with no other dependencies or anything

upper ravenBOT
cunning cypress
#

It has nothing to do with my project. If I remove

<stripe-buy-button
                buy-button-id="buy_btn_1NB..."
                publishable-key="pk_live_51N1Zka..."
            >
            </stripe-buy-button>

these lines, the error does not pop up. Also you can see in this message: #1110933361511383100 message
That it's something from stripe and not from me

boreal quiver
#

Sure but we can't reproduce this issue when we load a buy-button on our projects or on the React Playground that you provided above.

#

So that means it is an issue involving something in your project interacting with Buy Button

cunning cypress
#

But how can I resolve this issue if the code error pointing to stripe code?

#

If it's points to my code ok, than I am able to fix it, but in stripes code? I can't...

boreal quiver
#

Well you are going to need to figure out what in your code is causing the issue. So the recommendation with stuff like this is to put your buy-button in a fresh project and then add your dependencies one by one.

#

Then you can pinpoint what is causing the friction.

#

Depending on what that is, we might be able to help.

#

But right now we can't really do anything since this is directly related to your project as we can't reproduce the issue.

#

To me this just looks like a warning from your React project in some way.

#

Like if you close out the overlay warning does everything work?

cunning cypress
#

So I just try to live with it?

boreal quiver
#

Not at all

#

But it isn't something that I can fix for you.

#

You need to debug your project for what is causing conflict as I noted above.

cunning cypress
#

I can't fix stripe errors. So the customer need to click everytime he enter the cross on the site...

boreal quiver
#

Sorry we are going in circles unfortunately. This isn't necessarily a Stripe error. Buy Button works just fine on all of our projects, just not yours. So there is something particular to your project that is causing the overlay warning. You need to disable that or figure out what in your project is causing that. There is nothing I can do from my end to fix that for you.