adam-connect-redirect

[tender yew]

hello again

but I've not been successful in destructuring from accountLink. Tips?
you have an accountLink object right

[violet bone]

Hello, I'll paste my context here

[tender yew]

just do accountLink.url

[violet bone]

Yes ```app.post("/create-account-hosted", async (req, res) => {
// const data = req.body;
console.log(res + " Yes")
try {
var account = await stripe.accounts.create({
type: "custom",
requested_capabilities: ["card_payments", "transfers"],
business_type: 'company',

})
var accountLink = await stripe.accountLinks.create({
account: account.id,
success_url: "https://example.com",
failure_url: "https://example.com",
type: "custom_account_verification", // THIS WAS IN THE DOCS AS 1/2 TYPES OF ACCOUNT LINKS THE USER IS REQUESTING. THIS IS UNDER "CREATE AN ACCOUNT LINK"
collect: "eventually_due",
});
// We may need to add a person or any other Accounts that need to be set up
} catch (err) {
console.log(err);
res.status(400);
res.send({ error: err });
return;
}
res.send(accountLink)
res.redirect(url)
res.end();
})

[tender yew]

that is what you need

[violet bone]

res.redirect(accountLink.url)?

This is my clientside front end ```
<div className="beASeller">
<form class="stripe-connect white"
action="/create-account-hosted"
method="POST">
<span className="SellerSignup"></span>
<button type="submit">Seller Signup</button>
</form>
</div>

[tender yew]

yes so let's start here

yes you need

res.redirect(accountLink.url)?

because url alone is not a variable in your code

second, I can help but I'm also in 12 other threads in Discord right now

so I won't be able to help you every step of the way

[violet bone]

Yes no rush Im reading up on things on my end

[tender yew]

a lot of the problems you are hitting are things you will have to debug and troubleshoot on your own

so I want to set that expectation up front

I can't coach a Stripe integration over a Discord chat, that is not a reasonable expectation and most of the issues we're troubleshooting here aren't Stripe related really, just code related

so I will guide you to unblocking yourself a lot too

[violet bone]

Got it more fundamental, yes I should be able to figure this out in the next 30 mins

[tender yew]

yeah you are pretty close

and you can figure out what errors you are running into by logging out things in your code, so in this case if you did a console.log(accountLink) and console.log(url) , those would both tell you which object was what and which one was undefined

[violet bone]

I was following CJ here https://youtu.be/WSki6n502mk?t=673, however I need to debug since clicking the button leads to http://localhost:8100/create-account-hosted instead of the Stripe Connect Signup

[tender yew]

sure I understand

[violet bone]

Doing this now

[tender yew]

but my point is that that would be on you and your developer team to debug where why you are redirecting to localhost instead of a Stripe AccountLink url
and the answer lies in the code you shared earlier, so you just have to debug that

[violet bone]

just notes for myself: putting console.logs in the firebase functions serverside Post request did not trigger any console logs on the browser, it just led to localhost/create-account-hosted instead of https://connect.stripe.com/setup/c/EROAZ3X1MQyw

I get the accountLink.url in Postman, but I get a "Cannot POST" when I use CJ's Serverside redirect method

[pure slate]

You're getting a 404 - so it sounds like something about your routes seems to be wrong

[violet bone]

Hmm, I know CJ is using ruby in the video, but my clientside (CS) and serverside (SS) code should match his, Postman works, so I'm not sure if it has to do with me using react single page application

[pure slate]

When you say Postman works, are you saying a postman request to Stripe works, or to your own local server?

[violet bone]

We have a functions folder where you write your SS code to talk to Firebase Functions

So we are NOT testing it on a app.listen(port:3000) Express local express server

[pure slate]

Do you have a proxy set up for react?

[violet bone]

I'm wondering if I need to make the clientside POST ../../create-account-hosted

[violet bone]

I dont think I am doing this, I dont think ive ever made a proxy set up

[pure slate]

Okay show me what it looks like when you go to localhost:3000

[violet bone]

For me its :8100

[pure slate]

I assume that's what your frontend is running on, but you already said you have app.listen(port:3000) so your backend is listening on port 3000

[violet bone]

Apologies, I edited the text above to say NOT listening on 3000, because we're using Firebase Functions

Each time I update the SS or backend code, I have to type in unix $ firebase deploy --only functions

