-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathwidget_example.html
More file actions
186 lines (172 loc) · 8.52 KB
/
widget_example.html
File metadata and controls
186 lines (172 loc) · 8.52 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!DOCTYPE html>
<html>
<head>
<title>Mobino Widget Example</title>
<meta charset="utf-8">
<meta name="description" content="Mobino javascript widget example">
<meta name="keywords" content="Mobino, widget, mobile, payment">
<link rel="stylesheet" type="text/css" href="https://app.mobino.com/merchants/css/widget_example_style.css" media="all">
<link href="https://fonts.googleapis.com/css?family=Imprima|Roboto" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://app.mobino.com/merchants/api/v1/mobino.js"></script>
<script src="https://app.mobino.com/merchants/javascripts/sha1.js"></script>
</head>
<body>
<div id="container">
<div id="nav_bar" class="nav_bar wrapper">
<a href="#">Home</a><span class="nav_arrow">></span><span class="active">Checkout</span>
</div>
<section class="wrapper">
<article>
<header><span class="h3">Please review your order</span></header>
<div class="content">
<table class="shop_table cart bordered" cellspacing="0">
<thead>
<tr>
<th class="product_info">Product</th>
<th class="product_quantity">Quantity</th>
<th class="product_price">Unit Price</th>
<th class="product_subtotal">Total Price</th>
</tr>
</thead>
<tbody>
<tr class="cart_item">
<td class="product_info">
<div class="product_thumbnail">
<img width="200" height="200" src="images/product_1.png">
</div>
<div class="product_name">
<a href="#"><span class="h4">A Swiss Chocolate</span></a>
<div class="product_description">Humm yummy!</div>
</div>
</td>
<td class="product_quantity">
<input type="text" name="qty" readonly="true" value="2" size="4" title="Qty" class="qty text">
<input type="submit" value="Update" class="qty-update dark">
</td>
<td class="product_price"><span>0.20 CHF</span></td>
<td class="product_subtotal"><span>0.40 CHF</span></td>
</tr>
<tr class="cart_item">
<td class="product_info">
<div class="product_thumbnail">
<img width="200" height="200" src="images/product_2.png">
</div>
<div class="product_name">
<a href="#"><span class="h4">Some Random Wine</span></a>
<div class="product_description">Vin à la table</div>
</div>
</td>
<td class="product_quantity">
<input type="text" name="qty" readonly="true" value="1" size="4" title="Qty" class="qty text">
<input type="submit" value="Update" class="qty-update dark">
</td>
<td class="product_price"><span>0.50 CHF</span></td>
<td class="product_subtotal"><span>0.50 CHF</span></td>
</tr>
</tbody>
</table>
<div class="payment_methods">
<header><h3>Old-fashioned Payment Methods</h3></header>
<ul class="payment_methods">
<li>
<div class="radio"><span><input type="radio" name="amex" class="old"></span></div>
<img src="images/amex.png">
</li>
<li>
<div class="radio"><span><input type="radio" name="visa" class="old"></span></div>
<img src="images/visa.png">
</li>
<li>
<div class="radio"><span><input type="radio" name="paypal" class="old"></span></div>
<img src="images/paypal.png">
</li>
</ul>
<header><h3>Mobile Payment Methods</h3></header>
<ul class="payment_methods">
<li>
<div class="radio"><span><input type="radio" name="mobino"></span></div>
<img src="images/mobino_button.png" width="100">
</li>
</ul>
</div>
<div class="cart_totals">0.90 CHF</div>
<a href="#" class="button dark shadow float-r" id="checkout">Confirm Order</a>
</div>
</article>
<article class="payment_execution">
<div class="content">
<header><h4>Please click the button below to start Mobino payment process</h4></header>
<div id="mobino_payment"></div>
<p>(Don't worry, this is just a demo test. Money will be sent back to you :)</p>
<script>
/*
* function to generate a random string
* DO NOT use this for real production, nonce and signature should be generated at
* the server side.
*/
function guid() {
var S4 = function() {
return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
};
return (S4()+'-'+S4()+S4());
}
$('.qty-update').click(function(){
alert('It\'s just a demo, nothing will happen :)');
return false;
});
$('input.old').click(function() {
alert('Come on!');
this.checked = false;
});
$('#checkout').click(function(){
if($('input[name=mobino]:radio').is(':checked')) {
$('.payment_execution').slideDown();
$('html, body').animate({
scrollTop: $("#mobino_payment").offset().top
}, 2000);
} else {
alert('Please select a payment method.');
}
return false;
});
/******************************************************************
*
* Example of Mobino widget BEGIN
*
*/
/*
* for testing purpose, we just use javascript to calculate signature
* however, in real production, this signature should be calculated
* at the server side (NEVER show the secret in widget).
*/
var secret = '7gXEUWLY/1FqPS87WVfIDEoE4++QWDAlqsjgeYXEQs0=';
var nonce = guid();
/*
* create a payment button on the div whose id is 'mobino_payment'
*/
Mobino.createButton('mobino_payment', {
lang: 'de',
country: 'CH',
api_key: '12a873b4619c60f6e3fc5c7316b6dc65',
transaction: {
amount: 0.90,
currency: 'CHF',
reference_number: guid(), // for sales tracking purpose
nonce: nonce, // please make sure every nonce is unique
signature: Sha1.hash(nonce + secret)
}
});
/*
*
* Example of Mobino widget END
*
******************************************************************/
</script>
</div>
</article>
<article><br><br><br></article>
</section>
</div>
</body>
</html>