Next.js Discord

Discord Forum

failed to submit the form

Answered
Boby posted this in #help-forum
Open in Discord
BobyOP
I am not able to submit the form, can anyone please have a look at it?
TIA

https://github.com/Boby900/thumbnail-creator
Answered by Ray
const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);

export async function POST(req) {
  const origin = new URL(req.url).origin;
  try {
    // Create Checkout Sessions from body params.
    const session = await stripe.checkout.sessions.create({
      line_items: [
        {
          // Provide the exact Price ID (for example, pr_1234) of the product you want to sell
          price: "{{PRICE_ID}}",
          quantity: 1,
        },
      ],
      mode: "payment",
      success_url: `${origin}/?success=true`,
      cancel_url: `${origin}/?canceled=true`,
    });
    return Response.redirect(session.url, { status: 303 });
  } catch (err) {
    console.log(err)
    return new Response(err.message, { status: 500 });
  }
}

add a console.log here
View full answer

72 Replies

@Boby I am not able to submit the form, can anyone please have a look at it? TIA https://github.com/Boby900/thumbnail-creator
Ray
try to make the request to /api since you create the route handler in src/app/api/route.js
@Ray try to make the request to `/api` since you create the route handler in `src/app/api/route.js`
BobyOP
Sorry, I am not getting it, what are you trying to say?
@Boby Sorry, I am not getting it, what are you trying to say?
Ray
 const res = await fetch('./api/route.js', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(formData),
    });

your url is wrong
it should be /api
@Boby Okay, I have to remove that extra `.`?
Ray
fetch('/api')
you need to provide the url to fetch not the path of the file
@Ray `fetch('/api')`
BobyOP
Okay, so I don't have to add that route.js?
I am new to Next.js
Sorry if it's very basic
@Boby Okay, so I don't have to add that `route.js`?
Ray
yeah just /api
BobyOP
Okay, thank you for your help
I will let you know after trying this
@Ray
BobyOP
I have changed the URL but now getting another error @Ray
@Boby Click to see attachment
Ray
the code in app/api/route.js is incorrect, try this code
export async function POST(req: Request) {
  const origin = new URL(req.url).origin;
  try {
    // Create Checkout Sessions from body params.
    const session = await stripe.checkout.sessions.create({
      line_items: [
        {
          // Provide the exact Price ID (for example, pr_1234) of the product you want to sell
          price: "{{PRICE_ID}}",
          quantity: 1,
        },
      ],
      mode: "payment",
      success_url: `${origin}/?success=true`,
      cancel_url: `${origin}/?canceled=true`,
    });
    return NextResponse.redirect(session.url, { status: 303 });
  } catch (err) {
    return new NextResponse(err.message, { status: 500 });
  }
}
BobyOP
that error still persists
@Ray
@Boby Click to see attachment
Ray
import { NextResponse } from 'next/server'
BobyOP
I have imported that and added in my route.js file but still getting the same error
@Ray
@Boby I have imported that and added in my route.js file but still getting the same error
Ray
could you show the error on terminal again
@Ray could you show the error on terminal again
BobyOP
@Boby Click to see attachment
Ray
could you show the code on api/route.js again
@Ray could you show the code on api/route.js again
BobyOP
@Boby Click to see attachment
Ray
try to restart the dev server
@Ray try to restart the dev server
BobyOP
still getting the error
@Boby still getting the error
Ray
ok replace NextResponse with Response
@Ray ok replace `NextResponse` with `Response`
BobyOP
still persists
@Boby still persists
Ray
lol
could you push the code to github
BobyOP
I've pushed it
@Ray
Ray
ok let me see
@Boby I've pushed it
Ray
you need to replace all NextResponse to Response
you just change the import one
@Ray you need to replace all NextResponse to Response
BobyOP
oh sry, I've changed all of them but still persists
I've pushed it to GitHub as well
@Boby oh sry, I've changed all of them but still persists
Ray
remove import { Response } from "next/server";
BobyOP
still persists
@Ray
Ray
show the error
BobyOP
@Ray
@Boby Click to see attachment
Ray
try to submit again
@Ray try to submit again
BobyOP
still getting the error
@Boby still getting the error
Ray
show the error again
@Ray show the error again
BobyOP
line 5 and 8
There is a power cut at my place
I am on PC
BobyOP
I have removed the imports, but still getting the error
I have pushed it to GH
@Ray
BobyOP
not getting any error at the logs
@Ray
@Boby Click to see attachment
Ray
const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);

export async function POST(req) {
  const origin = new URL(req.url).origin;
  try {
    // Create Checkout Sessions from body params.
    const session = await stripe.checkout.sessions.create({
      line_items: [
        {
          // Provide the exact Price ID (for example, pr_1234) of the product you want to sell
          price: "{{PRICE_ID}}",
          quantity: 1,
        },
      ],
      mode: "payment",
      success_url: `${origin}/?success=true`,
      cancel_url: `${origin}/?canceled=true`,
    });
    return Response.redirect(session.url, { status: 303 });
  } catch (err) {
    console.log(err)
    return new Response(err.message, { status: 500 });
  }
}

add a console.log here
Answer
Ray
most likely you didn't set the price
Ray
yes you need to set the price_id
@Ray yes you need to set the price_id
BobyOP
okay, I had not set that I will get back to you if something unexpected will come
thanks a lot, for your help @Ray
BobyOP
I am finally able to submit the form, thank you @Ray