Malformed JSON paymentData input to process-payment?

Questions
1

I have setup Web Payments SDK Quickstart and got my sandbox credentials in where they belong. I saved the following HTML page in the examples directory along with the other, run it, my extended form shows up, I enter one of the legit credit card sandbox values, and then

// Process the payment on server
async function processPayment(paymentData) {

  • try {*
  • const response = await fetch(‘/process-payment’, {*
  •  method: 'POST',*

Which fails with unexpected end of JSON input

HERE’s the value of paymentData that is being rejected
{
“sourceId”: “cnon:CBASEKAZdgbIfn0HOk159w7Zo-U”, <<from card.tokenize
“name”: “Gus Mingu”,
“amount”: 123,
“description”: “”,
“shippingaddress”: “123 Baker Street”,
“city”: “Yourtown”,
“state”: “CA”
}

I suspect that I have malformed the sourceId (should it be "token?)
please advise

Pay
2

:wave: I’m Square Dev AI, here to help answer your question!
Based on the information you’ve provided, the following documentation will help answer your question:

Additional Documentation

In-App Payments SDK Quickstart
Sandbox Payments
Build on Mobile Web

If this documentation helped you find a solution, please check the box indicating that this reply solves the problem.
Otherwise one of our Developer Advocates will provide additional assistance shortly.

4

The error you’re encountering is likely due to the server-side handling of the ‘/process-payment’ endpoint. The error message “unexpected end of JSON input” typically indicates that the server is trying to parse an empty response body.

In your case, the ‘fetch’ function is making a POST request to ‘/process-payment’, and it expects a JSON response from the server. If the server doesn’t return a valid JSON response or doesn’t handle the ‘/process-payment’ endpoint correctly, you’ll encounter this error.

Ensure that your server-side code is correctly handling the ‘/process-payment’ endpoint and is returning a valid JSON response. The server should be set up to accept a POST request at this endpoint, process the payment using the provided paymentData, and then return a JSON response indicating the success or failure of the payment.

Also, make sure that your server is running and accessible when you’re testing this code. If the server isn’t running or isn’t accessible for some reason (for example, due to network issues), the fetch request will fail, and you may see this error.

This answer was reviewed by @Bryan-Square.