Instead of just simply saying npm start testerver.js

I think I will try client side redirecting again for now, since it allows me to use console logs

[pure slate]

What does your client-side code look like again that is making the request to /create-account-hosted? You should probably have it point t your actual firebase function, since I think it's just trying to make the request to localhost:8100/create-account-hosted which won't work since you're not running your backend locally

[violet bone]

<div className="beASeller">
    <form
    type="submit"
    action="/create-account-hosted"
    method="POST"
    class="stripe-connect white"
    >
     <button> Seller Signup</button>
    </form>
</div>

Let me look into that

[pure slate]

Yeah try changing action to point to your firebase function - right now it's trying to make the request to your local backend (which doesn't exist) so it's failing

[violet bone]

Trying to figure that out now thank you

Stepping away for 20 mins for lunch

I think I will need to change that action point

Or I must actually run the POST on a live site,

[violet bone]

When I do clientside rendering, I get this, which we will analyze now

[distant wing]

Hey there, just catching up here 👋
That syntax error suggests you're responding to an async request with an html page, often a framework error page. Have you checked your create-account-hosted handler for errors?

[violet bone]

Hello, when you say handler do you mean the function controlling this?

[distant wing]

Yes -- I suspect your server is encountering and returning an error

[violet bone]

Would Postman working be an indicator that the server is okay?

        return fetch("/create-account-hosted", {
            headers: {
                "Content-Type": "application/json"
            },
        }).then(res => {
            if (res.ok) {
                console.log("success")
                console.log(res)
            } else {
                console.log("not success")
            }
            return res.json();
        })

[distant wing]

Sure, if you can mock a request from your client using postman

[violet bone]

This is my current front end code

[distant wing]

if you check you browser dev tools network tab, what is your server returning?

[violet bone]

I'll have to look into how to mock a request from my client

[distant wing]

ah, its just a string

wait, can you hit "raw" there?

(also you may want to delete that if the endpoint is not authenticated, since the url is visible)

[violet bone]

It’s returning the accountLink.url

It just won’t redirect the client to the link for signup

[violet bone]

"raw" just shows the same link

Im using Firebase Functions, not sure if it has to do with that

[tender yew]

I'm back on here, where are you blocked Adam?

[violet bone]

I'm wondering. ifI need to stringify the body

[distant wing]

Or wrap it in JSON -- currently your client is trying to parse JSON but the server is not responding that way

[violet bone]

Hello good day, im just trying client-side rendering now with a function to call the serverside endpoint

[distant wing]

But i'll let @tender yew give you a hand with that from here

[violet bone]

Network tab shows 200, but the Response is just a bunch of html

[violet bone]

I'll try this

[violet bone]

Thank you I need to work on unblocking myself

[violet bone]

Other than JSON.stringify, is there another form of wrapping in JSON that you were referring to?

[tender yew]

you're not doing anything with the body right from what I can tell

so why are you passing a body in your request from your frontend

[violet bone]

I think I've removed the body,

I'm trying to look at other examples now

[violet bone]

Hi @tender yew , maybe its best to close this thread and I can just start a new one to start fresh?

[placid copper]

Hello again! I'm taking over for @tender yew. I think keeping your questions here makes sense in case we need previous context.

What is your current situation/question?

[violet bone]

Hello, just took a quick walk,

My frontend is recieving the "res" from my backend endpoint thru the clientside render of /create-account-hosted, but I need to probably: 1) pull the accountLink.url from the body and display it on the page to be clicked

Or 2) somehow try the serverside render again. But using the <form method="POST"></> results in my browser going to localhost:8100/create-account-hosted, instead of https://connect.stripe.com/setup/c/B76U7P24O48W

Which is returned by res.send(accountLink.url) in the backend

[placid copper]

Are you still trying to make a button to send people to Connect Onboarding?

[violet bone]

Yes

[placid copper]

Are you using Express in your backend code?

[violet bone]

When i use this method, I get "res" back in console.log, but I think I need to pull "accountLink.url" from the "Body"

[violet bone]

Yes

[placid copper]

When your server responds you should respond with a redirect to the Account Link's URL: http://expressjs.com/en/5x/api.html#res.redirect

[violet bone]

I tried to follow CJ's ServerSide redirect https://www.youtube.com/watch?v=WSki6n502mk video but maybe I need to go over it again

