#vas_connect-embedded

1 messages ¡ Page 1 of 1 (latest)

green sinewBOT
#

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

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

mossy scroll
#

Full Code:

Api route for the account session (working):
in /api/stripe_account_session/route.ts:
// app/api/account_session/route.ts

import { NextRequest, NextResponse } from 'next/server';
import Stripe from 'stripe';

export const runtime = 'nodejs';

export async function POST(request: NextRequest) {
try {
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY as string);

const { accountId } = await request.json();

if (!accountId) {
  return NextResponse.json({ error: 'Missing accountId' }, { status: 400 });
}

const accountSession = await stripe.accountSessions.create({
  account: accountId,
  components: {
    account_onboarding: {
      enabled: true,
    
    },
  },
});

return NextResponse.json({
  client_secret: accountSession.client_secret,
});

} catch (error) {
console.error('An error occurred when calling the Stripe API to create an account session', error);
return NextResponse.json({ error: 'An error occurred when calling the Stripe API to create an account session' }, { status: 500 });
}
}

#

Front end:
// StripeForm.tsx
//imports
interface StripeFormProps {
accountId: string;
}

const StripeForm: React.FC<StripeFormProps> = ({ accountId }) => {
const [stripeConnectInstance, setStripeConnectInstance] = useState<StripeConnectInstance | null>(null);

useEffect(() => {
const initializeStripe = async () => {
const fetchClientSecret = async () => {
// Fetch the AccountSession client secret
const response = await fetch('/api/stripe_account_session', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ accountId }),
});
console.log('response', JSON.stringify(response));
if (!response.ok) {
// Handle errors on the client side here
const { error } = await response.json();
console.error('An error occurred: ', error);
return undefined;
} else {
const { client_secret: clientSecret } = await response.json();
return clientSecret;
}
};

  const instance = await loadConnectAndInitialize({
    publishableKey: process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!,
    fetchClientSecret: fetchClientSecret,
    appearance: {
      variables: {
        colorPrimary: '#625afa',
      },
    },
  });
  setStripeConnectInstance(instance);
};

initializeStripe();

}, [accountId]);

if (!stripeConnectInstance) {
return <div>Loading...</div>;
}

return (
<ConnectComponentsProvider connectInstance={stripeConnectInstance}>
<ConnectAccountOnboarding onExit={() => {
console.log('onExit');
}} />
</ConnectComponentsProvider>
);
};

export default StripeForm;

steel copper
#

The actual onboarding works, but the issue is that the form is not embedded - when I click the button on my component to start onboarding, there is a pop-up instead of the forms rendering in my app, and my browser is on a different link for the forms.
What do you mean by this? Can you share screen recording so it's clear?

mossy scroll
#

yes absolutely, give me one second

steel copper
#

Once you authenticate, it should continue in the embedded component

mossy scroll
#

ahhh, I see, thanks so much

steel copper
#

No problem

green sinewBOT