Passing array of objects to server actions
Answered
Rhinelander posted this in #help-forum
RhinelanderOP
I have context that stores all the products that are in the cart (quantity, id, name, size etc...)
I want to pass that to server a so action when user click the button action gets triggered and passes data to the stripe api where i create payment link.
*I know I could do this directly with the api no server action needed and i will do that if there is no better solution. *
I want to pass that to server a so action when user click the button action gets triggered and passes data to the stripe api where i create payment link.
"use client";
import checkout from "@/actions/checkout";
import type { CartItem } from "@/types/product";
import { useFormStatus } from "react-dom";
import { Button } from "./ui/button";
function CheckoutBtn({ products }: { products: CartItem[] }) {
const { pending } = useFormStatus();
return (
<form action={checkout}>
<Button className="w-full" disabled={pending}>
{!pending ? "Pojdi na blagajno" : "Preusmerjam..."}
</Button>
</form>
);
}
export default CheckoutBtn;*I know I could do this directly with the api no server action needed and i will do that if there is no better solution. *
Answered by B33fb0n3
yea, why not creating a checkout session directly?
https://docs.stripe.com/api/checkout/sessions/create
https://docs.stripe.com/api/checkout/sessions/create
10 Replies
@Rhinelander I have context that stores all the products that are in the cart (quantity, id, name, size etc...)
I want to pass that to server a so action when user click the button action gets triggered and passes data to the stripe api where i create payment link.
typescript
"use client";
import checkout from "@/actions/checkout";
import type { CartItem } from "@/types/product";
import { useFormStatus } from "react-dom";
import { Button } from "./ui/button";
function CheckoutBtn({ products }: { products: CartItem[] }) {
const { pending } = useFormStatus();
return (
<form action={checkout}>
<Button className="w-full" disabled={pending}>
{!pending ? "Pojdi na blagajno" : "Preusmerjam..."}
</Button>
</form>
);
}
export default CheckoutBtn;
*I know I could do this directly with the api no server action needed and i will do that if there is no better solution. *
do you really want to create a paymentlink and not directly a checkout session or paymentintent?
If you really would like to create a paymentlink, you need the server, because only the server know the stripe secret. To solve your problem: use useFormState like this:
Like that, you can directly pass the items to the server action
If you really would like to create a paymentlink, you need the server, because only the server know the stripe secret. To solve your problem: use useFormState like this:
const [state, formAction] = useFormState(() => {
return serverAction(yourCartItemsHere);
}, {});Like that, you can directly pass the items to the server action
RhinelanderOP
Gonna try! Mark solution if it works. Thank you.
@Rhinelander Gonna try! Mark solution if it works. Thank you.
I am not allowed to mark a solution. You tried it?
RhinelanderOP
Not yet. I am trying to figure out what you ment with "do you really want to create a paymentlink and not directly a checkout session or paymentintent? " Don't i trigger it after i create payment link?
@Rhinelander Not yet. I am trying to figure out what you ment with "do you really want to create a paymentlink and not directly a checkout session or paymentintent? " Don't i trigger it after i create payment link?
Yea, when entering the paymentlink a checkout session will be created in the background
RhinelanderOP
Like when i press the red button i want to get redirected to stripe checkout page with all the items in the cart.
yea, why not creating a checkout session directly?
https://docs.stripe.com/api/checkout/sessions/create
https://docs.stripe.com/api/checkout/sessions/create
Answer
RhinelanderOP
Yeah yeah thats what i wanted i guess i just wasn't clear enough as haven't used stripe that much.