[placid copper]

Can you share your current server-side code for your /create-account-hosted URL?

[violet bone]

app.post("/create-account-hosted", cors(), async (req, res) => {
//   const data = req.body;
  console.log(res + " Yes")
  try {
  var account = await stripe.accounts.create({
    type: "custom",
    requested_capabilities: ["card_payments", "transfers"],
    business_type: 'company',
  })
  var accountLink = await stripe.accountLinks.create({
    account: account.id,
    success_url: "https://example.com",
    failure_url: "https://example.com",
    type: "custom_account_verification", 
    collect: "eventually_due",
  });
} catch (err) {
  console.log(err);
  res.status(400);
  res.send({ error: err });
  return;
}
res.send(accountLink.url)
// res.redirect(accountLink.url)
})

[violet bone]

Looking at this now

[placid copper]

It looks like you were on the right track. If you comment out the res.send line and uncomment the res.redirect line does it work?

[violet bone]

This would mean I need to go back to the <form method="POST"></> for SS rendering right?

[placid copper]

Go back to it? Oh, I think I misread your earlier message, hang on...

[violet bone]

Postman no longer returns the url when I do this

[placid copper]

Oh, sorry, I did misread. I thought you were using the <form> method, but I realize now you're not.

My fault!

[violet bone]

No i can do it again right now

I was just trying the Client side rendering again just to try it via

[placid copper]

Client-side is fine! If that's what you've got now we can work with that.

So can you see the URL you need in your client-side code at this point?

[violet bone]

So this is the "res" that I get back, although I think the accountLink.url is maybe sitting in the "Body"

[placid copper]

Yeah, it would be in the body. If you console.log(CreateAccount); after the code in your screenshot above what do you see?

[violet bone]

Do you mean like this?

Wait

[placid copper]

Yeah, but you need to add it to your code under the code in your screenshot above.

After that last }

[violet bone]

Ah, like this? I've never console.logged a whole function before

It results in this when i reload the browser

[placid copper]

Oh, wait, you're right. Sorry, can you share all of your client-side code? Like where are you running CreateAccount?

It's really hard with only small bits and pieces.

Here's how to format code in Discord, which will make things easier:

Inline code
Wrap your inline code in backticks (`).

For example, if you type this:

This sentence has `code()` in it.

It will be formatted like this:

This sentence has code() in it.

Code blocks

1. Start with three backticks (```) followed by an optional language identifer, like \`\js or ```php
2. Type several lines of code (while inside a code block you can hit return without sending the message)
3. End the code block with three more backticks (```)

For example, if you type this:

```js
function example() {
var foo = bar();
}
```

It will be formatted like this:

function example() {
  var foo = bar();
}

[violet bone]

Sorry! One sec, yes sometimes i screenshot just for the clarity on eyes,

I am using react, and this is a single page application, if that has to do with anything

One momnet

[placid copper]

Ah, okay, that helps a lot.

So remove console.log(CreateAccount) first.

Can you share the code in your screenshot, but in a code block like you did above?

[violet bone]

Did I include too much the 1st time? Let me know if this is what you meant ```const CreateAccount = async () => {
return fetch("/create-account-hosted", {
}).then(res => {
if (res.ok) {
console.log("success")
console.log(res)
} else {
console.log("not success")
}
return res.json();
})
}

[placid copper]

That's perfect.

Okay, so a few things...

1. You've got a <form> with an onClick attribute, which is somewhat unusual. You probably want a button instead.

Oh, you deleted your other code...

[violet bone]

Let me put it back sorry

[placid copper]

I just need that last part, where you define the form and whatnot.

[violet bone]

    return (
        <div className="StripeConnectBtnPage">
           
            <h2>We work with Stripe to have earnings delivered to you.</h2>



                <div className="beASeller">
                    <form
                        type="submit"
                        class="stripe-connect white"
                        onClick={CreateAccount}
                    >
                        <span>Seller Signup</span>
                    </form>
                </div>

        </div>
    );
};

export default SellerForm2;

This is the button currently

[placid copper]

That's perfect.

2. In your CreateAccount function you're returning the JSON from the response you get from your server, but there's no code to do anything with that. You need to alter the function to redirect to account onboarding instead.

