Create your own IoT button with bttn and Moltin

Matt Foyle profile picture
Last updated: 18 Oct 2018
Revisiting one-press IoT checkout for your customers to work with the most current version of Moltin.

Introduction

When the Amazon Dash was introduced, it was awesome. However, upon having to choose a single Amazon product to link it to, it became less awesome - IoT should be flexible, and extendable.

It made me wonder, shouldn’t every retailer be able to create their own IoT experience, with the ability to link it to any product they sell?

Luckily, the good folks at bt.tn feel the same way. I grabbed one of their IoT devices, capable of HTTP requests and started building. The result became a button attached to my own defined product and customer on a Moltin project.

Setup summary

In order to make this work, you are going to need:

Over the next few minutes we are going to:

  1. Configure the Moltin project: add a product and a customer to link to the bttn device.
  2. Write a short serverless function which when triggered will purchase a certain given product for a certain given customer, and then log whether that purchase was a failure or a success. If you’d like a primer on writing such functions, read this crash course on Severless with Node.js or visit the Zeit docs.
  3. Configure the bttn through the admin interface, so that it knows how to trigger our serverless function when it is pressed and provides the function with the customer and the product to be purchased. Make sure it gives the function a callback URL to tell the button if it was a success or failure.

What’s actually happening is akin to the button presser ringing a doorbell, and passing a note through the letterbox stating: I am customer X, my details are Y, I wish to buy product Z, and here is my return address so you can tell me what happened.

The note is picked up by our function (or the person behind the door), which processes the purchase, and then sends a note back to the return address with the result.

Moltin setup

The first step is to grab your Moltin account if you don’t already have one. Sign up at www.moltin.com. Once signed up, you’ll gain access to dashboard that will provide you with a set of API keys: take note of those. You’ll then need to add a product to your project. You can do this either programmatically (see: API Reference) or through the dashboard. Once created, take a note of the ID. Lastly you'll need to enable the Stripe gateway through moltin so we can test the payment. Grab your test Stripe key, and then update the gateway in moltin here

At minimum, in your project:

  • Add a product. Make sure its status is set to live.
  • Enable the Stripe gateway and provide a test Stripe key.

Bttn setup

Buy a bttn from https://bt.tn/ and then log into your bt.tn account. Once logged in, at the bottom of the page, generate a REST API key by creating an application, and take note of the API key.

You now have a bttn application to work with. On the home page, look for your bttn and the Action button on the top right. On the next page, hit New Action.

Create a HTTP type action by following the steps.

The first thing we need to give it the URL to call. For now, enter anything, like www.google.com here, as our function has not be deployed to its own URL yet.

We need to instruct the bttn to pass us the callback URL, so we can store it while processing the request in our function. We do this by specifying argument format of application/x-www-form-urlencoded, and referencing bttn’s predefined config.

Then, we need to enter the method, which I’ve set to POST because, within my express app, I’ve asked it to listen and respond to POST requests at the root.

You can leave all the other fields up to wait for HTTP callback as NO, as shown below.

We then check the Wait for HTTP callback box. Once selected, it gives us some extra info.

In the Select callback application field, you’ll have a dropdown, and you can select the application you created earlier while generating an API key.

Lastly, we set what to look for within the callback to define success. In our function, we’ll make sure that we pass a body of {result: ‘success’}, if the purchase is successful. Thus, we’ll ask the bttn to show green, if the response we send contains the word success.

Hit next at the bottom right of the page, and review the summary to make sure everything is correct. You can check Store this as a template under your stored actions, and save it.

Finally, hit Save at the bottom right of the page, and you’re done!

Building the function

You can clone the code directly from this GitHub repository. In the following section, we will add the required variables, and then deploy our function for the first time.

Once it’s deployed using Zeit Now, we’ll have a URL to add to our bttn action. Make sure at this stage you have the Now CLI installed.

Having cloned the repo, you will need to add the correct variables to make it work. Firstly, go to the example.now.json file and rename it to now.json. Now, add your Moltin Client ID as well as the bttn API key; both of which you noted earlier. Then, add the ID of the moltin product you want linked to this bttn.

Next, run npm i from a terminal to install the required dependencies.

Now, we’re ready to deploy! From the terminal, simply type now. The deployment process will be triggered, and it will spit out a URL. Hop back to our bttn admin, and re-run through the bttn setup. Everything will be pre-filled as you had before, but now you can add the URL in the HTTP URL section.

All done? Great, press that bttn!

You can look at the logs over at the Zeit dashboard by selecting the function you just deployed.

The first thing you’ll see in the logs is “request received”, showing that the server has detected a bttn press.

Once we see “purchase success”, we know that the Moltin bit is finished, and we have a completed purchase!

Finally, you’ll see “callback success” showing that we completed the callback to the URL passed to us.

It’s around this time that you should see your bttn flash green. Seeing this confirms that we made the callback successfully, and we’re done!

Let's build something amazing with Moltin