Uncaught Error: Expected an order id to be passed while integrating PAYPAL

Answered

Masai Lion posted this in #help-forum

Open in Discord

Masai LionOP

2024-02-01T05:44:00.000Z

Hello. Me again, this is urgent. so I am integrating PayPal to my NextJS website w/ Typescript.
My project is throwing the error on the title of the post, but before doing the modifications the order ID was sent successfully without errors. Anyways. I hope someone can help me ðŸ™‚
This is being difficult for me as I have never integrated PayPal.

I am trying to make it so that the items that are in the cart, when you click on the paypal button you can pay the 1 or 2 or the products you want and the price will be also established by the same list of properties. I also want to know if someone can share with me the documentation on how to change the currency_code without errors and also how to add the option to pay with only a credit/debit card.

But first I want to focus on the error mentioned in the title.

Scripts are inside this single file separated by comments.
https://paste.ec/paste/cN6zWVfL#sC3EAa2F6UxPViluXg9h4yUOphMIbfh0YsRQAurceeq
Link expires in 1 day

Answered by Ray

try this

request.requestBody({
    "intent": "CAPTURE",
    "purchase_units": [
        {
            "amount": {
                "currency_code": "USD",
                "value": "100.00"
            }
        }
     ]
});

View full answer

153 Replies

Masai LionOP

2024-02-01T06:38:24.000Z

Im trying to fix it while I wait so there might be modifications when someone answers me ðŸ¤

Masai LionOP

2024-02-01T07:16:52.000Z

So now it only says that Type r is not a function lol

Masai LionOP

2024-02-01T14:01:23.000Z

Hello! Iâ€™m still looking for someone to help me!!

@Masai Lion Hello! Iâ€™m still looking for someone to help me!!

2024-02-01T16:34:58.000Z

sure, let me see

try to console.log(order.id)

@Anay-208 try to `console.log(order.id)`

Masai LionOP

2024-02-01T22:02:21.000Z

I did already hehe

It throws nothing

@Masai Lion I did already hehe

2024-02-01T22:16:01.000Z

line 94

export async function POST(req: any) {
    const { products } = await req.json()

@Ray line 94 ts export async function POST(req: any) { const { products } = await req.json()

Masai LionOP

2024-02-02T03:27:31.000Z

Uhhh can you explain me please?

@Masai Lion Uhhh can you explain me please?

2024-02-02T03:32:41.000Z

does it fix it?

@Ray does it fix it?

Masai LionOP

2024-02-02T04:57:28.000Z

I havenâ€™t tried it I just want to see what it is just so I can learn :))

2024-02-02T05:05:44.000Z

you can't use req.body to access the body in app router. Instead, use [web api](https://developer.mozilla.org/en-US/docs/Web/API/Request/json) method req.json(), req.formData() or req.text() for it

Masai LionOP

2024-02-02T05:13:19.000Z

Wait sorry

But I modified my script already

I am using parts of my other scripts to get the item id

give me a second to share the new ones in codeblocks

Well

First a ss

@Masai Lion Click to see attachment

2024-02-02T05:18:19.000Z

does the redux store work in route handler?

@Ray does the redux store work in route handler?

Masai LionOP

2024-02-02T05:23:20.000Z

Yeah

I mean, when I add the products to the cart it shows the products

1 or 2 or many products and the quantity and the price adjusts automatically

I will send the CartProducts.tsx code together with the modifications of the route.tsx

Masai LionOP

2024-02-02T05:29:24.000Z

@Ray would u mind if I put three codes inside a 0bin link?

like 3 in 1?

https://paste.ec/paste/XC6fWDKS#SoVZwjdTsaxVrK9fHfJmVQ8XNFDTMshpQlTkA2A+63l

UPDATED SCRIPTS

@Ray does the redux store work in route handler?

Masai LionOP

2024-02-02T05:35:19.000Z

it used to work before adding modifications like to make it to be automatically updated by the products on the cart

i made a thread because I had a problem with this same files

