Pebble Payments

By Jamie

November 4, 2013 Projects & Tutorials No comments

I’m a newly minted Pebble owner — going on three days. As the novelty of receiving SMS and e-mail on my wrist becomes my new normal, I’ve been looking for more ways to use the device. Sitting in Starbucks only one hour ago, it occurred to me that I could replicate Starbucks’ digital payment method currently enabled by iOS Passbook (and its native app) on the Pebble e-watch. All I needed was enough real estate to show the barcode with sufficient resolution that the reader would pick it up. Apparently the Pebble has enough real estate even on its tiny 168×144 screen, and I have just bought my first drink paid for with my Pebble.

This being my first Pebble app, what follows is horribly ugly.

I knew that I wanted to use a watch face as a template. Pebble treats “watch faces” different than “watch apps” — the most important distinction being that you can access watch faces from the home watch view simply by hitting the up or down keys and scrolling through them. Watch apps (like calculators or games) are accessed through the selection button, then you scroll through all your app titles and hit the select button again to launch a watch app.

Accordingly, I began with the Big_Time face as a template, working through CloudPebble. Big_Time uses images of each digit to tell the time, and so I already had the image resource framework and image containers in place, I just had to point them to my custom Starbucks barcode, which I created from a screenshot of my Passbook followed by a little editing in GIMP.

Within the big_time.c I made only three changes: 1) I added a custom image to the array of digit image addresses (replaced IMAGE_2 in my case); 2) I added an additional escape to the fcn load_digit_image_into_slot() to escape for any slot other than 1; 3) I repositioned slot 1’s image container to the top left (0,0)

The modified portion of big_time.c looks like this:

  if (slot_number != 1) {
  image_slot_state[slot_number] = digit_value;
  bmp_init_container(IMAGE_RESOURCE_IDS[2], &image_containers[slot_number]);
  image_containers[slot_number].layer.layer.frame.origin.x = 0;
  image_containers[slot_number].layer.layer.frame.origin.y = 0;
  layer_add_child(&window.layer, &image_containers[slot_number].layer.layer);

Obviously this app is wasteful — the clock is still running and trying to update the digits but I stop that from being presented on screen. Below is an edited version based on the same template, but with (hopefully) all extraneous code removed.

#include "pebble_os.h"
#include "pebble_app.h"
#include "pebble_fonts.h"

#include ""

#define MY_UUID {0x33, 0xBE, 0xF5, 0x10, 0xA4, 0xEB, 0x46, 0x8F, 0xAC, 0x42, 0x0E, 0x48, 0x9F, 0x23, 0x33, 0xDC}
PBL_APP_INFO(MY_UUID, "Starbucks Card", "Mouse Extinction", 0x5, 0x0, RESOURCE_ID_IMAGE_MENU_ICON, APP_INFO_WATCH_FACE);

Window window;

BmpContainer image_container;

void load_image() {

  bmp_init_container(RESOURCE_ID_IMAGE_STARBUCKS, &image_container);
  image_container.layer.layer.frame.origin.x = 0;
  image_container.layer.layer.frame.origin.y = 0;
  layer_add_child(&window.layer, &image_container.layer.layer);


void unload_image() {



void handle_init(AppContextRef ctx) {

  window_init(&window, "Starbucks Card");
  window_stack_push(&window, true);
  window_set_background_color(&window, GColorBlack);


void handle_deinit(AppContextRef ctx) {



void pbl_main(void *params) {
  PebbleAppHandlers handlers = {
    .init_handler = &handle_init,
    .deinit_handler = &handle_deinit,

  app_event_loop(params, &handlers);

Leave a Reply

Your email address will not be published. Required fields are marked *