Integrating old web site with Square Checkout API

Question

Forgive my naivete here, but I am an old developer moving into the modern age. In short, I have an old web site programmed in ASP (I know, I know) that needs to use the Square Checkout API for very simple processing of payment. Thus, I need to send a JSON request to Square and process its response. I created a very, very stripped down JSON request using Javascript to be sent to Square for testing purposes, but cannot seem to get a handle on the response, "null." I cannot tell if I am simply getting no response and/or if my code is incorrect on receiving the JSON return. As it stands, I am only attempting to receive the response and print it to the screen before I add code to parse it and later redirect back to Square as per the API documentation. What am I doing wrong??
[Please note that I had previously wrapped the onload parameter to the request.response but it did not fire.]

My code is below. Any and all help would be sincerely appreciated!

Thank you, -Joe

     <html>

       <script>

       var obj = {
       "idempotency_key": "00000000c",
       "order": 
       {
         "reference_id": "00000000c",
         "line_items":
         [{
            "name": "My order",
            "quantity": "1",
            "base_price_money": 
            {
               "amount": 15,
               "currency": "USD"
             }
         }],

        "taxes":
        [{
           "name": "Sales Tax",
           "percentage": "8.5"
        }]
      },

       "ask_for_shipping_address": false,
       "merchant_support_email": "confused@myownsamplesite.com",

       "redirect_url": "https://www.myownsamplesite.com/success.asp"
    }

    var myJSON = JSON.stringify(obj);

    var request = new XMLHttpRequest();

     request.open('POST', 'https://connect.squareup.com/v2/locations/{location_ID_removed_for_security}/checkouts', true);
     request.setRequestHeader('Authorization', '{auth_token_removed_for_security}');
     request.setRequestHeader('Accept','application/json');
     request.setRequestHeader('Content-Type','application/json');
     request.responseType = "json";
     request.send(myJSON);

     var returnJSON = request.response;
     document.write(returnJSON);
    </script>
  </html>

Sasha Kos · Answer 1 · 2018-04-25T15:36:53.497

You are using asynchronous request

request.open('POST', URL, true); // <- true means asynchronous

for asynchronous request you should also define

req.onreadystatechange = function () {
  if (req.readyState == 4) {
     if(req.status == 200)
      console.log(req.responseText);
     else
      console.log("Error loading page\n");
  }
};

document.write may perform output only while html is loading. So it is possible that your request is OK, but you cannot see it.

you also may try (just for debug) synchronous request

request.open('POST', URL, false);

and console.log to see output in browser console, or instead of document.write use this

document.body.innerHTML += returnJSON

score 2 · Answer 2 · answered Apr 25 '18 at 15:58

You are not getting a response.

You should absolutely never use client side javascript to store your access token for Square or any API. People could just inspect the source of your site and then have full access to Square's APIs for your account. In order to help you remember this, Square does not respond to client javascript based requests.

You should instead be using a back-end language to generate your checkout forms (which you could call via ajax as Sasha described), or even use a serverless function to create the checkouts as outlined here: https://medium.com/square-corner-blog/super-simple-serverless-ecommerce-68d2792e8285

Integrating old web site with Square Checkout API

2 Answers2