#Complex Server Action for onSubmit()

1 messages · Page 1 of 1 (latest)

carmine patrolBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

ionic falcon
#

heya, since you're working with server actions, returning a Response wouldn't work because it's already handled by next

you probably could go by returning a { redirect: string }, where your code will handle the redirect in the client. (perhaps using a useRouter(), then router.replace(resp.redirect))

for setting the token, perhaps you can make use of cookies().set("my-cookie", { ... })?

#

or you could choose to use a route.ts file to handle the request and response directly; so you'd be able to keep the same code, but you'll be left to parse the request yourself (and the typesafety).

#

oh you're new in next?

#

its okay, i've had a few hiccoughs with it as well 😅

#

well what i could suggest is returning the redirect right away in an object:

export async function myFunction(...): Promise<{ redirectUrl: string }> {
  const response = ...;
  return {
    redirectUrl: response.url
  };
}
#

then after the server action had returned, you could do a router.replace or router.push:

const router = useRouter();
const onSubmit = async () => {
  const resp = await myFunction();
  router.replace(resp.redirectUrl);
};
#

you're returning a Response here:

    if (response.ok) {
        return Response.redirect(response.url)
    }
#

server actions are made to simplify returning responses so you wouldn't need to care about NextResponse.json() or anything, you just return an object right away: return { redirectUrl: "..." }

#

under the hood, next will transform the server action and make it return an actual response, and the code on the client will also auto-magically parse the result that came from that server action call

#

did you use useRouter() on the server action?

#

well you aren't supposed to do that

#

but wait this seemed right

#

perhaps the component is a server component?

#

you need to add a "use client" directive on the top of the file to make it a client component (and be able to use useRouter())

#

or you could wrap the logic on another client component

#

is it?

#

oh waittt

#

you aren't supposed to use useRouter() inside a closure 🤦

#

it's a regular hook like the others (useEffect, useState, ...)

#

...no, useRouter should be used outside of onSubmit()

#

should be placed on the component-level, the same indentation as the other hooks

#

oh cool 👍

#

it's not saving the cookies i suppose?

#

so this is from their docs? and you're trying to do it on the server instead of what they suggested i suppose?

#

bit confused about the flow here

#

so, after the redirect to authorize.net, it requires a token?

#

the form code above is not your code?

#

did the redirect work in this case? and after the redirection, authorize.net didn't accept the token?

#

honestly this flow is rather unfamiliar to me

#

ohh so you're trying to redirect the user to https://test.authorize.net/payment/payment?token=....?

#

mhm i think i get what you mean, the <form> example above is what you're trying to achieve with server actions?

#

and the POST to https://test.authorize.net/payment/payment redirects the user?

#

from what i could tell, you probably should do the fetch on the client rather than in the server

#

quite confusing for me lol, makes me question does form redirect as result of a POST to the url of action?

#

try doing this and check the networks tab on devtools

async function onSubmit(patientData: Patient) {
    // ...

    const response = await fetch("https://test.authorize.net/payment/payment", {
        method: "POST",
        headers: {
            "Content-Type": "application/x-www-form-urlencoded",
        },
        body: `token=${token}`,
    });
}
#

odd, is there any more detailed error?

#

i suspect there's some cors shenaingans that came into play

#

oh lol that works as well

#

was thinking of this as well lol, but perhaps there's a way of doing with regular fetch that looks a bit better

#

but oh well if it works, it works

#

is that their page?

#

oh cool

#

but can't you use stripe's dev test instead of this weird payment gateway lol?

#

oh so it's for a demo?

#

i dunno about how things work there on america, but i'd probably just boot up a barebones payment gateway that acts as a fake payment gateway

#

mhm

#

sounds like a pain man 💀

#

👍 exploring the unknowns is always fun

#

no prob, i was also confused mid way, so sorry bout that 😅

#

👍

carmine patrolBOT
#
✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1277276753131475076 message)

ionic falcon
#

hey uh im a wannabe freelancer, sorry but may I DM you for advices? im completely new to working professionally and havent known people that has any experience in that area 😄