Skip to content

Instantly share code, notes, and snippets.

/index.html

Created September 7, 2016 23:01
Show Gist options
  • Save anonymous/5476794ea55ed7f0b26921eb43b976f2 to your computer and use it in GitHub Desktop.
Save anonymous/5476794ea55ed7f0b26921eb43b976f2 to your computer and use it in GitHub Desktop.
Download ZIP
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/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://my.v3.millipay.ch/js/millipay.js"></script>
<title>milliPay Unhide Example</title>
</head>
<body>
<h1>milliPay Unhide Example 3</h1>
<p>This example shows how content can be unhidden after payment. Use the test account <code>[email protected]</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>
<script id="jsbin-javascript">
var token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJwYXlsb2FkIjp7InRpdGxlIjoiQSBuaWNlIGltYWdlIiwicHJpY2UiOiIwLjEwIiwiY3VycmVuY3kiOiJFVVIiLCJ2YWxpZGl0eSI6IjAiLCJwcm9kdWN0VXJsIjoiaHR0cDovL21vY2t2ZW5kb3Iuc21va2V0ZXN0Lm1pbGxpcGF5LmNoLyNiZDQ4YWQyYmI5MTAwNzU1NzEwZGMyMTAxNWUzNGYzYyIsInByb2R1Y3RJbmZvIjoiIiwidmVuZG9ybmFtZSI6IkV4YW1wbGUgVmVuZG9yIiwidmVuZG9ybG9nb3VybCI6Imh0dHBzOi8vbW9ja3ZlbmRvci5zbW9rZXRlc3QubWlsbGlwYXkuY2gvaW1hZ2VzL2xvZ29FeGFtcGxlVmVuZG9yU21hbGwucG5nIiwicGF5bWVudFJlcXVlc3RJZCI6bnVsbCwicHJvZHVjdElkIjoiYmE5ZWRmMTM2MTk4OWVkYWU5ZjkxYzEwN2ZlNjFjN2ViOWEyOWVhMTIyMzUwY2ZjN2ZhZWFkZThhYWMwMmE4ZCIsImNvbnRlbnRJZCI6Ijk4Yjg3NjQ3NTc5NjdjNmFjNDc5ZTViZmYxZmZiNDU0NzdjMjM3ZDYzNzZiMTdmNGMzZWFhMzZkZGIwMjAyYjZjNDVkY2EyOWU3YTg4OWM5MjgyMDNhOTFhMDUwZGMwMDY2MmQwZjA2YTJmYjc5YWQ3OTFiNTE3OWZjNzE5MWUwIiwidmVuZG9ySWQiOiJjbXNAdGVzdGluZy5jaCJ9LCJwYXltZW50Tm9uY2UiOiJlMDRiOTdhNWExNzUxMjcwYWMyNjM4ODgyZjRkYzFiODIxMjA0YWY2IiwidmVuZG9ySWQiOiJjbXNAdGVzdGluZy5jaCIsImlhdCI6MTQ2NDU5Mjk1NiwiZXhwIjoxNjY0Njc5MzU2fQ.kjTJrmwvK2H2vlCVP_EyddGeWpi0JoJWC1n5gNYvhEw";
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.eyJwYXlsb2FkIjp7InRpdGxlIjoiQSBuaWNlIGltYWdlIiwicHJpY2UiOiIwLjEwIiwiY3VycmVuY3kiOiJFVVIiLCJ2YWxpZGl0eSI6IjAiLCJwcm9kdWN0VXJsIjoiaHR0cDovL21vY2t2ZW5kb3Iuc21va2V0ZXN0Lm1pbGxpcGF5LmNoLyNiZDQ4YWQyYmI5MTAwNzU1NzEwZGMyMTAxNWUzNGYzYyIsInByb2R1Y3RJbmZvIjoiIiwidmVuZG9ybmFtZSI6IkV4YW1wbGUgVmVuZG9yIiwidmVuZG9ybG9nb3VybCI6Imh0dHBzOi8vbW9ja3ZlbmRvci5zbW9rZXRlc3QubWlsbGlwYXkuY2gvaW1hZ2VzL2xvZ29FeGFtcGxlVmVuZG9yU21hbGwucG5nIiwicGF5bWVudFJlcXVlc3RJZCI6bnVsbCwicHJvZHVjdElkIjoiYmE5ZWRmMTM2MTk4OWVkYWU5ZjkxYzEwN2ZlNjFjN2ViOWEyOWVhMTIyMzUwY2ZjN2ZhZWFkZThhYWMwMmE4ZCIsImNvbnRlbnRJZCI6Ijk4Yjg3NjQ3NTc5NjdjNmFjNDc5ZTViZmYxZmZiNDU0NzdjMjM3ZDYzNzZiMTdmNGMzZWFhMzZkZGIwMjAyYjZjNDVkY2EyOWU3YTg4OWM5MjgyMDNhOTFhMDUwZGMwMDY2MmQwZjA2YTJmYjc5YWQ3OTFiNTE3OWZjNzE5MWUwIiwidmVuZG9ySWQiOiJjbXNAdGVzdGluZy5jaCJ9LCJwYXltZW50Tm9uY2UiOiJlMDRiOTdhNWExNzUxMjcwYWMyNjM4ODgyZjRkYzFiODIxMjA0YWY2IiwidmVuZG9ySWQiOiJjbXNAdGVzdGluZy5jaCIsImlhdCI6MTQ2NDU5Mjk1NiwiZXhwIjoxNjY0Njc5MzU2fQ.kjTJrmwvK2H2vlCVP_EyddGeWpi0JoJWC1n5gNYvhEw";
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.gist.js
var token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJwYXlsb2FkIjp7InRpdGxlIjoiQSBuaWNlIGltYWdlIiwicHJpY2UiOiIwLjEwIiwiY3VycmVuY3kiOiJFVVIiLCJ2YWxpZGl0eSI6IjAiLCJwcm9kdWN0VXJsIjoiaHR0cDovL21vY2t2ZW5kb3Iuc21va2V0ZXN0Lm1pbGxpcGF5LmNoLyNiZDQ4YWQyYmI5MTAwNzU1NzEwZGMyMTAxNWUzNGYzYyIsInByb2R1Y3RJbmZvIjoiIiwidmVuZG9ybmFtZSI6IkV4YW1wbGUgVmVuZG9yIiwidmVuZG9ybG9nb3VybCI6Imh0dHBzOi8vbW9ja3ZlbmRvci5zbW9rZXRlc3QubWlsbGlwYXkuY2gvaW1hZ2VzL2xvZ29FeGFtcGxlVmVuZG9yU21hbGwucG5nIiwicGF5bWVudFJlcXVlc3RJZCI6bnVsbCwicHJvZHVjdElkIjoiYmE5ZWRmMTM2MTk4OWVkYWU5ZjkxYzEwN2ZlNjFjN2ViOWEyOWVhMTIyMzUwY2ZjN2ZhZWFkZThhYWMwMmE4ZCIsImNvbnRlbnRJZCI6Ijk4Yjg3NjQ3NTc5NjdjNmFjNDc5ZTViZmYxZmZiNDU0NzdjMjM3ZDYzNzZiMTdmNGMzZWFhMzZkZGIwMjAyYjZjNDVkY2EyOWU3YTg4OWM5MjgyMDNhOTFhMDUwZGMwMDY2MmQwZjA2YTJmYjc5YWQ3OTFiNTE3OWZjNzE5MWUwIiwidmVuZG9ySWQiOiJjbXNAdGVzdGluZy5jaCJ9LCJwYXltZW50Tm9uY2UiOiJlMDRiOTdhNWExNzUxMjcwYWMyNjM4ODgyZjRkYzFiODIxMjA0YWY2IiwidmVuZG9ySWQiOiJjbXNAdGVzdGluZy5jaCIsImlhdCI6MTQ2NDU5Mjk1NiwiZXhwIjoxNjY0Njc5MzU2fQ.kjTJrmwvK2H2vlCVP_EyddGeWpi0JoJWC1n5gNYvhEw";
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