Next.js 14 Stripe Entegration
Answered
West African Lion posted this in #help-forum
West African LionOP
I created a vehicle sales site with Next.js 14 and I want to integrate it into the ribbon so users can purchase vehicles. How can I do that? or is there an example?
Answered by Ray
yes this one from vercel
https://github.com/vercel/next.js/tree/canary/examples/with-stripe-typescript
https://github.com/vercel/next.js/tree/canary/examples/with-stripe-typescript
45 Replies
Answer
West African LionOP
from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. what is this error?
West African LionOP
ı want to redirect stripe checkout
to stripe or to a backend api?
West African LionOP
import { NextResponse } from "next/server";
import { stripe } from "@/lib/stripe";
export async function POST() {
try {
const line_items = [
{
quantity: 1,
price_data: {
currency: "USD",
product_data: {
name:
description: "example",
},
unit_amount: Math.round(200 * 100),
},
},
];
const session = await stripe.checkout.sessions.create({
line_items,
mode: "payment",
mode: "payment",
success_url:
cancel_url:
});
return NextResponse.redirect(new URL(session.url));
} catch (error) {
console.log("[CHECKOUT_ERROR]", error);
return new NextResponse("Internal Error", { status: 500 });
}
}
import { stripe } from "@/lib/stripe";
export async function POST() {
try {
const line_items = [
{
quantity: 1,
price_data: {
currency: "USD",
product_data: {
name:
"example,description: "example",
},
unit_amount: Math.round(200 * 100),
},
},
];
const session = await stripe.checkout.sessions.create({
line_items,
mode: "payment",
mode: "payment",
success_url:
http://localhost:3000,cancel_url:
http://localhost:3000,});
return NextResponse.redirect(new URL(session.url));
} catch (error) {
console.log("[CHECKOUT_ERROR]", error);
return new NextResponse("Internal Error", { status: 500 });
}
}
is true??
West African LionOP
I think because I'm redirecting to the stripe here.
const handlePayment = async () => {
const { data } = await axios.post("/api/payment", {
name:
description: detailinfo.description,
});
console.log(data);
}; or here????
const { data } = await axios.post("/api/payment", {
name:
${detailinfo.brand} ${detailinfo.model},description: detailinfo.description,
});
console.log(data);
}; or here????
@West African Lion const handlePayment = async () => {
const { data } = await axios.post("/api/payment", {
name: `${detailinfo.brand} ${detailinfo.model}`,
description: detailinfo.description,
});
console.log(data);
}; or here????
yes you should redirect here and return the session.url from the route handler
West African LionOP
who?
what do you mean who?
West African LionOP
sorry
ı will say how ?
import { useRouter } from 'next/navigation';
...
const router = userRouter()
const handlePayment = async () => {
const { data } = await axios.post("/api/payment", {
name: ${detailinfo.brand} ${detailinfo.model},
description: detailinfo.description,
});
router.redirect(data.url)
}; West African LionOP
okay ı understand
change
to
return NextResponse.redirect(new URL(session.url));to
return NextResponse.json({ url: session.url });@Ray ts
import { useRouter } from 'next/navigation';
...
const router = userRouter()
const handlePayment = async () => {
const { data } = await axios.post("/api/payment", {
name: ${detailinfo.brand} ${detailinfo.model},
description: detailinfo.description,
});
router.redirect(data.url)
};
West African LionOP
how do you use code block
West African LionOP
js code console.log("okay" three `
West African LionOP
js code console.log(".") lol
West African LionOP
console.log("router.push(data.url)")West African LionOP
How do I access the data I sent via post?
in my api route
what data?
export async function POST(req) {
const data = await req.json()
}West African LionOP
i am using translater
I forgot to use await thanks
West African LionOP
const session = await stripe.checkout.sessions.create({
line_items,
mode: "payment",
success_url: `http://localhost:3000`,
cancel_url: `http://localhost:3000`,
}); const session = await stripe.checkout.sessions.create({
line_items,
mode: "payment",
success_url: `${req.header.get('origin')}/success-url`,
cancel_url: `${req.header.get('origin')}`,
}); West African LionOP
you are so better
West African LionOP
export async function GET(req) {
try {
const session = await stripe.checkout.sessions.retrieve(
req.query.session_id
);@West African Lion js
export async function GET(req) {
try {
const session = await stripe.checkout.sessions.retrieve(
req.query.session_id
);
how to access session_id in api route
export async function GET(req) {
try {
const sessionId = req.nextUrl.searchParams.get("session_id")
if (!sessionId) return NextResponse.json({ "error": "missing session id" })
const session = await stripe.checkout.sessions.retrieve(sessionId);West African LionOP
thank you
@West African Lion js code console.log("okay"
Hoopoe
```ts
code
```
code
```
select this text and paste it
any reason why its exporting as a const instead of default?
@Dogue Brasileiro Click to see attachment
personal preference I think
Dogue Brasileiro
Ok