Mystic 8 Ball Pass to demo PassKit image upload capabilities

Patrick Kosterman

Patrick Kosterman

Need a bespoke wallet solution? Patrick works with clients to deliver exactly what they need.
Share on facebook
Share on twitter
Share on linkedin

Objectives:

  • Demonstrate the power of dynamic image upload in PassKit Passes;
  • Make the code available to anyone so they can quickly integrate and implement image upload into their own campaigns and Passes.

A little background on PassKit image upload:
The PassKit image upload works in a really cool and efficient way. If you want your image on a pass, you can use the following process:

  1. Update the image to PassKit by using the pk_image_upload API method. The pk_image_upload method takes 2 parameters:
    1. imageType;
    2. imageFilePath;
  2. More info on the image upload method can be found here: https://code.google.com/p/passkit/wiki/UploadImage
  3. The image upload method will return a unique ID for the image;
  4. To use this image on a pass, we have to update one of the following pass fields with the image ID when doing a pass update (via API call):
    1. ‘thumbnailImage’;
    2. ‘stripImage’;
    3. ‘logoImage’;
    4. ‘footerImage’;
    5. ‘backgroundImage’;
    6. ‘iconImage’;

Mystic 8 Ball Flow:
The Mystic 8 Ball Pass experience has the following flow:

  1. User installs the Mystic 8 Ball pass;
  2. On the back of the pass there is an ‘ask’ link with the pass-id embedded in the link;
  3. After clicking the link, the user is directed to mystic8ball.com as a a simple web-form (that has the pass-id stored as hidden value);
  4. The user inputs his/her question into the question box;
  5. The question & pass-id are posted back to the server, where the post-script picks a random image from the mystic8ball.com image/answers directory;
  6. All the images have the answer in the name, so for example the image for “Ask again later” is called ask_again_later.png. This way we get the short image text as well, without having to store this reference in a database or array. This makes it easier to add new answer images later without having to change anything in the code;
  7. Since we have 20 images with answers, and we expect the 8 ball to be used a lot, it will be very likely that the script will result in a lot of upload-traffic. Therefore we implemented a simple caching script that checks if the image was uploaded already:
    1. If image uploaded before: use the cached image ID (one unique ID per image) and don’t do an upload;
    2. If image not uploaded before: upload the image using the PassKit pk_image_upload method, and store the returned image ID in the local cache;
  8. After we have the image ID, we update the following fields on the pass:
    1. ‘stripImage’ (this is the most important one, since it changes the image on the front of the pass. This image holds the Mystic 8 Ball answer in a nice graphic representation);
    2. ‘Status’ (we update this with the textual representation of the answer that we extract from the image file-name. Underscores are replaced with spaces);
    3. ‘Question counter’ (this field is on the back of the pass, and shows how many questions you have asked);
    4. ‘Flip’ (we update this with a text string that says: ‘ask again’;

The main reason for point 8B and 8C is that when these fields get updated, those messages are also pushed to the lock-screen, this looks really cool, and really shows the added value & potential of the clever PassBook marketing.
Link to code repository
Result:
photo