Skip to content

Instantly share code, notes, and snippets.

/index.html

Created September 5, 2016 04:54
Show Gist options
  • Save anonymous/8d4b388d25ea9726c1eaf5181418aa22 to your computer and use it in GitHub Desktop.
Save anonymous/8d4b388d25ea9726c1eaf5181418aa22 to your computer and use it in GitHub Desktop.
Download ZIP
HTML5, CSS3 and JavaScript demo // source http://jsbin.com/ciyezofiha
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.3/bluebird.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/javascript-state-machine/2.0.0/state-machine.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/EventEmitter/4.3.0/EventEmitter.js"></script>
<script src="https://mockbroker.v3.millipay.ch/jsrsasign-5.0.5-all-min.js"></script>
<script src="https://mockbroker.v3.millipay.ch/jquery.ba-postmessage.js"></script>
<script src="https://mockbroker.v3.millipay.ch/mipi3.js"></script>
<script src="https://mockbroker.v3.millipay.ch/MilliPayApiWrapper.js"></script>
<script src="https://mockbroker.v3.millipay.ch/MilliPayPaymentStateMachine.js"></script>
<script src="https://mockbroker.v3.millipay.ch/BasicPaymentGui.js"></script>
<script src="https://mockbroker.v3.millipay.ch/MilliPayPaymentGui.js"></script>
<script src="https://mockbroker.v3.millipay.ch/MPUnifiedPayApi.js"></script>
<script src="https://mockvendor.v3.millipay.ch/millipay.js"></script>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="twelve columns">
<h1>milliPay Unhide Example</h1>
<p>This example shows how content can be unhidden after payment. Use the test account <code>cms@user.ch</code> with password <code>cms</code> to log in and complete the payment. You can take a look at the decoded JWT <a id="jwtDecode" target="_blank">here</a>.
</p>
<p id="content" style="display: none">
<img class="centered" src="https://mockvendor.smoketest.millipay.ch/images/oldcar.jpg" />
</p>
<button id="showImageButton" style="margin-top: 10px" class="button">show image (EUR 0.10)</button>
</div>
</div>
</div>
<script id="jsbin-javascript">
var token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJwYXlsb2FkIjp7InRpdGxlIjoiQSBuaWNlIGltYWdlIG9mIGEgY2FyIiwicHJpY2UiOiIwLjEwIiwiY3VycmVuY3kiOiJFVVIiLCJ2YWxpZGl0eSI6IjAiLCJwcm9kdWN0VXJsIjoiaHR0cHM6Ly9tb2NrdmVuZG9yLnYzLm1pbGxpcGF5LmNoL2V4YW1wbGVzL3VuaGlkZSIsInByb2R1Y3RJbmZvIjoiIiwidmVuZG9ybmFtZSI6IkV4YW1wbGUgVmVuZG9yIiwidmVuZG9ybG9nb3VybCI6Imh0dHBzOi8vbW9ja3ZlbmRvci52My5taWxsaXBheS5jaC9pbWFnZXMvbG9nb0V4YW1wbGVWZW5kb3JTbWFsbC5wbmciLCJwYXltZW50UmVxdWVzdElkIjpudWxsLCJwcm9kdWN0SWQiOiJmY2RhZmJiMTIwOGQwYzJmNmU1M2FlZGIyY2JhY2U1N2Y5ZDc3NGMwMWE2NWM5ZTkzNGNiNzFlODg0NWEyNjhiIiwiY29udGVudElkIjoiZGRmZjY2YWUyZmQxYTU5ZjlmYTVlOGJjMTQ3ZjNhOGZjOWFmYzZhZDQ4NTcxYmNmNTc5YjI3MjFiOTUyZjA2Yzg2Njc4OWRkNjkzYWU0YmIxOTE0YjcyZDg0MmVkOTQ3OTZiYmQ5ZWU5MWVmZjEzZjcyNGQzYjgyNjMwZDMwNjQiLCJ2ZW5kb3JJZCI6ImNtc0B0ZXN0aW5nLmNoIn0sInBheW1lbnROb25jZSI6IjU0NmY4NzJiMDcyYzViNzI0ZjgyNTI4NTg4MGVlNTMyNDE2ZjZhMzciLCJ2ZW5kb3JJZCI6ImNtc0B0ZXN0aW5nLmNoIiwiaWF0IjoxNDczMDQ3OTU3LCJleHAiOjE0NzMxMzQzNTd9.LLe_7Rf0JWxO7YI-fcwh-RVTv2WjcGabPai441Ga2yA";
var product = new millipay.Product(token);
product.registerStartPaymentClick("#showImageButton");
product.onAccessAuthorization
.show("#content")
.hide("#showImageButton");
$("#jwtDecode").attr("href", "https://jwt.io/#id_token="+token);
</script>
<script id="jsbin-source-javascript" type="text/javascript"> var token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJwYXlsb2FkIjp7InRpdGxlIjoiQSBuaWNlIGltYWdlIG9mIGEgY2FyIiwicHJpY2UiOiIwLjEwIiwiY3VycmVuY3kiOiJFVVIiLCJ2YWxpZGl0eSI6IjAiLCJwcm9kdWN0VXJsIjoiaHR0cHM6Ly9tb2NrdmVuZG9yLnYzLm1pbGxpcGF5LmNoL2V4YW1wbGVzL3VuaGlkZSIsInByb2R1Y3RJbmZvIjoiIiwidmVuZG9ybmFtZSI6IkV4YW1wbGUgVmVuZG9yIiwidmVuZG9ybG9nb3VybCI6Imh0dHBzOi8vbW9ja3ZlbmRvci52My5taWxsaXBheS5jaC9pbWFnZXMvbG9nb0V4YW1wbGVWZW5kb3JTbWFsbC5wbmciLCJwYXltZW50UmVxdWVzdElkIjpudWxsLCJwcm9kdWN0SWQiOiJmY2RhZmJiMTIwOGQwYzJmNmU1M2FlZGIyY2JhY2U1N2Y5ZDc3NGMwMWE2NWM5ZTkzNGNiNzFlODg0NWEyNjhiIiwiY29udGVudElkIjoiZGRmZjY2YWUyZmQxYTU5ZjlmYTVlOGJjMTQ3ZjNhOGZjOWFmYzZhZDQ4NTcxYmNmNTc5YjI3MjFiOTUyZjA2Yzg2Njc4OWRkNjkzYWU0YmIxOTE0YjcyZDg0MmVkOTQ3OTZiYmQ5ZWU5MWVmZjEzZjcyNGQzYjgyNjMwZDMwNjQiLCJ2ZW5kb3JJZCI6ImNtc0B0ZXN0aW5nLmNoIn0sInBheW1lbnROb25jZSI6IjU0NmY4NzJiMDcyYzViNzI0ZjgyNTI4NTg4MGVlNTMyNDE2ZjZhMzciLCJ2ZW5kb3JJZCI6ImNtc0B0ZXN0aW5nLmNoIiwiaWF0IjoxNDczMDQ3OTU3LCJleHAiOjE0NzMxMzQzNTd9.LLe_7Rf0JWxO7YI-fcwh-RVTv2WjcGabPai441Ga2yA";
var product = new millipay.Product(token);
product.registerStartPaymentClick("#showImageButton");
product.onAccessAuthorization
.show("#content")
.hide("#showImageButton");
$("#jwtDecode").attr("href", "https://jwt.io/#id_token="+token);</script></body>
</html>
Raw
jsbin.ciyezofiha.js
var token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJwYXlsb2FkIjp7InRpdGxlIjoiQSBuaWNlIGltYWdlIG9mIGEgY2FyIiwicHJpY2UiOiIwLjEwIiwiY3VycmVuY3kiOiJFVVIiLCJ2YWxpZGl0eSI6IjAiLCJwcm9kdWN0VXJsIjoiaHR0cHM6Ly9tb2NrdmVuZG9yLnYzLm1pbGxpcGF5LmNoL2V4YW1wbGVzL3VuaGlkZSIsInByb2R1Y3RJbmZvIjoiIiwidmVuZG9ybmFtZSI6IkV4YW1wbGUgVmVuZG9yIiwidmVuZG9ybG9nb3VybCI6Imh0dHBzOi8vbW9ja3ZlbmRvci52My5taWxsaXBheS5jaC9pbWFnZXMvbG9nb0V4YW1wbGVWZW5kb3JTbWFsbC5wbmciLCJwYXltZW50UmVxdWVzdElkIjpudWxsLCJwcm9kdWN0SWQiOiJmY2RhZmJiMTIwOGQwYzJmNmU1M2FlZGIyY2JhY2U1N2Y5ZDc3NGMwMWE2NWM5ZTkzNGNiNzFlODg0NWEyNjhiIiwiY29udGVudElkIjoiZGRmZjY2YWUyZmQxYTU5ZjlmYTVlOGJjMTQ3ZjNhOGZjOWFmYzZhZDQ4NTcxYmNmNTc5YjI3MjFiOTUyZjA2Yzg2Njc4OWRkNjkzYWU0YmIxOTE0YjcyZDg0MmVkOTQ3OTZiYmQ5ZWU5MWVmZjEzZjcyNGQzYjgyNjMwZDMwNjQiLCJ2ZW5kb3JJZCI6ImNtc0B0ZXN0aW5nLmNoIn0sInBheW1lbnROb25jZSI6IjU0NmY4NzJiMDcyYzViNzI0ZjgyNTI4NTg4MGVlNTMyNDE2ZjZhMzciLCJ2ZW5kb3JJZCI6ImNtc0B0ZXN0aW5nLmNoIiwiaWF0IjoxNDczMDQ3OTU3LCJleHAiOjE0NzMxMzQzNTd9.LLe_7Rf0JWxO7YI-fcwh-RVTv2WjcGabPai441Ga2yA";
var product = new millipay.Product(token);
product.registerStartPaymentClick("#showImageButton");
product.onAccessAuthorization
.show("#content")
.hide("#showImageButton");
$("#jwtDecode").attr("href", "https://jwt.io/#id_token="+token);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment