#daartanian_api

1 messages · Page 1 of 1 (latest)

hollow skyBOT
#

👋 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/1273480352769249301

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

elder escarp
#

Sure you can share your video here

somber bay
#

thank you!

elder escarp
#

Btw you can check your code and see if you wrap your components inside ConnectComponentsProvider ?

somber bay
#

Yea, I do. I will show in my video. One second/

elder escarp
#

Ok. discord is a public place so everyone can see your video in this thread. You can also DM me the video if you want

somber bay
#

Ah, smart. I hadn't thought about showing code would be public 🤔 DM incoming

#

hmmm looks like Discord is being weird

#

It is saying you aren't receiving DMs from people unless you share a server... which we do...

#

I'll post here and delete when we are done

elder escarp
#

Ok, I opend and now I'll delete it

somber bay
#

thanks!

elder escarp
#

Can you open browser console, and use React Component debug tool to confirm if your component is wrapped insideConnectComponentsProvider ?

somber bay
#

Sure!

#

Oh. I should have mentioned.

#

A browser refresh correctly moves me on to the <StripeContent /> component with the Onboarding and then eventually Dashboard components.

#

So I think that answers the question of if they are wrapped because that would fail if they weren't

#

But somehow it feels as though Stripe can't handle the transition between the states

#

(moves me on once I hit that error and then refresh)

elder escarp
#

Looks like your StripeConnectWrapper returns different content based on different conditions. Ideally it should return ConnectComponentsProvider to wrap the Connect components, and we should use React component debug to confirm if that's the case.

somber bay
#

Aaah... so you are saying in my code:

const StripeConnectWrapper = ({ stripeAccountId, children }: StripeConnectComponentWrapperProps) => {
    const appConfig = getConfig();
    const thisIsADevelopmentEnvironment = isThisADevelopmentEnvironment();
    const [stripeKey, setStripeKey] = React.useState<string>('');
    const { stripe_publishable_key, stripe_publishable_test_key } = appConfig.global_configuration;

    useEffect(() => {
        setStripeKey(thisIsADevelopmentEnvironment ? stripe_publishable_test_key : stripe_publishable_key);
    }, []);

    if (!stripeAccountId) return <div>{children}</div>;

    const {
        clientSecret,
        isPending: isFetchClientSecretPending,
        error: fetchClientSecretError,
    } = useStipeFetchClientSecret(stripeAccountId);

    if (isFetchClientSecretPending) return <LoadingState />;
    if (fetchClientSecretError) {
        return (
            <ErrorState
                error={fetchClientSecretError}
                description="Please try again and contact support if this continues."
            />
        );
    }

    const connectInstance = loadConnectAndInitialize({
        publishableKey: stripeKey,
        fetchClientSecret: () => clientSecret,
        appearance: {
            variables: {
                // This is the same color as tailwind color admin-portal-blue
                colorPrimary: '#C8B56E', // optional appearance param,
            },
        },
    });

    return (
        <div className="text-center">
            <ConnectComponentsProvider connectInstance={connectInstance}>
                {children}
            </ConnectComponentsProvider>
        </div>
    );
};

export default StripeConnectWrapper;

the if (!stripeAccountId) return <div>{children}</div>; early return could be getting hit when there is a moment where the component refreshes but it doesn't quite have a stripeAccountId yet?

elder escarp
#

That's possible, have you got a chance to look at the React component debug tool?

somber bay
#

Looks like it

elder escarp
#

Hmm, looks like ConnectComponents.Provider is at the same level as AdminPortalPageWrapper

somber bay
#

Let me try and minimize things and double check

#

it looks like the Provider is still the parent

hollow skyBOT
elder escarp
#

Can you copy and paste the full error log here?

somber bay
#

That doesn't seem to be the full scope that got copied somehow... hang on

#

I think this is it:

#

Oooh... that last line is just super long to the right. That is why it was tripping me up

somber bay
#

Any luck?

hollow skyBOT
elder escarp
#

I'm still checking, thanks for waiting.

somber bay
#

np! thanks for checking in to it

elder escarp
#

I'm not sure if useContext can still provide context for children when the parent component is swapped . Instead of putting ConnectComponentsProvider in StripeConnectWrapper, can you move ConnectComponentsProvider down to be the immediately parent of your Connect components?

somber bay
#

I am not directly using useContext. Is it being used inside of something else?

#

ok, testing this now

#

Nice! That seemed to help. I ran in to some other issues, but they seem related more to my end than Stripes.

#

Gonna head out for the night, but I will run with this. Thanks a bunch!