Instead of return fetch(... you probably want to do something like const result = await fetch(... and then grab the URL out of result and redirect to it.

Does that help?

[violet bone]

Currently making sure I redeploy the firebase functions serverside endpoint before testing, testing now..

<div className="beASeller">
                    <button
                        class="stripe-connect white"
                        onClick={CreateAccount}
                    >
                        <span>Seller Signup</span>
                    </button>
                </div>

For some reason the whole browser is just refreshing

Wait

[placid copper]

What's the code in CreateAccount look like now?

[violet bone]

    const CreateAccount = async () => {
        const result = await fetch("/create-account-hosted", {
        }).then(result => {
            if (result.ok) {
                console.log("success")
                console.log(result)
                console.log(result + "result")
                console.log(result.url + "result url")
            } else {
                console.log("not success")
            }
            return result.url;
        })
    }

So I do get the url returned from result, however the url is localhost:8100/create-account-hosted

I think i need to destructure the accountLink.url from the result maybe

[placid copper]

So if you add some logging, like this, what do you see in console?

    const CreateAccount = async () => {
        const result = await fetch("/create-account-hosted", {
        }).then(result => {
            if (result.ok) {
                console.log("success")
                console.log(result)
                console.log(result + "result")
                console.log(result.url + "result url")
            } else {
                console.log("not success")
            }
            return result.url;
        })
        console.log(result);
    }

[placid copper]

One thing to clarify is that where you added the new console.log lines is too early in the process.

[violet bone]

This is from your exact code

But when I use postman, I'm able to retrieve the accountLink object with the link

[placid copper]

You added the new console.log(result); at the end?

Oh, wait, you changed other things...

[violet bone]

No I had to change res to result in order for it to work

[placid copper]

Let's back up a bit. You keep changing a bunch of different pieces. 😅

You used to have return res.json(); for example, but you removed it.

[violet bone]

Okay yes

[placid copper]

Can you put that back in instead of return result.url; and remove a bunch of the extra logging you have?

[violet bone]

Okay so this is it right now

[placid copper]

Yeah, that's closer. What does that log?

[violet bone]

I think res.json needs to be result.json(), since I get a "Failed to Compile" error

[placid copper]

Ah, yep.

[violet bone]

Since we made result = await fetch....

[placid copper]

Honestly, you should probably avoid mixing await and .then(). It makes things a lot harder to read.

[violet bone]

Woops, learning more everyday

[placid copper]

You should try something like this:

const response = await fetch(...);
const result = await response.json();
console.log(result);

Step one is to use fetch() to get a response from your server. Step two is to parse the JSON in that response into a JavaScript object.

[violet bone]

The console result from the earlier code comes up as http://localhost:8100/create-account-hosted

[violet bone]

Let me remove the .then and add thiis

[placid copper]

Yeah, that's because you're logging the result of the response from that URL without turning the JSON in the body of the response into a JavaScript object.

[violet bone]

One second

I'm just wondering why this is the response in the console for the Response

And when I remove the .then and simplify down to const CreateAccount = async () => { const response = await fetch("/create-account-hosted",) const result = await response.json(); console.log(result); return result.url; }

It just logs

[placid copper]

It's because your server isn't returning JSON, it's returning HTML.

[violet bone]

We can pick this up tomorrow, its after hours for the team I'm sure, thank you for all the help, support, and honestly just great help

[placid copper]

Have a look at this: https://support.stripe.com/questions/how-to-fix-syntaxerror-unexpected-token-in-json-at-position-0

[violet bone]

I just dont get why Postman works, but this doesnt, I'll read this

[placid copper]

Change response.json(); to response.text(); and see what shows up in the console.

[violet bone]

Youre right I get the whole index.html document

But postman is able to retrieve the accountLink.url

[placid copper]

What happens when you visit the /create-account-hosted URL in your browser? The whole thing with localhost and everything.

http://localhost:8100/create-account-hosted

That one?

[violet bone]

Its blank

[placid copper]

Is your server code using app.get?

[violet bone]

app.post("/create-account-hosted", cors(), async (req, res) => {

[placid copper]

Change it to app.get instead of app.post and try again.

[violet bone]

However in the elements tab all of my html is there, but the page isnt rendering

[violet bone]

Redeploying firebase functions...

In this video's timestamp, CJ is running on localhost, but clicking his button redirects him to Stripe Checkout https://youtu.be/WSki6n502mk?t=627

[placid copper]

Yes.

That's what will happen here if you get everything working, except they'll go to Connect Onboarding instead of Checkout.

[violet bone]

Changing to app.get still yields same Uncaught (in promise) syntax error

[placid copper]

What's logged with .text()?

[violet bone]

I get the whole html page still

[placid copper]

What does your server-side route look like now?

[violet bone]

I don't need to wrap my index.html with any Stripe elements do i?

[placid copper]

No.

[violet bone]

//   const data = req.body;
  console.log(res + " Yes")
 
  var account = await stripe.accounts.create({
    type: "custom",
    requested_capabilities: ["card_payments", "transfers"],
    business_type: 'company',
  })
  var accountLink = await stripe.accountLinks.create({
    account: account.id,
    success_url: "https://example.com",
    failure_url: "https://example.com",
    type: "custom_account_verification", // THIS WAS IN THE DOCS AS 1/2 TYPES OF ACCOUNT LINKS THE USER IS REQUESTING. THIS IS UNDER "CREATE AN ACCOUNT LINK"
    collect: "eventually_due",
  });
  // We may need to add a person or any other Accounts that need to be set up

res.send(accountLink.url)
// res.redirect(accountLink.url)
})

[placid copper]

Is this being logged server-side when you visit the URL in your browser? console.log(res + " Yes")

[violet bone]

Does it matter that I have exports.api = functions.https.onRequest(app); at the bottom of my serverside code?

[placid copper]

Honestly I don't know. I don't know what that code does.

[violet bone]

Nope

[placid copper]

Okay, so this code isn't being run at all then.

You must have code above this that's serving the request before this code can run.

[violet bone]

But Postman is able to retrieve this

[placid copper]

Probably not now.

Try it again though to confirm.

[violet bone]

Nope, because its on get

When i switch Postman to GET, it works

[placid copper]

Yeah, you have something higher up that's serving the GET request before this code can.

Wait, what?

What URL is Postman hitting exactly?

[placid copper]

That is a completely different URL than http://localhost:8100/create-account-hosted

Completely different.

It couldn't be more different.

[violet bone]

Hold on let me change

[placid copper]

Why are you hitting a totally different URL in Postman?

[violet bone]

That's where the firebase function is being hosted

[placid copper]

Wait... let's back way up.

So if your code is hosted on Firebase why are you using localhost for anything at all?

[violet bone]

I have to use localhost to see the clientside, the browser where the button is

[placid copper]

Where will your React app be hosted when it's deployed in production?

[violet bone]

On a website hosted through Google domains, but thru Firebase Hosting

[placid copper]

You need to deploy it there in test mode during development. Nothing you're doing now will work with your frontend running off your localhost and your backend on a random Firebase URL.

The fetch() code you're trying to use is pointing to a relative, localhost URL, not the absolute full URL where your Firebase code is. Even if it was it would almost certainly fail due to CORS.

[violet bone]

I was starting to think it the difference between me and CJs code was maybe because I wasnt running a local server locally

[placid copper]

At a really high level what are you trying to build?

[violet bone]

Actually, when I do this ```
const CreateAccount = async () => {
const response = await fetch("https://us-central1-examplecompany-5fa49.cloudfunctions.net/api/create-account-hosted",)
const result = await response.text();
console.log(result);
return <h2>{result.url}</h2>;
}

I get the Connect url in the console log

[placid copper]

Okay, if that works then get rid of the return line and change it to window.location.href = result;

[violet bone]

This button is supposed to onboard sellers/vendors onto the platform so they can list products and get Payouts

[placid copper]

I'm really surprised that works without a CORS error.

[violet bone]

Im not too familiar with CORS, but I'll have to check if I still get the link on test production and production

[placid copper]

Does it work with the change I suggested above?

[violet bone]

Wow unbelievable

It did!!!!

[placid copper]

Cool.

[violet bone]

Wow, honestly we owe gifts or consulting fees, I'll have to go from here and see what's next on the agenda

[placid copper]

Happy to help. 🙂

[violet bone]

I think the initial goal of the thread is clear, throughout the week, we'll be working on Payouts and fine tuning, so hopefully we won't need so many heavy sessions like this

At least in my experience this was a heavy debugging session, so thanks again @placid copper,