#Simon1709

1 messages · Page 1 of 1 (latest)

shy kernelBOT
valid yoke
odd rapids
#

we use the direct account method

valid yoke
#

Ah!

#

jinx

odd rapids
#

i know how to do the backend side

#

i think

#

but its more the frontend

#

changing to the payment element

valid yoke
odd rapids
#

hmmm

#

the Stripe object is bound to the window right

#

in a react app the docs use the ElementsProvider

valid yoke
#

let me see if we have an example

odd rapids
#

yeah this is the bit that confusing me

#

where do i pass it in the connected account

#

id

#

currently the way i do it is wrong as i create all paymentMethods etc on the one account and copy them to the connected account when i charge

valid yoke
odd rapids
#

1 thing is they say to initialize it outside of a component

#

but then i need it inside to figure out my connected account id

#

as its dynamically loaded

valid yoke
#

Not sure I completely follow!

#

can you elaborate?

odd rapids
#

here it says load it outside of the component

#

so it doesnt recreate the stripe object on every render

valid yoke
#

It doesn't, no.

odd rapids
#

my app doesnt know my connected account id at that point

#

basically on my site they have to choose different locations which inturn have different account ids

#

so i would have to put it inside the component

#

which would potentially cause it to be created multiple times

valid yoke
#

I see. In that case, you would want to initialize Stripe after the location is selected

odd rapids
#

thats what i did

#

and i get this issue

valid yoke
#

Your component hierarchy would be different

#

what does your component hierarchy look like?

odd rapids
#

function Layout() {
const { selectedCenter } = useCenterContext();

let options = selectedCenter?.isPaymentConnected
? { stripeAccount: selectedCenter?.stripe_account_id }
: {};

const stripePromise = loadStripe(
import.meta.env.VITE_STRIPE_PUBLISHED_KEY,
options
);

#

so i have a layout component

# 
 <main className="main">
        <Elements key={selectedCenter.id} stripe={stripePromise}>
          <Outlet />
        </Elements>
      </main>
#

then i render out the elements

#

this is the site

#

so when you click manchester

#

it would then load the layout

#

and the center

#

the center then has the connected account

#

and all the other pages are in the outlet

valid yoke
#

How about instead of initializing elements on <Outlet> level, you initialize it just before loading the PaymentElement?

odd rapids
#

i think it would still be the same outcome

#

because the page changes i think but

#

let me try

#

not getting that error anymore

#

ill see how it goes

#

thank you