forked from adrianba/paymentrequest-demo
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathdemo-shipping-calc.html
130 lines (126 loc) · 4.27 KB
/
demo-shipping-calc.html
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
<!DOCTYPE html>
<html>
<head>
<title>Request shipping address and calculate shipping options</title>
<link rel="stylesheet" href="//ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/styles/vs.min.css">
<style>
#script-display { padding-left: 40px; position: relative; }
#script-display .line { position: absolute; left: 0; width: 30px; text-align: right; display: inline-block; padding-right:3px; border-right: 1px solid grey; }
</style>
<script src="lib/paymentrequest.js"></script>
<script>
function go1() {
window.__walletUrl = "lib/wallet.html";
go();
}
function go2() {
window.__walletUrl = "lib/wallet2.html";
go();
}
</script>
<script language="javascript" id="payment-script">
function go() {
var request = new PaymentRequest(
[{
supportedMethods:['urn:payment:visa','urn:payment:mc','urn:payment:amex']
}],
{
total: {
label: "Total excluding shipping",
amount: { currencyCode: "USD", value: "60.00" }, // US$60.00
},
displayItems: [
{
id: "basket", label: "Sub-total",
amount: { currencyCode: "USD", value: "55.00" }, // US$55.00
},
{
id: "tax", label: "Sales Tax",
amount: { currencyCode: "USD", value: "5.00" }, // US$5.00
}
]
},
{ requestShipping:true }
);
request.onshippingaddresschange = function(e) {
// here request.shippingaddress is the address
e.updateWith(calculateShippingCost(request));
};
request.onshippingoptionchange = function(e) {
// here request.shippingOption is the id of the option
var express = request.shippingOption=="express";
e.updateWith(new Promise(function(resolve,reject) {
resolve({
total: {
label: "Total due",
amount: { currencyCode: "USD", value: express ? "85.00" : "68.00" } // US$60.00 + SHIPPING
},
displayItems: [
{
id: "basket", label: "Sub-total",
amount: { currencyCode: "USD", value: "55.00" } // US$55.00
},
{
id: "tax", label: "Sales Tax",
amount: { currencyCode: "USD", value: "5.00" } // US$5.00
},
{
id: "shipping", label: "Shipping - " + express ? "Express (2 day)" : "Ground (5-7 day)",
amount: { currencyCode: "USD", value: express ? "25.00" : "8.00" } // US$5.00
}
]
});
}));
};
request.show()
.then(function(response) {
// process transaction response here
return response.complete(true);
})
.then(function() {
alert("Buy!");
})
.catch(function(e) {
alert(e.name);
});
}
function calculateShippingCost(r) {
return new Promise(function(resolve,reject) {
setTimeout(function() { // use setTimeOut to emulate delayed results
resolve({
shippingOptions: [
{ id: "express", label: "Express 2-day shipping", amount: { currencyCode: "USD", value: "25.00" } },
{ id: "ground", label: "Ground 5-7 day shipping", amount: { currencyCode: "USD", value: "8.00" } }
]
});
},2000);
})
}
</script>
</head>
<body style="margin:1em;">
<a href="index.html">Index</a>
<h2>Request shipping address and calculate shipping options</h2>
<button class="btn btn-success" onclick="go1()">Browser UX</button>
<button class="btn btn-success" onclick="go2()">Payment App UX</button>
<div>
<h3>Script</h3>
<pre><code id="script-display"></code></pre>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/highlight.min.js"></script>
<script>
document.getElementById("script-display").textContent = document.getElementById("payment-script").text;
hljs.initHighlighting();
function number(e) {
var l = 0;
var html = e.innerHTML.replace(/\n/g,function() {
l++;
return "\n" + '<a class="line" name="L' + l + '" href="#L' + l + '">' + l + '</a>';
});
e.innerHTML = html;
}
number(document.getElementById("script-display"));
</script>
</body>
</html>