Issue with axios post request returning empty
Unanswered
Bendire's Thrasher posted this in #help-forum
Bendire's ThrasherOP
I am currently trying to set up the Stripe API in my app.
This is my checkout page that is an API that redirects to Stripe:
Here is the component which sends the axios post request when clicked:
If I console.log the request on the api page I get the following:
{ params: {}, searchParams: {} }
It seems the post request isn't working, would appreciate any input.
This is my checkout page that is an API that redirects to Stripe:
import * as React from "react";
import Stripe from "stripe";
import { NextResponse, NextRequest } from "next/server";
export default async function Post (request) {
const stripe = new Stripe(process.env.NEXT_PUBLIC_STRIPE_SECRET_KEY)
console.log(stripe)
let data = await request.json()
let priceId = data.priceId
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: priceId,
quantity: 1,
}
],
mode: 'subscription',
success_url: 'http://localhost:3000?success=true',
cancel_url: 'http://localhost:3000?canceled=true',
});
return NextResponse.json(session.url)
}Here is the component which sends the axios post request when clicked:
'use client'
import * as React from "react";
import axios from "axios";
export default function Table() {
const handleSubscription = async (e)=> {
e.preventDefault()
const { data } = await axios.post('/checkout',
{
priceId: "price"
},
{
headers:{
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}
})
// console.log(data)
window.location.assign(data)
}
return(
<td><button className='Tier1-Single' onClick={(e)=> handleSubscription(e)}>Select</button></td>
)
}If I console.log the request on the api page I get the following:
{ params: {}, searchParams: {} }
It seems the post request isn't working, would appreciate any input.
41 Replies
try set the header to
'Content-Type': 'application/json' ?@Ray try set the header to
`'Content-Type': 'application/json'` ?
Bendire's ThrasherOP
Hi, thanks for reply. Doesn't work unfortunately
does fetch work?
Bendire's ThrasherOP
fetch also fails
try
<td><button className='Tier1-Single' onClick={handleSubscription}>Select</button></td>Bendire's ThrasherOP
Doesn't work either, seems I also need the event to stop the page automatically loading
Could it be something to do with the fetch being in a client component or should that not matter?
do you get the url back?
on handleSubscription function
Bendire's ThrasherOP
Yes, seems to be html
the api route is in app/checkout/route.{ts,js}, right?
Bendire's ThrasherOP
api route is app/checkout
need to be route.ts or js inside the checkout folder
Bendire's ThrasherOP
so the page.js is in the checkout folder
the api route need to be inside the checkout folder too
and named route.js
Bendire's ThrasherOP
Ok
look like you got 404 with axios
Bendire's ThrasherOP
so currently the page contains the async post function
the component which triggers the axios post is in a different route, /pricing
it then is suppose to post to the checkout (page.js) which is the api
hmm not /checkout?
the page is /pricing and the api is /checkout, right?
Bendire's ThrasherOP
yes
so the page is in the pricing folder and call page.js right?
create a checkout folder then create a file call route.js and move the post function inside
app/checkout/route.js
Bendire's ThrasherOP
where should the axios.post be sent to, still /checkout?
and should I delete checkout/page.js?
'use client'
import * as React from "react";
import axios from "axios";
export default function Table() {
const handleSubscription = async (e)=> {
e.preventDefault()
const { data } = await axios.post('/checkout',
{
priceId: "price"
},
{
headers:{
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}
})
// console.log(data)
window.location.assign(data)
}
return(
<td><button className='Tier1-Single' onClick={(e)=> handleSubscription(e)}>Select</button></td>
)
}this file no need to change
just move the post function to app/checkout/route.js
what is inside checkout/page.js?
if you don't need a page in /checkout, you can delete it
Bendire's ThrasherOP
Just the api, I deleted it
ok
so just need app/checkout/route.js
Bendire's ThrasherOP
Seeing some different things now
AxiosError {message: 'Request failed with status code 405', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
Bendire's ThrasherOP
Got it working now, thanks!