Wanna be able to visualise or show how your passes looks like? In this blog post we’ll cover how to build a page that renders your passes step by step, with the assumption that the user doesn’t have any coding capabilities.
Step 1 – Create a folder
Create a folder on your computer and name it ‘PassDisplay’. It can be anywhere in your machine. If you don’t know where to create it, just do it on your Desktop.
From this point you have two options:
- You can download these files directly into the folder you just created and skip the process to step 6. You can find the files by clicking here.
- You can go to setp 2 and create the files yourself. If you decide to do so and know a bit of coding, you will also be able to play around with colours and shapes of the landing page.
Step 2 – Create two files called index.html and display.js
If you are a Mac user you can do this with TextWrangler. You can download TextWrangler from the App store. If you are using Windows, you can use Sublime Text instead. In this guide we’ll use TextWrangler.
NOTE: From this point onwards, if you are using Windows, each time you read ‘TextWrangler’ please perform the same action with ‘Sublime Text’ or the Windows version of the text editor of your choice.
Step 2.a) Create file index.html
In order to create the file index.html follow the instructions below:
- Open TextWrangler
- Click on ‘File’ on the top right of your Mac
- Click on ‘save as’
- Change the file name into index.html and save it into the PassDisplay folder you created in step 1
Step 2.b) Create file display.js
- Open TextWrangler
- Click on ‘File’ on the top right of your Mac
- Click on ‘save as’
- Change the file name into display.js and save it into the PassDisplay folder you created in step 1
Here’s how the ‘save as’ window for display.js should look like:
Step 3 – Copy the following codes in the respective file
In this step you need to open the files with TextWrangler. display.js file: For display.js copy and paste the following code:
(function (angular, $, isMobile) {
// Main driver of Angular functionality
angular.module("myApp", ["pk-pass-display"])
.config(["$locationProvider", function($locationProvider) {
$locationProvider.html5Mode({enabled:true,requireBase:false});
}])
.controller("passCtrl", ["$scope", "$window", "$http", "$location", passController]);
// This is the function that checks if your pass is valid and what type of device you are using
function passController($scope, $window, $http, $location) {
// This section checks the end of your url for the pass id
var passId = $location.search().pid;
$scope.passId = passId;
console.log(passId);
$scope.passDisplayError = passDisplayError;
$scope.passDisplayLoaded = passDisplayLoaded;
// The list below contains all of the initial true/false values that can change in the function
$scope.passLoaded = false;
$scope.passValid = true;
var bundleLink = "https://api-pass.passkit.net/v2/passes/" + passId + "/bundle?static=true";
$scope.passLinkIos = bundleLink;
$scope.passLinkPlayStore = "https://play.google.com/store/apps/details?id=com.passesalliance.wallet&referrer=" + encodeURIComponent(bundleLink);
$scope.androidIntent = function(){doIntent('pass2u', '//import/'+ encodeURIComponent(bundleLink), 'com.passesalliance.wallet');};
$scope.passLink = encodeURIComponent($location.absUrl());
function passDisplayError() {
$scope.passValid = false;
$scope.passLoaded = true;
}
function passDisplayLoaded(pass) {
$scope.passValid = !pass.isInvalid;
$scope.passLoaded = true;
}
}
// Copy and paste this section directly
function doIntent(intentScheme, intentCommand, intentPackage) {
// do the intent
if (navigator.userAgent.match(/Android/)) {
var intentUrl = intentScheme + ":" + intentCommand;
if (/Chrome[\/\s](\d+\.\d+)/.test(navigator.userAgent)) {
var versionChrome=new Number(RegExp.$1);
if (/OPR[\/\s](\d+\.\d+)/.test(navigator.userAgent)) {
intentUrl = intentScheme + ":" + intentCommand;
}else if(/FBAV[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
intentUrl = intentScheme + ":" + intentCommand;
window.location = intentUrl;
}else {
if (versionChrome > 18) {
intentUrl = "intent:" + intentCommand + "#Intent;scheme=" + intentScheme + ";package=" + intentPackage + ";end";
window.location = intentUrl;
}
}
}
if ( intentUrl === intentScheme + ":" + intentCommand) {
var iframe = document.createElement("iframe");
iframe.style.border = "none";
iframe.style.width = "0";
iframe.style.height = "0";
iframe.setAttribute("id", intentPackage);
iframe.src = intentUrl;
document.body.appendChild(iframe);
}
}
}
// detects what kind of device you are using
$( document ).ready(function() {
// detect iPhone
if (isMobile.apple.phone || isMobile.apple.ipod) {
document.getElementById("ios").style.display="block";
console.log("ios");
}
// detect android
else if (isMobile.android.phone || isMobile.android.tablet) {
document.getElementById("android").style.display="block";
console.log("android");
} else {
// show desktop
document.getElementById("browser").style.display="block";
console.log("browser");
}
});
})(window.angular, window.jQuery, window.isMobile);
Here’s how the code pasted into the file dispaly.js should look like:
Index.html File: For index.html copy and paste the following code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="pk-pass-display.min.css">
</head>
<!--This line allows all of the Angular variables to be included in the rendering of the page-->
<body >
<!--This section validates your pass and the device your using-->
<div class="col-xs-12 center download-page" >
<!--Checks that your pass is valid-->
<div data-ng-app="myApp" data-ng-controller="passCtrl" data-ng-show="passValid">
<pk-apple-pass pass-id="{{passId}}" bg-color="#000" language="{{language}}" on-error="passDisplayError()" on-loaded="passDisplayLoaded(pass)"></pk-apple-pass>
</div>
<!--Checks that your pass is valid and if your device is Ios.-->
<div id="ios" style="display:none;">
<!--If your device is Ios then specific button links will be supplied-->
<a class="button-link" ng-href="{{passLinkIos}}"><img ng-src="include/images/{{languageText[language].linkLang}}/btn-applewallet.png" alt="Add to Apple Wallet" /></a>
</div>
<!--Checks that your pass is valid and if your device is Android-->
<div id="android" style="display:none;">
<!--If your device is Android then specific button links will be supplied-->
<div class="button-link" ng-click="androidIntent()"><img ng-src="include/images/{{languageText[language].linkLang}}/btn-pass2u.png" alt="Add to Pass2U" /></div>
<a class="button-link" ng-href="{{passLinkPlayStore}}"><img ng-src="include/images/{{languageText[language].linkLang}}/btn-googleplay.png" alt="Get it on Google Play" /></a>
</div>
<!--Checks that your pass is valid and if your device is a desktop using a browser-->
<div id="browser" style="display:none;">
<!--If your device is a desktop using a browser, you will be shown a QR code-->
<div class="qr-code"><img ng-src="https://d1ye292yvr7tf6.cloudfront.net/images/barcode.php?m={{passLink}}&f=qr&e=UTF-8&x2=1" /></div>
</div>
<!--These are all of the javascript libraries needed-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0-rc.2/angular.min.js"></script>
<script src="https://momentjs.com/downloads/moment-with-locales.min.js"></script>
<script src="isMobile.js" charset="utf-8" type="text/javascript"></script>
<script src="display.js"></script>
<script src="pk-pass-display.min.js"></script>
</body>
</html>
Here’s how the code pasted into the file index.html should look like:
Step 4 – download the pk-pass-display.min.css / pk-pass-display.min.js directly to your files
In order to perform this task, please follow the instructions below:
- Go to: https://github.com/PassKitInc/pk-pass-display
- Click ‘Clone or download’
- Click ‘download zip’
- Go to downloads
- Unzip pk-pass-display-dist.zip
- Open pk-pass-display-dist
- Open file ‘dist’
- Copy or move the files pk-pass-display.min.css and pk-pass-display.min.js directly to your PassDisplay folder created in step 1.
NOTE: If you are adding the content of the index.html file to an already existing file, please pay close attention to the order of the <link rel=”stylesheet” and <script src= lines at the top and bottom of the file. Their order is important to the functionality of the program.
Step 5 – Create isMobile.js file
For this part, go to https://github.com/kaimallea/isMobile and follow the instructions below:
- Click the file named isMobile.js
- Click the button “Raw”
- Copy the file
- Create a file in your passDisplay folder called isMobile.js
- Paste what you copied into that file and save
Here’s how the code pasted into the file isMobile.js should look like:
At this stage your PassDisplay folder should contain five files (display.js, index.html, isMobile.js, pk-pass-display.min.css and pk-pass-display.min.js).
Step 6 – Open index.html in your browser
Once you are in the PassDisplay folder again, you can double click on index.html and you will notice that the page is blank. This is normal, as you have not supplied a pass id for the program to read yet. In order to do so, please add the following piece of text to your URL and complete the next step:
?pid=
Step 7 – Add your pass ID after the =
You need to have a pass id in order to complete this step. You can find pass id after you create a template and issue passes through the PassKit Portal. If you don’t have one pass id yet, you can use the following one as a test:
i1BgjTJt6aYL37
So your URL will look something like this:
file:///xxx/yyy/zzz/passDisplay/index.html?pid=i1BgjTJt6aYL37
And here’s an example of how your landing page could look like:
Now it’s your turn
Did you find this article useful? Are you going to create your own landing page? Please let us know if you have any doubts or questions in the comment section below.
You might also want to read How To Use the PassKit API
