While developing integrations using the Snippet API, I realised that there wasn't an easy way fro developers to hook into actions being performed on Square Online pages. Snippet Helper solves this problem for developers, by firing events as users perform actions on the site that they can easily hook into and fire off custom code.

Snippet Helper also provides a simple Snippet Editor to get up and running quickly.

What it does

Snippet Helper currently supports the following page actions, with more being added soon!

  • Adding an item to cart
  • Updating quantities
  • Applying coupons
  • Showing / hiding the cart
  • Going to checkout
  • Getting the current order
  • Getting the page's square configuration

How we built it

We created a react app front end to handle the snippet editor with a node JS backend to handle authentication.

Challenges we ran into

It can be quite difficult to hook into some events, particularly those that do not involve an API request. We overcame this by watching for changes in CSS classes on things like the cart, so we can see when it opens and closes.

What we learned

We learned a lot about the Snippets API and how it might be used given the way users interact with the page.

What's next for Snippet Helper

We hope to open-source our work so that others can benefit!

Share this project: