mathieu-react-elements | Stripe Developers | Page 1

heavy foxBOT Jan 27, 2023, 11:36 PM

#

mystic escarp Jan 27, 2023, 11:37 PM

#

Hello! We'd need a lot more details to help unfortunately

#

mathieu-react-elements

real flint Jan 27, 2023, 11:40 PM

#

Hey again, i'm using redirectToCheckout too, which might be any issue.

mystic escarp Jan 27, 2023, 11:40 PM

#

Possibly, but then there's "nothing to render" so I'm even less sure what your question could mean

#

@real flint do you have more details for me to help you?

real flint Jan 27, 2023, 11:46 PM

#

Here is the code, very simple

mystic escarp Jan 27, 2023, 11:46 PM

#

that's just a picture of code though

real flint Jan 27, 2023, 11:46 PM

#

But when I add in the stripe elements, the page goes blank, no logs in the console

#

What would you need ?

#

No logs here, otherwise would love to share it

mystic escarp Jan 27, 2023, 11:47 PM

#

But when I add in the stripe elements
what does that mean? Elements is a UI library that you use to collect payment method details on your own website. If you use Checkout, there's no reason to "add in the stripe elements".

real flint Jan 27, 2023, 11:48 PM

#

By elements, i simply meant the stripe related lines of code, as seen above

#

I've seen similar posts on stackoverflow, for instance https://stackoverflow.com/questions/72366543/whenever-i-put-the-payment-page-on-my-app-it-goes-blank-on-reactjs

#

But i'd like to solve the root issue rather than have such a problem remain

#

Would appreciate your input here

mystic escarp Jan 27, 2023, 11:50 PM

#

I'm sorry but right now I have no real information to help you debug this

#

Is Stripe loaded and initialized properly? where did you set your API key? Where did you include the source for Stripe.js?

#

do you see the redirecting log you have before including Stripe for example?

real flint Jan 27, 2023, 11:53 PM

#

Currently having a look at the initialization, no redirecting logs here

mystic escarp Jan 27, 2023, 11:53 PM

#

I mean that code runs even before anything Stripe related in your picture

#

So right now I'd recommend starting fresh and adding pieces of code slowly to figure out what's the problem

mystic escarp Jan 28, 2023, 12:12 AM

#

@real flint any luck?

real flint Jan 28, 2023, 12:12 AM

#

Stripe is looks initialized but still a blank screen

#

mystic escarp Jan 28, 2023, 12:14 AM

#

but what do you expect is not a blank screen? Like why do you expect anything to appear?

#

All I see is a log called checkout1 with no info beyond that

real flint Jan 28, 2023, 12:16 AM

#

I have a designed react component that should appear. All works well until I add stripe in. When i delete stripe related code, all works. The lack of log makes it difficult to debug

mystic escarp Jan 28, 2023, 12:17 AM

#

sure, step 1, remove all Stripe code and just include Stripe.js and nothing else. Step 2, add small bits until you figure out the problem
I'm sorry but right now it all boils down to "I add code and things don't work" and I don't even know what you're adding

#

I'm sorry I want to help but right now I have really no actionable information

real flint Jan 28, 2023, 12:19 AM

#

As soon as I add any stripe related code, the page codes blank

#

For instance adding :

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

mystic escarp Jan 28, 2023, 12:20 AM

#

import { loadStripe } from '@stripe/stripe-js';
Cool where did find this code? Did you include the right package in your build first?

#

https://stripe.com/docs/stripe-js/react#setup like did you follow those steps?

real flint Jan 28, 2023, 12:21 AM

#

Comes from here : https://stripe.com/docs/libraries/stripejs-esmodule

#

Packages are added

mystic escarp Jan 28, 2023, 12:24 AM

#

hum how familiar are you with all of this yourself as a developer? Like have you done this before with other libraries and all that or is it your first time?

real flint Jan 28, 2023, 12:26 AM

#

A data scientist by trade, but already went through this before

#

In any case, this problem, of React going blank right after stripe integration has been mentioned before, as in the stack overflow message i posted

mystic escarp Jan 28, 2023, 12:27 AM

#

sure but that stackoverflow question is just super specific and doesn't explain much

#

Ultimately: what are you really trying to do. Because really you're wasting likely hours down the wrong rabbit hole. You should ~never call redirectToCheckout() in the first place, it's been deprecated for a long time

real flint Jan 28, 2023, 12:29 AM

#

Otherwise, any ready made plug and play integrations for a SAAS ? Might be best to find another tool - eg just a snippet that redirects to stripe checkout

mystic escarp Jan 28, 2023, 12:30 AM

#

Not that I know of. I highly recommend looking at https://stripe.com/docs/payments/payment-links to start. That will limit the amount of code you need to write.
But ultimately, if you need to control access, monthly fulfillment, etc. you'll have to write code yourself. Or hire a freelancer to build all of this for you

real flint Jan 28, 2023, 12:37 AM

#

Not very useful stuff, i sent you the code above, it's a few lines you could easily check as it follows the documentation apart from redirectToCheckout

mystic escarp Jan 28, 2023, 12:40 AM

#

I mean you just changed your mind and asked for a ready made plug and play thing? I'm just giving you an option. I checked the code, even though it's just a picture. I just don't know what is causing this issue yet that's all

#mathieu-react-elements