Integrating the PIN Pad

The PIN Pad should be integrated into the web application (RPA) login HTML page. To do this:

1. Include the PIN Pad's main module, mpin.js, by adding a script tag similar to the following, into the HTML head:

    <script type="text/javascript" src="{mpin-path}/mpin.js" />

2. Instantiate and Initialize an mpin object. This is done with the following JavaScript code:

    new mpin( <init-options> );

The following is a sample HTML page implementation:​

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>M-Pin demo</title>
<link href="/public/css/MIRACL.css?v=ee4d555e38d8c86110e6130f077bc6e2" rel="stylesheet" type="text/css" />
<link href="/public/css/mpin.min.css?v=b7676587a6d88e2818ef2f1a7d1fdae6" rel="stylesheet" type="text/css" />
<!-- Favicons
================================================== -->
<link rel="shortcut icon"
<!-- Fonts
================================================== -->
href='//,400italic,700,700italic' rel='stylesheet' type='text/css'>
<script type="text/javascript"
<script type="text/javascript">
new mpin( {
targetElement: "pinHolder", clientSettingsURL:
mobileAppFullURL: "",
successSetupURL: "/successSetup", successLoginURL: "/protected", onSuccessSetup: function(setupData, onSuccess) {
console.log("Setup PIN successful") onSuccess()
onSuccessLogin: function(authData) { console.log("Login successful") window.location = "/protected"
onVerifySuccess: function(data){
identityCheckRegex: "[0-9a-zA-Z]+"
<div id="header">
<div class="container">
<a href="" target="_blank"
class="logo1"><img src="/public/images/MIRACL-logo.jpg?v=0517e63d9febecab7894f22262f21d67" alt="MIRACL Logo" width="170" height="33" title="MIRACL Logo" style="border-style:
<a href="", target="_blank"
class="logo2"><img alt="M-Pin strong authentication logo" src="/public/images/m-pin-logostrong.png?v=3517e8e85a0030f3f4fad11d0e9448c9" width="152" height="54" title="M-Pin strong authentication logo" style="border-style: none"></a>
<div class="clear"></div>
<div id="content">
<div class="container">
<div class="nav">
<li><a href="/" class="active">Home</a></li>
<li><a href="", target="_blank">About M-Pin</a></li>
<li><a href="" target="_blank">Download M-Pin</a></li>
<li><a href="" target="_blank">Community</a></li>
<div class="clear"></div>
<div class="content">
<h1>Welcome to the M-Pin System Demo</h1>
<!--action box start-->
<div class="one column center grey marBot20 marTop20">
<div id="pinHolder" style="margin:auto; width:260px;">
Loading PinPad...
<div class="clear"></div>
<!--action box end-->
<div id="footer">&copy; 2013 MIRACL UK Limited, All Rights

The source should be retrieved from GitHub and served from a location of your choice.