jonathan-wenger_next-connect-js | Stripe Developers | Page 1

void pecanBOT Nov 6, 2024, 3:51 PM

#

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

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

tepid pumiceBOT Nov 6, 2024, 3:52 PM

#

restive mango Nov 6, 2024, 3:53 PM

#

Hi there 👋

If I recall correctly, it's not possible for the onboarding flow to be fully embedded if you allow the onboarding flow to collect external account details for Payouts.

What kind of Connected Accounts are you onboarding?

halcyon basalt Nov 6, 2024, 3:53 PM

#

I was planning to do Custom for individual and business

restive mango Nov 6, 2024, 3:54 PM

#

Gotcha. I think you can avoid the popout behavior then, let me find the dashboard setting to toggle to try and get you a link to that.

halcyon basalt Nov 6, 2024, 3:55 PM

#

Thank you that would be great!

#

Oh its a setting in the actual Stripe dashboard?

restive mango Nov 6, 2024, 3:57 PM

#

The toggle at the bottom of this page is the one that controls whether our onboarding flow will offer to collect payout details for Custom Connected Accounts:
https://dashboard.stripe.com/test/settings/connect/payouts/external_accounts

If turning that off doesn't allow the experience to stay embedded, then that isn't possible. If that setting is turned off though, you'll need to build a flow to collect payout details for your Connected Accounts.

Stripe Login | Sign in to the Stripe Dashboard

Sign in to the Stripe Dashboard to manage business payments and operations in your account. Manage payments and refunds, respond to disputes and more.

halcyon basalt Nov 6, 2024, 3:57 PM

#

That will still be easier than what I was originally planning which was to build the entire onboarding experiencing using APIs before I found the embed approach 🙂

#

Do you have any info about the second question per chance? I can't get rid of this SSR error:

ConnectJS won't load when rendering code in the server - it can only be loaded on a browser. This error is expected when loading ConnectJS in SSR environments, like NextJS. It will have no impact in the UI, however if you wish to avoid it, you can switch to the pure version of the connect.js loader: https://github.com/stripe/connect-js#importing-loadconnect-without-side-effects.
⨯ unhandledRejection: ConnectJS won't load when rendering code in the server - it can only be loaded on a browser. This error is expected when loading ConnectJS in SSR environments, like NextJS. It will have no impact in the UI, however if you wish to avoid it, you can switch to the pure version of the connect.js loader: https://github.com/stripe/connect-js#importing-loadconnect-without-side-effects.
⨯ unhandledRejection: ConnectJS won't load when rendering code in the server - it can only be loaded on a browser. This error is expected when loading ConnectJS in SSR environments, like NextJS. It will have no impact in the UI, however if you wish to avoid it, you can switch to the pure version of the connect.js loader: https://github.com/stripe/connect-js#importing-loadconnect-without-side-effects.

#

I moved over to using the /pure import and it had no effect

#

cannot find any good articles about it online either

restive mango Nov 6, 2024, 4:00 PM

#

I'm not too familiar with the next.js framework, and I'm a little surprised we suggested pure in that error because I though that just delayed the loading of our scripts, but maybe that's what is required to use this with that framework.

halcyon basalt Nov 6, 2024, 4:00 PM

#

Yeah when I read into what pure was for I was also confused about how it could solve this error

#

I don't suppose there is anyone else on the react/nextjs side that might be able to help. my dev server keeps crashing too I am not sure if its related to this error or not

#

But I am nervous if that behavior will continue in the hosted environment

restive mango Nov 6, 2024, 4:02 PM

#

I'll ask and see if have anyone around who knows that framework.

halcyon basalt Nov 6, 2024, 4:02 PM

#

Much appreciated

restive mango Nov 6, 2024, 4:18 PM

#

Still waiting to see if our teammate most familiar with next can take a look, but one teammate pointed out we also recommend using pure in our integration guide:
https://docs.stripe.com/connect/connect-embedded-components/quickstart?client=next
So we're both a bit surprised that updating the imports didn't avoid the error.

Integrate with Connect embedded components

halcyon basalt Nov 6, 2024, 4:19 PM

#

Hmmm interesting

void pecanBOT Nov 6, 2024, 4:20 PM

#

jonathan-wenger_next-connect-js

restive mango Nov 6, 2024, 4:21 PM

#

And I checked to make sure react-connect-js didn't have a /pure path to use.

halcyon basalt Nov 6, 2024, 4:24 PM

#

Yeah I didn't see one

#

I am going to try to create a wrapper component for the provider and dynamically import it with ssr: false

#

Here is Code sample I was able to get rid of the error but it is not ideal

📎 message.txt

void pecanBOT Nov 6, 2024, 4:45 PM

#

dusk swallow Nov 6, 2024, 4:49 PM

#

👋 Wanted to let you know we're consulting with someone who knows more about Next to help more shortly!

