Day 4 of #100DaysOfCode: Building My First Square App with Glitch

Today I built my first working Square app!

I started with Square's official Order-Ahead Sample App, a Node/Express project.

Following its accompanying tutorial in the Square docs:

Configuration

I created an Order Ahead app in https://developer.squareup.com/apps/ (you need a Square account to do this)

I updated config.json with the sandbox app ID and token.

Running npm test failed. I did npm install and tried again. It worked:

$ npm test

> order-ahead-sample-app@0.0.0 test /Users/arg/projects/3rd-party/connect-api-examples/connect-examples/v2/node_orders-payments
> NODE_ENV=sandbox node ./bin/www

First Local Run

I went to http://localhost:3000/ and saw a page with "Sandbox Location Business Nickname" at the top. Yay, the app runs locally!

Generating Test Data

I ran the example script to seed the sandbox store catalog with test data. It generated a bunch of restaurant food items:

$ npm run seed

> order-ahead-sample-app@0.0.0 seed /Users/arg/projects/3rd-party/connect-api-examples/connect-examples/v2/node_orders-payments
> NODE_ENV=sandbox node ./bin/script/seed-catalog.js generate

Successfully uploaded item: #Italian Sandwich
Successfully uploaded item: #Steak Tacos
Successfully uploaded item: #Autumn Soup
Successfully uploaded item: #Sunny-Side Egg on Toast
Successfully uploaded item: #Fried Chicken Sandwich
Successfully uploaded item: #Salmon with Zucchini
Successfully uploaded item: #Oatmeal with Fruit
Successfully uploaded item: #Mediterranean Yogurt Bowl
Successfully uploaded item: #Meatballs
Successfully uploaded item: #Pancakes with Fruit
Successfully uploaded item: #Bacon Cheeseburger
Successfully uploaded item: #Grilled Steak

Placing a Sample Order

Restarting the local server with npm test, I now see those test items. I can click them to see a pop-up with detail and a Buy This button:

Clicking Buy This leads to Choose Delivery Method:

• Under Delivery Method, the only option is Pickup.
• Under Pickup Location, the only option is Sandbox Location Business Nickname.

The next screen was Review and Complete Your Order. I entered the test card:

I clicked Pay with Card and it gave me this Order Confirmation:

Verifying the Order in the Sandbox

Sure enough, the order shows up under Orders:

I can mark it In Progress, then Ready, then Picked Up using the upper right button.

That's great that the sample Square app works locally.

Getting It Running on Glitch

I made a copy of the node_orders-payments folder as OrderAhead.

I copied GitHub's Node.gitignore as the project .gitignore.

The code's now in a GitHub repo: https://github.com/feldroy/OrderAhead

In Glitch, I clicked New Project > Clone from Git Repo and pasted in git@github.com:feldroy/OrderAhead.git. The screen went black and it didn't like that. I tried again with https://github.com/feldroy/OrderAhead.git and that worked.

The Square tutorial had me put credentials into config.json earlier, which I .gitignored. I moved those to .env and now load them from there in util/square-connect-client.js:

const config = {
  "path": "https://connect.squareupsandbox.com",
  "squareApplicationId": process.env.SQUARE_APPLICATION_ID,
  "squareAccessToken": process.env.SQUARE_ACCESS_TOKEN
}

Here's the Glitch app:

The Deployed Demo Site

You can experiment with this and even place test orders using the demo credit card.

Play with the live demo: https://orderahead.glitch.me/

Finally, if you're new to Square, here's an invite to get free processing on up to $1,000 in credit card transactions for the first 180 days.