#cleytoncarvalho_code

1 messages · Page 1 of 1 (latest)

signal fogBOT
#

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

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

fluid basalt
#

Hi, let me help you with this.

#

By "different wallets" you mean different Stripe Connected accounts?

rich briar
#

Exactly, "wallets" is just the term I use in my dashboard.

fluid basalt
#

Could you please share the code where you initialize the connectInstance?

rich briar
# 
import { ConnectComponentsProvider } from '@stripe/react-connect-js'
import { LoaderCircleIcon } from 'lucide-react'
import { ReactNode, useEffect, useState } from 'react'
import { useFetcher } from 'react-router'

import { useEnv } from '~/hooks/env'
import { Route } from './+types/route'

export const StripeConnectInstance = ({ id, children }: { id: string; children?: ReactNode }) => {
    const env = useEnv()
    const publishableKey = env.STRIPE_PUBLIC_KEY

    const fetcher = useFetcher<Route.ComponentProps['actionData']>()
    const clientSecret = fetcher.data?.clientSecret

    const [connectInstance, setConnectInstance] = useState<StripeConnectInstanceType | null>(null)

    useEffect(() => {
        fetcher.submit(null, { method: 'post', action: `/wallets/${id}/stripe-connect-instance` })
    }, [fetcher.submit, id])

    useEffect(() => {
        if (!clientSecret) return

        setConnectInstance(
            loadConnectAndInitialize({
                publishableKey,
                fetchClientSecret: () => Promise.resolve(clientSecret!),
                appearance: {
                    overlays: 'drawer',
                    variables: {
                        colorPrimary: '#635BFF',
                    },
                },
            }),
        )
    }, [publishableKey, clientSecret])

    return (
        <>
            {!connectInstance && (
                <div className="flex justify-center py-10 text-card-foreground/60">
                    <LoaderCircleIcon className="w-10 h-10 animate-spin" />
                </div>
            )}

            {connectInstance && <ConnectComponentsProvider connectInstance={connectInstance}>{children}</ConnectComponentsProvider>}
        </>
    )
}```
#

in the server:

                account: account,
                components: {
                    account_onboarding: { enabled: true },
                    account_management: { enabled: true },
                    notification_banner: { enabled: true },
                    payments: { enabled: true },
                    payouts: { enabled: true },
                    balances: { enabled: true },
                },
            })```
fluid basalt
#

Hmm, I wouldn't expect users to need to login. Could you please share a screenshot of what it looks like?

rich briar
#

sure

fluid basalt
rich briar
#

hmm, thanks. This will help 🙌