someone helped me and it started working

@Masai Lion https://paste.ec/paste/XC6fWDKS#SoVZwjdTsaxVrK9fHfJmVQ8XNFDTMshpQlTkA2A+63l

2024-02-02T05:46:10.000Z

what error you get now?

@Ray what error you get now?

Masai LionOP

2024-02-02T05:46:31.000Z

same

no order id

let me try again just to confirm but last time I checked the error was still the same

@Masai Lion same

2024-02-02T05:47:14.000Z

do you see the products logged in console?
console.log(products)

@Ray do you see the products logged in console? ` console.log(products)`

Masai LionOP

2024-02-02T05:48:34.000Z

uhhh

i havent logged that yet

i will add it to route.tsx

and hope

@Ray do you see the products logged in console? ` console.log(products)`

Masai LionOP

2024-02-02T05:49:12.000Z

inside the scripts on components indeed i get the products

but not on the paypal one

@Masai Lion inside the scripts on components indeed i get the products

2024-02-02T05:49:44.000Z

but I don't think it will get the products in the route handler

@Ray but I don't think it will get the products in the route handler

Masai LionOP

2024-02-02T05:50:00.000Z

let me init server

wait

inside route.tsx i think i dont get products

@Masai Lion inside route.tsx i think i dont get products

2024-02-02T05:57:13.000Z

any error? do you see the log for the response?

@Ray any error? do you see the log for the response?

Masai LionOP

2024-02-02T06:06:54.000Z

yes

the server was also giving 505 internal server error

so i should run npm run build

it works but when i press the button the whole screen goes black and then it goes back to normal

prolly my 4gb of ram aint enough

@Masai Lion yes

2024-02-02T06:13:37.000Z

try wrap the endpoint with try/catch

