I am trying to figure out using the JavaScript SDK for displaying PayPal payment buttons on a website and I am pretty new to using JSON and REST API calls as well.
My createOrder function is executing, and calling the code on my server back end. The paypal api calls on the back end appear to be working fine (authorization, /v2/orders/create). The problem occurs when I have returned the response body from the /v2/orders/create that I called on the server side back to the client side createOrders function, PayPal is giving me the following error:
{err: 'Error: Expected an order id to be passed\n at ht…credit,venmo&integration-date=2023-01-01:3:15633)', timestamp: '1686345825125', referer: 'www.sandbox.paypal.com', sdkCorrelationID: 'f896866242248', sessionID: 'uid_915a4c39df_mje6mtm6mtc', …}
Here is what my server side code is returning to the createOrder function (pulled from developer console):
{"d":"{\"id\":\"7MF03646UY937942N\",\"status\":\"PAYER_ACTION_REQUIRED\",\"payment_source\":{\"paypal\":{}},\"links\":[{\"href\":\"https://api.sandbox.paypal.com/v2/checkout/orders/7MF03646UY937942N\",\"rel\":\"self\",\"method\":\"GET\"},{\"href\":\"https://www.sandbox.paypal.com/checkoutnow?token=7MF03646UY937942N\",\"rel\":\"payer-action\",\"method\":\"GET\"}]}"}
Here is the code of my createOrder function:
createOrder: function () {
return fetch("ppcktest2/ppckCreateOrder", {
method: 'POST',
credentials: 'include',
headers: { 'Content-Type': 'application/json' },
})
.then((response) => response.json())
.then((order) => order.id);
}
I feel like the issue must have something to do with the JSON I am returning back to the createOrder function. Is there something wrong with the format? The developer console in Chrome won't show my response from my server as a tree when I preview it, which I would think it should.
I haven't posted my server-side code because it seems to be fine, unless there is an issue with how I am returning the JSON, which I am basically just returning the response body just as I get it from PayPal.
Note: I am NOT using a PayPal SDK on my server side, I am just making straight API calls.
I would like to understand:
what exactly is the JavaScript sdk createOrder function wanting to have returned to it? The entire JSON response from my server side call to /v2/orders/create or just a part of it?
and how should my server side return it - I assume as a JSON formatted string like I am currently returning... I am not sure how to return anything else.
I am a relative newbie with JSON and APIs, and I am sure is part of the problem.
{"d":"{\"id\":\"7MF03646UY937942N\",\"status\":\"PAYER_ACTION_REQUIRED\",\"payment_source\":{\"paypal\":{}},\"links\":[{\"href\":\"https://api.sandbox.paypal.com/v2/checkout/orders/7MF03646UY937942N\",\"rel\":\"self\",\"method\":\"GET\"},{\"href\":\"https://www.sandbox.paypal.com/checkoutnow?token=7MF03646UY937942N\",\"rel\":\"payer-action\",\"method\":\"GET\"}]}"}
I don't know where this log is coming form but this string appears as though it may be double encoded or similar, the server should be returning a simpler string.
You can also use the Network tab, find the request, and use its Response subtab to look at the actual data being transmitted. If you see \ in the data, it's probably overencoded and is best resolved on the server.
Use https://developer.paypal.com/demo/checkout/#/pattern/server as a reference implementation and compare the log in the Network tab there when a button is clicked.
You can also load ppcktest2/ppckCreateOrder in a browser tab and directly compare the format of its output to that of https://developer.paypal.com/demo/checkout/api/paypal/order/create/.
That demo site has other response parameters specific to that site/implementation, the only important one is id.