Day 4 of #100DaysOfCode: Building My First Square App with Glitch
Tags: express, square, node, javascript
Published: 2020-04-19 00:25:44

Today I built my first working Square app!

I started with Square's official [Order-Ahead Sample App](https://github.com/square/connect-api-examples/tree/master/connect-examples/v2/node_orders-payments), a Node/Express project.

Following its accompanying [tutorial in the Square docs](https://developer.squareup.com/docs/orders-api/quick-start/start):

## Configuration

I created an Order Ahead app in https://developer.squareup.com/apps/ (you need a [Square account](squareup.com/i/EATSWADESH) 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:

![Detail pop-up for Fried Chicken Sandwich](https://dev-to-uploads.s3.amazonaws.com/i/zz6fqhg6bbuu0scbro3h.png)

Clicking *Buy This* leads to *Choose Delivery Method*:

![Choose Delivery Method](https://dev-to-uploads.s3.amazonaws.com/i/nx1zx4gq4xdergvcegz4.png)

* 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](https://developer.squareup.com/docs/orders-api/quick-start/step-4):

![Review and Complete Your Order page](https://dev-to-uploads.s3.amazonaws.com/i/zaaf3m3zyrh8ll0ecp3d.png)

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

![Order Confirmation](https://dev-to-uploads.s3.amazonaws.com/i/5571lbv42t29rof6tzvu.png)

## Verifying the Order in the Sandbox

Sure enough, the order shows up under Orders:

![Order Detail](https://dev-to-uploads.s3.amazonaws.com/i/4pd9apa2alskhm5k93z5.png)

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](https://github.com/github/gitignore/blob/master/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:

{% glitch orderahead %}

## The Deployed Demo Site

You can experiment with this and even place test orders using the [demo credit card](https://developer.squareup.com/docs/orders-api/quick-start/step-4). 

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

Finally, if you're new to Square, [here's an invite](squareup.com/i/EATSWADESH) to get free processing on up to $1,000 in credit card transactions for the first 180 days.