#zeke_code

1 messages ¡ Page 1 of 1 (latest)

summer anchorBOT
#

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

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

spare depotBOT
#

Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.

maiden lava
#

What code do you refer to?

pale belfry
maiden lava
#

This page contains lots of code

pale belfry
#

Well... This code starts onboarding process and I want to make sure I did it right

#

it gives me a account ID when pressing the Sign up button. I want to make sure that this right.

#

And if it is right how can i embedded componets for it to look nice

maiden lava
#

Why don't you just paste the code here? i.e., the code that return an account ID.

pale belfry
#

"use client";

import React, { useState } from "react";
import { loadStripe } from "@stripe/stripe-js";
import { useStripeConnect } from "../../hooks/useStripeConnect";
import {
ConnectAccountOnboarding,
ConnectComponentsProvider,
} from "@stripe/react-connect-js";

const stripePromise = loadStripe("your-publishable-key-here");

export default function Home() {
const [accountCreatePending, setAccountCreatePending] = useState(false);
const [onboardingExited, setOnboardingExited] = useState(false);
const [error, setError] = useState(false);
const [connectedAccountId, setConnectedAccountId] = useState();
const stripeConnectInstance = useStripeConnect(connectedAccountId);

const handleSignUp = async () => {
setAccountCreatePending(true);
setError(false);

try {
  const response = await fetch("/api/account", {
    method: "POST",
  });
  const json = await response.json();
  const { account, error } = json;

  if (account) {
    setConnectedAccountId(account);
  }

  if (error) {
    setError(true);
  }
} catch (error) {
  setError(true);
} finally {
  setAccountCreatePending(false);
}

};

#

return (
<div className="container">
<div className="banner">
<h2>Dream Marketplace</h2>
</div>
<div className="content">
{!connectedAccountId && <h2>Get ready for take off</h2>}
{connectedAccountId && !stripeConnectInstance && (
<h2>Add information to start accepting money</h2>
)}
{!connectedAccountId && (
<p>
Dream Marketplace is the world's leading air travel platform: join
our team of pilots to help people travel faster.
</p>
)}
{!accountCreatePending && !connectedAccountId && (
<div>
<button onClick={handleSignUp}>Sign up</button>
</div>
)}
{stripeConnectInstance && (
<ConnectComponentsProvider
stripe={stripePromise}
connectInstance={stripeConnectInstance}
>
<ConnectAccountOnboarding
onExit={() => setOnboardingExited(true)}
/>
</ConnectComponentsProvider>
)}
{error && <p className="error">Something went wrong!</p>}
{(connectedAccountId || accountCreatePending || onboardingExited) && (
<div className="dev-callout">
{connectedAccountId && (
<p>
Your connected account ID is:{" "}
<code className="bold">{connectedAccountId}</code>
</p>
)}
{accountCreatePending && <p>Creating a connected account...</p>}
{onboardingExited && (
<p>The Account Onboarding component has exited</p>
)}
</div>
)}
<div className="info-callout">

maiden lava
#

So which line of code returns your an account ID?

pale belfry
#

{(connectedAccountId || accountCreatePending || onboardingExited) && (
<div className="dev-callout">
{connectedAccountId && (
<p>
Your connected account ID is:{" "}
<code className="bold">{connectedAccountId}</code>
</p>
)}
{accountCreatePending && <p>Creating a connected account...</p>}
{onboardingExited && (
<p>The Account Onboarding component has exited</p>
)}
</div>
)}

#

Ok So it looks terrible on my part how do i add stripe components to it

maiden lava
#

I'd suggest you closely follow the integration doc.