#simon1709-stripejs-react

1 messages · Page 1 of 1 (latest)

kindred zinc
#

hey there!

finite geyser
#

hey

#

thanks for your reply

kindred zinc
#

Yea, so even outside of react, Stripe.js doesnt support changing this dynamically

#

you need to re-initialize

#

This amounts to unmounting and re-mounting your elements provider with the new stripe instance/promise

finite geyser
#

ah okay

#

so instead of app level element

#

it would be a component level

#

when the account changes then the component gets rerendered?

kindred zinc
#

You need to make sure you unmount and remount the <Elements> provider, it doesnt support changing the stripe reference dynamically

finite geyser
#

okay i see

#

ill give that a go

#

how would i initialise my connect version if you have to do it outside of the component

#

would you have the stripePromise in a useRef or something along those lines

kindred zinc
#

sure thing -- one tip a colleague shared that might help is setting a key on the <Elements provider that concatenates your platform PK and the connect account youre using, that way when you update it and create a new stripe instance the elements provider can remount due to the key change

finite geyser
#

the options prop on the Elements component doesnt take the stripe account right?

kindred zinc
# 
const App = () => {
const pk='blah';
const stripeAccount = 'acct_123'
const stripePromise = loadStripe(pk, {stripeAccount});
const elementsKey = [pk,stripeAccount].join('-')
 ...
return <Elements key={elementsKey} stripe={stripePromise} ... > ... </>
}
#

something like that

#

the account goes in the options of load stripe

#

but unless you manage the re-mount of Elements explicity (like the key should trigger), youll hit an integration error telling you you cant change the stripe prop

finite geyser
#

so just giving it a key prop and changing that value would make it remount?

kindred zinc
#

yep - it should!

finite geyser
#

i never knew that!

#

every day is a school day 😂

#

thanks ill give this a go

kindred zinc
#

👍

finite geyser
#

still getting a no such payment method which im guessing means its creating it for the wrong stripe account

kindred zinc
#

That's possible -- if you can share the request id i can take a look

finite geyser
#

i can see in the event logs of my app that its being created on my main account and not on the connected account

kindred zinc
#

are you sure you're providing a connected account when initialize stripe.js via loadstripe?

finite geyser
#

yeah but im getting that warning about changing stripe prop

kindred zinc
#

can you log the key used at the same time and ensure its changing as expected?

vapid ledge
#

I'm catching up here

#

give me a bit

finite geyser
#

yeah the key is changing

#

pm_1JsV34I8X1sqvN9sVGXgQf6b

#

here is the last payment method it created

vapid ledge
#

@finite geyser

still getting a no such payment method which im guessing means its creating it for the wrong stripe account
that means your Stripe instance is not set as the Connect account correctly

finite geyser
#

here is the log of stripe object on which the main account is

#

then when i switch to the connected one

#

yet when i create the payment etc

#

its still creating on the main account

vapid ledge
#

yet when i create the payment etc
can you detail what that means exaclty? creating a PaymentIntent or confirming a PaymentIntent? those are two different operations

finite geyser
#

i just mean when i hit submit on the form

#

it creates the payment method on the wrong account

vapid ledge
#

ok we are using confusing terms here

#

first you said " yet when i create the payment etc"
but now you're saying that the PaymentMethod is created on the wrong account
so you're only referring to PaymentMethod right

finite geyser
#

yeah what i meant by create payment is just submitting the form

#

im using the CardElement btw

#

and not the PaymentElement

vapid ledge
#

let's do this, share with me:

1/ the error you got in

still getting a no such payment method which im guessing means its creating it for the wrong stripe account

#

the request ID for that^

finite geyser
#

req_r5zr6pJs0Sgsq4

vapid ledge
#

thanks looking

finite geyser
#

req_B1N8WQ2DWYEMTx

vapid ledge
#

ah so this isn't from your client-side, this is the request where you're cloning a PaymentMethod

#

so this is different, explaining one sec

#

your request to clone, the way it works is it takes a PaymentMethod (and Customer) on the Platform and clones a new PaymentMethod on the Connect account

however, in your request https://dashboard.stripe.com/test/logs/req_r5zr6pJs0Sgsq4
the PaymentMethod you're passing in your request params already exists on the Connect account. And so does the Customer.
So cloning won't work but also it doesn't need to, the purpose of cloning is to get a PaymentMethod on the Connect account, which you already have, pm_1JsV9MI8X1sqvN9sKs3MjHoQ exists on the Connect account already

finite geyser
#

right that kind of makes sense then

#

this worked previously though

#

all im doing is switching from the window.Stripe and using the react library instead

#

so the only code thats changed is the client code

vapid ledge
#

so it worked previously cause of

so the only code thats changed is the client code

#

like your change is what caused this to no longer work

#

previously you were creating PaymentMethods and Customers on the Platform accoutn and cloning to the Connect acct

now you're directly creating PaymentMethods on the Connect acct

#

which means cloning is no longer needed as you're accomplishing exactly what you want - a PaymentMethod on the Connect acct (directly) instead of through cloning

#

there are multiple approaches to "fix" but it all depends on what you want/need to do and why the client-side change was made in the first place

finite geyser
#

just to make it cleaner

#

im refactoring to hooks

#

and the new react js is cleaner than my old implementation

vapid ledge
#

let's start here - why did you need to make the change to initializing Stripe.js client-side as the Connect account? I'm assuming you wanted to unblock somethign what was that something

finite geyser
#

ive always done that

#

but the way it was initialised before

#

2 state properties we initialised

#

non connect account and then the connected account one

#

and then i check if the current account is a connected account then use the stripeConnected state variable

#

ive noticed as well the card element is now showing a postcode and my other / old implementations do not have the postcode in

#

infact never mind that last bit

#

i realised i hide the last one when i created it

vapid ledge
#

and then i check if the current account is a connected account then use the stripeConnected state variable
ok that context helps
so really your integration is doing the wrong thing where:

when you create a PaymentMethod on the Platform -> you need to clone the PaymentMethod

when you create PM on Connect acct -> you don't need to clone

to clarify, the cloning is happening in your backend code

finite geyser
#

yeah i removed the part where i was cloning and it worked

#

but then all my other old impementations have broke

#

😂

#

i reaslised what ive done now on the older stuff

#

because i had two states 1 for connected account and the other for the master account i was creating all my payment methods on the master account (without realising i did that) then thats why i had to clone the details afterwards

bright valley
#

ah yeah mixing up accounts is tricky!

finite geyser
#

well anyway thanks for all the help i think ive got to the bottom of it now