inland lance Nov 6, 2024, 4:49 PM

#

Hey there, that's me 👋 Just stepping in to help, I was chatting with @restive mango and @dusk swallow internally

halcyon basalt Nov 6, 2024, 4:50 PM

#

Thank you! Hello

inland lance Nov 6, 2024, 4:50 PM

#

It looks like you're using Next.Js 14.x (or maybe 15, but i expect 14)

halcyon basalt Nov 6, 2024, 4:51 PM

#

Yes correct

inland lance Nov 6, 2024, 4:51 PM

#

In which case anything using our client libraries needs a use client; directive in the component to avoid running on the server. That's the source this error, I expect:

ConnectJS won't load when rendering code in the server - it can only be loaded on a browser. This error is expected when loading ConnectJS in SSR

#

https://nextjs.org/docs/app/building-your-application/rendering/client-components#using-client-components-in-nextjs

halcyon basalt Nov 6, 2024, 4:52 PM

#

Yeah I thought the same, however for whatever reason that did not solve the issue 😦

inland lance Nov 6, 2024, 4:52 PM

#

Because Stripe.js/COnnect.js don't work in a server environment, they need ot be in the browser

#

What happens if you add that?

#

If you put that in your components that use anything from Stripe.js/Connect.js it should work by rendering those components in the client/browser

halcyon basalt Nov 6, 2024, 4:54 PM

#

One moment - putting it back that way real quick

#

Here is my current page

📎 page.tsx

#

console log

 ✓ Compiled /users/[userid] in 2s (2107 modules)
ConnectJS won't load when rendering code in the server - it can only be loaded on a browser. This error is expected when loading ConnectJS in SSR environments, like NextJS. It will have no impact in the UI, however if you wish to avoid it, you can switch to the `pure` version of the connect.js loader: https://github.com/stripe/connect-js#importing-loadconnect-without-side-effects.
 ⨯ unhandledRejection: ConnectJS won't load when rendering code in the server - it can only be loaded on a browser. This error is expected when loading ConnectJS in SSR environments, like NextJS. It will have no impact in the UI, however if you wish to avoid it, you can switch to the `pure` version of the connect.js loader: https://github.com/stripe/connect-js#importing-loadconnect-without-side-effects.
 ⨯ unhandledRejection: ConnectJS won't load when rendering code in the server - it can only be loaded on a browser. This error is expected when loading ConnectJS in SSR environments, like NextJS. It will have no impact in the UI, however if you wish to avoid it, you can switch to the `pure` version of the connect.js loader: https://github.com/stripe/connect-js#importing-loadconnect-without-side-effects.

#

Oh. Maybe it needs to be in a component

inland lance Nov 6, 2024, 4:58 PM

#

Yea, i don't think you can use that on page.tsx files

halcyon basalt Nov 6, 2024, 4:58 PM

#

Oops.

#

I think thats gotta be it

inland lance Nov 6, 2024, 4:58 PM

#

You can move all of that into a component the page imports

halcyon basalt Nov 6, 2024, 4:58 PM

#

Thank you 🙂

#

So @restive mango , I toggled off that option you recommended, but I am still getting the verification popup when I test creating a new account (via API) and then trying to onboard that account using the Embed AccountOnboard component: Any thoughts?

const account = await stripe.accounts.create({
    type: 'custom',
    country: 'US',
    individual,
    business_type: 'individual',
    business_profile: {
      mcc: '7299',
      url: `https://test.hopegives.com/users/${userId}/profile`,
    },
    capabilities: {
      card_payments: {
        requested: true,
      },
      transfers: {
        requested: true,
      },
    },
    metadata: {
      userId,
    },
    settings: {
      payouts: {
        schedule: {
          delay_days: 2,
          interval: 'daily',
        },
      },
      payments: {
        statement_descriptor: 'HopeGives Donations',
      },
    },
  });

#

Is there a certain property or attribute that the onboarding component keys off of to decide if it should launch the email/phonenumber verification popup?

#

or a programatic way to avoid it

dusk swallow Nov 6, 2024, 5:15 PM

#

There's no way to avoid it. Sometimes we need to pop out to collect certain information.

#

We try to do everything we can embedded if possible,. but it's not always possible unfortunately.

halcyon basalt Nov 6, 2024, 5:17 PM

#

So basically - using the embedded account onboarding approach there is no way to avoid this popup? Regardless of what options I use?

dusk swallow Nov 6, 2024, 5:18 PM

#

Correct.

halcyon basalt Nov 6, 2024, 5:19 PM

#

OK - So if my client is not okay with that, the only option would be to re-implement the same flows account onboarding embed handles using the API directly I guess

dusk swallow Nov 6, 2024, 5:20 PM

#

Yep.

halcyon basalt Nov 6, 2024, 5:21 PM

#

OK thanks so much for the infos

#jonathan-wenger_next-connect-js