export async function POST() {
  try {
    const products = useAppSelector((state) => state.cartReducer);
    const request = new paypal.orders.OrdersCreateRequest()
     
    const getTotal= () => {
        let total = 0;
        products.forEach((item) => (total = total + item.price * item.quantity));
        return total;
    };
     
    console.log(products)
     
    request.requestBody({
        intent: "CAPTURE",
        ....

     const response = await client.execute(request);
    console.log(response);
 
    return NextResponse.json({
        id: response.result.id
    });

  } catch (e) {
     const error = e instanceof Error ? e.message : typeof e === 'string' ? e : 'unexpected error'
    return NextResponse.json({error})
  }

@Ray try wrap the endpoint with try/catch ts export async function POST() { try { const products = useAppSelector((state) => state.cartReducer); const request = new paypal.orders.OrdersCreateRequest() const getTotal= () => { let total = 0; products.forEach((item) => (total = total + item.price * item.quantity)); return total; }; console.log(products) request.requestBody({ intent: "CAPTURE", .... const response = await client.execute(request); console.log(response); return NextResponse.json({ id: response.result.id }); } catch (e) { const error = e instanceof Error ? e.message : typeof e === 'string' ? e : 'unexpected error' return NextResponse.json({error}) }

Masai LionOP

2024-02-02T06:24:12.000Z

there is one more

idk if this error has sensitive info

2024-02-02T06:27:43.000Z

is this being logged?
console.log("ORDER:", order)

@Ray is this being logged? ` console.log("ORDER:", order)`

Masai LionOP

2024-02-02T06:29:15.000Z

It is inside but not logged

@Masai Lion It is inside but not logged

2024-02-02T06:30:02.000Z

  const res = await fetch('/api/checkout', {
                            method: "POST",
                             headers: {
                              "Content-Type": "application/json",
                          },
                        })

@Ray ts const res = await fetch('/api/checkout', { method: "POST", headers: { "Content-Type": "application/json", }, })

Masai LionOP

2024-02-02T06:31:02.000Z

where I add that

inside cart.tsx

right

2024-02-02T06:31:13.000Z

the button

@Ray the button

Masai LionOP

2024-02-02T06:34:44.000Z

same errors

@Masai Lion same errors

2024-02-02T06:36:39.000Z

do you see the console.log(products) and console.log(response); logged /api/checkout?

Masai LionOP

2024-02-02T06:38:22.000Z

inside the console no

in the script indeed

@Masai Lion inside the console no

2024-02-02T06:39:14.000Z

try curl -X POST http://localhost:3000/api/checkout in cmd

and what do you see

in terminal and console

Masai LionOP

2024-02-02T06:41:26.000Z

it shows the x isnt a recognized parameter

@Masai Lion it shows the x isnt a recognized parameter

2024-02-02T06:43:23.000Z

do you see console.log(products) logged?

@Ray do you see ` console.log(products)` logged?

Masai LionOP

2024-02-02T06:43:30.000Z

no

@Masai Lion it shows the x isnt a recognized parameter

2024-02-02T06:43:45.000Z

comment out const products = useAppSelector((state) => state.cartReducer);

@Ray comment out ` const products = useAppSelector((state) => state.cartReducer);`

Masai LionOP

2024-02-02T06:43:54.000Z

sure

wait

2024-02-02T06:44:05.000Z

and the items

getTotal just return 10

Masai LionOP

2024-02-02T06:44:35.000Z

i runned curl -X POST http://localhost:3000/api/checkout inside the console of inspector it says uhmm

Uncaught SyntaxError: Unexpected identifier 'POST'

this inside the inspectorÂ´s console

2024-02-02T06:44:57.000Z

run it in terminal

browser doesn't have curl

Masai LionOP

2024-02-02T06:45:11.000Z

them yeah it says X is not a parameter

@Ray comment out ` const products = useAppSelector((state) => state.cartReducer);`

2024-02-02T06:45:22.000Z

try this

@Ray and the items

2024-02-02T06:45:27.000Z

and this

@Ray and the items

Masai LionOP

2024-02-02T06:46:46.000Z

what are the items?

oh wait

i see

i comment the items?

but then paypal will ask me for items

@Masai Lion but then paypal will ask me for items

2024-02-02T06:48:20.000Z

just for test

their example doesn't have items either

Masai LionOP

2024-02-02T06:49:03.000Z

oh

so i comment it?

how do i comment it, ik how to comment but it gives me a syntax error

saying that amount blah blah blah

imma just delete it and send it here

items: products.map((item: any) => ({
                    name: item.name,
                    category: "PHYSICAL_GOODS",
                    description: item.description,
                    quantity: item.quantity.toString(),
                    unit_amount: {
                      currency_code: "USD",
                      value: item.price.toString(),
                    },
                  })),

done @Ray

@Masai Lion done <@743561772069421169>

2024-02-02T06:51:28.000Z

any error you get now?

@Ray any error you get now?

Masai LionOP

2024-02-02T06:51:36.000Z

let me check rq

@Ray any error you get now?

Masai LionOP

2024-02-02T06:54:45.000Z

same errors

same unexpected end of json

@Ray try wrap the endpoint with try/catch ts export async function POST() { try { const products = useAppSelector((state) => state.cartReducer); const request = new paypal.orders.OrdersCreateRequest() const getTotal= () => { let total = 0; products.forEach((item) => (total = total + item.price * item.quantity)); return total; }; console.log(products) request.requestBody({ intent: "CAPTURE", .... const response = await client.execute(request); console.log(response); return NextResponse.json({ id: response.result.id }); } catch (e) { const error = e instanceof Error ? e.message : typeof e === 'string' ? e : 'unexpected error' return NextResponse.json({error}) }

2024-02-02T06:56:56.000Z

any log from the endpoint??

export async function POST() {
  try {
    //const products = useAppSelector((state) => state.cartReducer);
    const request = new paypal.orders.OrdersCreateRequest()
 
    request.requestBody({
        intent: "CAPTURE",
        ....

     const response = await client.execute(request);
    console.log("response", response);
 
    return NextResponse.json({
        id: response.result.id
    });

  } catch (e) {
     console.log("endpoing error", e)
     const error = e instanceof Error ? e.message : typeof e === 'string' ? e : 'unexpected error'
    return NextResponse.json({error})
  }

Masai LionOP

2024-02-02T06:58:09.000Z

i mean

there is no other errors rather than the ones i sent while ago

2024-02-02T06:59:41.000Z

does your code on github which can be share? I have no idea how to debug without error log

@Ray does your code on github which can be share? I have no idea how to debug without error log

Masai LionOP

2024-02-02T07:00:21.000Z

i dont have github

@Ray ts export async function POST() { try { //const products = useAppSelector((state) => state.cartReducer); const request = new paypal.orders.OrdersCreateRequest() request.requestBody({ intent: "CAPTURE", .... const response = await client.execute(request); console.log("response", response); return NextResponse.json({ id: response.result.id }); } catch (e) { console.log("endpoing error", e) const error = e instanceof Error ? e.message : typeof e === 'string' ? e : 'unexpected error' return NextResponse.json({error}) }

Masai LionOP

2024-02-02T07:02:52.000Z

i added this and nothing

no new errors

@Masai Lion i added this and nothing

2024-02-02T07:04:46.000Z

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverComponentsExternalPackages: ['@paypal/checkout-server-sdk'],
  },
}
 
module.exports = nextConfig

try adding this to next.config.js

wait, you have 'use client' in app/api/checkout/route.tsx?

Masai LionOP

2024-02-02T07:05:36.000Z

i dont have next.config.js, i only have next.config.mjs

2024-02-02T07:05:45.000Z

same add it

@Ray wait, you have `'use client'` in `app/api/checkout/route.tsx`?

Masai LionOP

2024-02-02T07:05:45.000Z

yes...?

@Masai Lion yes...?

2024-02-02T07:05:52.000Z

remove it

Masai LionOP

2024-02-02T07:07:22.000Z

done

2024-02-02T07:07:43.000Z

try again

Masai LionOP

2024-02-02T07:07:46.000Z

and now I try again?

sure

Masai LionOP

2024-02-02T07:13:32.000Z

paypal window just loads and loads

no errors

no nothing

just loading paypal screen

finally

error

new messages and errors

thats something

2024-02-02T07:21:43.000Z

what error

Masai LionOP

2024-02-02T07:22:05.000Z

fist console log

Uncaught Error: Expected an order id to be passed
at https://www.sandbox.paypal.com/smart/buttons?

2024-02-02T07:23:01.000Z

try this

request.requestBody({
    "intent": "CAPTURE",
    "purchase_units": [
        {
            "amount": {
                "currency_code": "USD",
                "value": "100.00"
            }
        }
     ]
});

Answer

Masai LionOP

2024-02-02T07:23:04.000Z

and a third one

well the same one we`ve always had

@Ray try this ts request.requestBody({ "intent": "CAPTURE", "purchase_units": [ { "amount": { "currency_code": "USD", "value": "100.00" } } ] });

2024-02-02T07:23:59.000Z

try this from their example

Masai LionOP

2024-02-02T07:27:51.000Z

basically it now lets me sign in, which means it works

2024-02-02T07:28:24.000Z

so something wrong with your requestBody object

check their doc and modify it

and sending the product in fetch request of the button instead of using redux store

which doesn't work in route handler

Masai LionOP

2024-02-02T07:33:59.000Z

basically i just went to the beginning

so im alone from now on?

cuz this is where i started from

i went from 1st steps to something to 1st steps again

Masai LionOP

2024-02-02T07:43:43.000Z

bro now what :C

i need to do everything again?

Masai LionOP

2024-02-02T07:50:31.000Z

Imma go sleep and rest. Hopefully to find a way tommorow to idk make something up

@Masai Lion i went from 1st steps to something to 1st steps again

2024-02-02T17:00:51.000Z

I think you just need to correct the schema in the requestBody object and sending the items in the body of the fetch request