#daartanian_error
craggy sigilBOT
👋 Welcome to your new thread!
⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.
⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.
🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1240421510229790781
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
coral scarab
What error are you actually getting?
bright mural
I am not sure I follow your question. This is what is causing an error in my app.
This is what is showing in the UI
coral scarab
Is this whole workflow async?
My first thought is maybe the component's state isn't updated to reflect the most recent changes to an onboarded account (but this is React-land so it's hard to tell with just the info I have right now)
bright mural
enum StripeComponent {
Onboarding = 'Onboarding',
Dashboard = 'Dashboard',
}
interface StripeOnboardingProps {
stripeAccountId: string;
}
const StripeContent = ({ stripeAccountId }: StripeOnboardingProps) => {
const [currentStripeComponent, setCurrentStripeComponent] = useState<StripeComponent | undefined>();
const {
hasBeenOnboarded,
isPending: isRetrieveAccountPending,
error: retrieveAccountError,
} = useStipeRetrieveAccount(stripeAccountId);
useEffect(() => {
switch (hasBeenOnboarded) {
case true:
setCurrentStripeComponent(StripeComponent.Dashboard);
break;
case false:
setCurrentStripeComponent(StripeComponent.Onboarding);
break;
default:
if (!isRetrieveAccountPending) {
consoleLogger.errorMessage({ message: 'No onboarding status found' });
}
}
}, [hasBeenOnboarded]);
if (isRetrieveAccountPending) return <LoadingState />;
if (retrieveAccountError) {
return (
<ErrorState />
);
}
const getStripeContent = () => {
switch (currentStripeComponent) {
case StripeComponent.Dashboard:
return (
<ConnectAccountManagement />
);
case StripeComponent.Onboarding:
return (
<ConnectAccountOnboarding onExit={() => setCurrentStripeComponent(StripeComponent.Dashboard)} />
);
default:
return <LoadingState />;
}
};
return (
<div className="text-center">
{getStripeContent()}
</div>
);
};
export default StripeContent;
Your question about "if it knows it has been onboarded" once the person finishes is a great question. Would I need to re-fetch account information somehow? I assumed your stripe components handled that process naturally.
coral scarab
I don't think they do. Like, all the other front-end Stripe components (e.g. Elements) require an explicit update call to change the state of the component. So if you change a Payment Intent for example, the Stripe Payment Element needs to be updated via fetch with --> https://docs.stripe.com/js/elements_object/fetch_updates
So you might want to look into doing the same for the Connect embedded component via --> https://docs.stripe.com/connect/get-started-connect-embedded-components#updating-connect-embedded-components-after-initialization
bright mural
The update method supports updating Connect embedded components after initialization
so you are thinking this statement in the docs is saying it would also refresh account information?
coral scarab
That's sort of my thought, based on the error you're getting, because if you're saying the account is onboarded, but the component is erroring saying they haven't then likely it just needs to be updated to account for any changes that occured during onboarding
verbal bayBOT
bright mural
I will give it a shot
bright mural
It appears as though that did not work:
enum StripeComponent {
Onboarding = 'Onboarding',
Dashboard = 'Dashboard',
}
interface StripeOnboardingProps {
stripeAccountId: string;
connectInstance: any;
}
const StripeContent = ({ stripeAccountId, connectInstance }: StripeOnboardingProps) => {
const [currentStripeComponent, setCurrentStripeComponent] = useState<StripeComponent | undefined>();
const {
hasBeenOnboarded,
isPending: isRetrieveAccountPending,
error: retrieveAccountError,
} = useStipeRetrieveAccount(stripeAccountId);
useEffect(() => {
switch (hasBeenOnboarded) {
case true:
setCurrentStripeComponent(StripeComponent.Dashboard);
break;
case false:
setCurrentStripeComponent(StripeComponent.Onboarding);
break;
default:
if (!isRetrieveAccountPending) {
consoleLogger.errorMessage();
}
}
}, [hasBeenOnboarded]);
if (isRetrieveAccountPending) return <LoadingState />;
if (retrieveAccountError) {
return (
<ErrorState />
);
}
const handleOnboardingExit = async () => {
await connectInstance.update({});
setCurrentStripeComponent(StripeComponent.Dashboard);
};
const getStripeContent = () => {
switch (currentStripeComponent) {
case StripeComponent.Dashboard:
return (
<ConnectAccountManagement />
);
case StripeComponent.Onboarding:
return (
<ConnectAccountOnboarding onExit={handleOnboardingExit} />
);
default:
return <LoadingState />;
}
};
return (
<div className="text-center">
{getStripeContent()}
</div>
);
};
export default StripeContent;
blazing garden
Hello! I'm happy to help but I'm not great at React. Can I ask you to provide exact information about what is and isn't working, what logs you added, etc.?
bright mural
No worries! I mean, I am not sure what logs would be helpful here. But the main crux is that, as you can see in the React, I am having a user go through the ConnectAccountOnboarding component from you guys. Then, once they are onboarded, I have them switch over to start using components of yours with their new account (right now just the AccountManagement one.
However, as I am testing, once I walk through the onboarding, I get the error messages I mentioned earlier in the thread.
So the suggested path was to try and get Stripe to be refreshed so it knows that onboarding has been completed.
Which is what I did (the above code), as you can see in the handleOnboardingExit function before switching them over to the AccountManagement. But even despite the .update() that was suggested to try, it still isn't working.
blazing garden
Gotcha! I still don't really get what the problem is unfortunately .You said "earlier in the thread" but I didn't see any specific error, just a picture. I don't really get the flow you're trying to do unfortunately either.
Can I ask you to explain exactly what the problem is with a specific component? Like ignore the chaining and handleOnboardingExit and such. If you have one Account that works and is created does the component render on its own?
I'm struggling with
I have gotten the embedded (using Express onboarding) onboarding connected and working, but when I try and pass the user off with the onExit to then move on to seeing another Stripe component (like Account Management), I get the error
from your original question, I don't really get what that means, but part of this is likely because I don't use React and I don't really get why you want to do something like this
bright mural
Cool, no worries. Let me try and break it down for you further.
I have it set up so that, as a user, I can successfully..
- Follow all the steps outlined in your Embedded Onboarding doc (https://docs.stripe.com/connect/embedded-onboarding) (creating an account, setting up a
connectInstance, etc) and get the Onboarding component loading - Walk through all the steps of the Embedded Onboarding flow successfully
However, there is a function in your guys' component (built in) that allows for a call back function once the Onboarding flow is completed. This is where I attempt to switch the UI for the user and load another one of your Connect components. When I do this, I get the following error in my console (1st picture) and then the UI displays (2nd picture)
Does that help clarify the issue?
blazing garden
Ah yes that first picture is likely what I missed earlier, I only saw the couldn't load
Can you clarify if the component works fine if you load it now? I'm trying to figure out if the problem is elsewhere of it if really is that the instance "cached" the state of the account or something
bright mural
yes, it works fine if you refresh the page and the connectInstance gets re-initialized basically (and Stripe gets reset so it knows onboarding has taken place)
happy to provide screen recordings if its helpful
blazing garden
Is there a way for me to see this live?
bright mural
not that I can think of unfortunately... though I could try and reproduce it in a CodeSandbox possibly
that might take some time though
blazing garden
yeah codesandbox is really painful for this and you'd have to leak your keys and such.
Does it work if you do the chaining but the account is already onboarded?
I'm going to try and reproduce on my end in parallel, will take me a bit of time too though
bright mural
let me see what I can do
blazing garden
where did you find that handleOnboardingExit?
bright mural
oh, that is my own function (in my code example above), but its basically just running two functions inside the callback I mentioned. The ConnectAccountOnboarding has a required prop of onExit.
The onExit is the callback
blazing garden
yeah I'm trying to figure out where you found that one
ah found it
sorry we have millions of docs at this point and I just wanted to see if we had a non react version so that I don't spin my wheels too long
Do you know which component you are using? I don't get what the dashboard one is referring to and I'm trying to see if it's in beta (sorry we launched like 10 in a month and I haven't used them all yet)
Like when I look at our internal code I see export type ConnectElementTagName = | 'payments' | 'payouts' | 'payouts-list' | 'balances' | 'payment-details' | 'account-onboarding' | 'payment-method-settings' | 'account-management' | 'notification-banner' | 'instant-payouts' | 'issuing-card' | 'issuing-cards-list' | 'documents';
Do you know which one is yours? Or is it none of those and you are using a beta?
cc @bright mural (I have to run soon so I hope it's okay to ping)
bright mural
ah, thank you for pinging
let me review your messages
The Dashboard is a placeholder name for now, just in my code. Right now what it is calling is your ConnectAccountManagement one
blazing garden
ah lol that makes more sense. Trying
bright mural
also trying to get you a live version to poke around in
blazing garden
hum that one doesn't even render at all for me 😅
bright mural
oh really? ha. it does for me
but once onboarded and screen has refreshed
I also only have like 3 more min
blazing garden
the stripe-connect-account-management component is not rendered as it is not enabled for your Stripe account
ah duh
bright mural
😂
can I just write in here to this thread tomorrow for help as well? I am about to sign off for the day
blazing garden
that thread will be closed but you can start a new one! Sorry for the hassle 😦
I'm sure it's something obvious but we'll need to dig deeper into it. I'll still work on a repro now that I get what the issue is
bright mural
this message: #1240421510229790781 message
says it will remain open indefinitely?
is that not true?
blazing garden
the content stays here, the thread is closed though. We talked to hundreds of people a week, it'd be unmanageable if all the threads stayed open
onboardingComponent.setOnExit(() => {
console.log("rendering the second one");
const dashboardComponent = stripeConnectInstance.create('account-management');
const container2 = document.getElementById("container-dashboard");
container2.appendChild(dashboardComponent);
});
const container = document.getElementById("container");
container.appendChild(onboardingComponent);
I tried this and the rendering works find on exit for me. I'll try with a brand new account after that though.
verbal bayBOT
blazing garden
I'm on Discord tomorrow morning at 9am so you'll talk to me if you're back then 🙂
bright mural
wow, you did in like 10 lines what I did in like 2 files ha!
very nice
I will try and also reproduce that code snippet tomorrow and see how it goes
blazing garden
yeah that's why I don't do React
I'm an old school PHP dev and I like all my demos in one file 😂
blazing garden
but yeah I see what you're describing now and I think youra ccount is not activated when you start and hit an error. So I'll try to debug that tonight/tomorrow and we can talk more in a new thread
bright mural
sounds good
blazing garden
Have a good night 🙂