Integrate PayPal with NextJS 13
Unanswered
Afghan Hound posted this in #help-forum
Afghan HoundOP
I'm trying to get an implementation of the Standard PayPal on a NextJS 13 site and I can't seem to get it to work.
I keep getting an 'unexpected end of JSON input' error in the Message field and my server logs return a 'TypeError: res.status is not a function'. (I've also exported it as default and I get ...
' Detected default export in 'E:\webDevProjects\softlife\app\api\orders\route.js'. Export a named export for each HTTP method instead.
No HTTP methods exported in 'E:\webDevProjects\softlife\app\api\orders\route.js'. Export a named export for each HTTP method. '
I feel like I'm running in circles but I'm pretty sure I'm just missing something straightforward.
I'm using Javascript and NextJS 13.
Using the code from the PayPal implementation builder,
- I extracted createOrder, captureOrder, generateAccessToken, and handleResponse into an external lib file.
- I added the PayPalScriptProvider and PayPalButtons from the react-paypal-js module into their own component and am importing that component into my item page
- I've added all the code for the api/order and api/order/[order_id]/capture as paths in the app folder as route.js
- client id and secret are in environment variables and are populating correctly
Is there something I'm missing? Any help or suggestions would be greatly appreciated
I keep getting an 'unexpected end of JSON input' error in the Message field and my server logs return a 'TypeError: res.status is not a function'. (I've also exported it as default and I get ...
' Detected default export in 'E:\webDevProjects\softlife\app\api\orders\route.js'. Export a named export for each HTTP method instead.
No HTTP methods exported in 'E:\webDevProjects\softlife\app\api\orders\route.js'. Export a named export for each HTTP method. '
I feel like I'm running in circles but I'm pretty sure I'm just missing something straightforward.
I'm using Javascript and NextJS 13.
Using the code from the PayPal implementation builder,
- I extracted createOrder, captureOrder, generateAccessToken, and handleResponse into an external lib file.
- I added the PayPalScriptProvider and PayPalButtons from the react-paypal-js module into their own component and am importing that component into my item page
- I've added all the code for the api/order and api/order/[order_id]/capture as paths in the app folder as route.js
- client id and secret are in environment variables and are populating correctly
Is there something I'm missing? Any help or suggestions would be greatly appreciated
11 Replies
You are using API routes API in a Route Handler
API routes and route handlers are 2 totally different worlds
- API Routes: Node.js API, cousin to Express (via the Connect framework), (req,res) as argument and you trigger the HTTP response but return nothing
- Route Handlers: Web platform API, similar to "vanilla" JS fetch calls, (req) as argument and you return a response object
Most documentation at this point will assume the "API route" paradigm, simply because the second one didn"t exist like a year ago
so stick to an API route in the pages folder for now, that's fine, until you are more familiar and confident with route handlers
you might not be able to use older code in those unless someone specifically craft a library for next route handlers
@Eric Burel so stick to an API route in the pages folder for now, that's fine, until you are more familiar and confident with route handlers
Afghan HoundOP
ohhhh so theoretically if i just move that api code to pages/api/order and pages/api/[order_id]/capture it should work?
work I don't know but your "res.status" is a sign that you want to write Node.js code not pure JS code
Afghan HoundOP
Fair enough. I’ll give it a shot. Thanks so much!
Afghan HoundOP
Just letting you know plugging in code with the Pages folder worked fine and I'm getting successful payments now. Thanks for the direction