-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
130 lines (127 loc) · 5.02 KB
/
index.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
<html>
<head>
<title>Sample Checkout Form</title>
<style>
body {
margin: 0;
padding: 0;
}
#main_container {
text-align: center;
}
#center_container {
display: inline-block;
}
#content_container {
text-align: left;
width: 100%;
}
#shipping_address, #widget_container, #widget_result {
width: 400px;
height: 500px;
display: block;
float: left;
}
#widget_container, #widget_result {
width: 360px;
margin: 60px 20px 60px 20px;
}
.inputBlock input {
width: 300px;
}
#widget_result {
margin: 250px 20px 0 20px;
}
</style>
<script src="https://widgets.dpd.nl/widgets/Scripts/checkoutWidget/init.js"></script>
<script>
/* Define the callback function, what to do with the data the widget returns. */
function callback(data){
// For this example we just print a nice little message in an extra container, you can use this to write to your database etc...
var divResult = document.getElementById("widget_result");
// data is a json object zo we can directly access the product variable
switch(data.product){
case "DPDHome":
divResult.innerHTML = "You have chosen for a Home Delivery on address: <br><strong>" + data.consumerInfo.address.street + " " + data.consumerInfo.address.houseNumber + ", " + data.consumerInfo.address.postalCode + " " + data.consumerInfo.address.city + "</strong>";
break;
case "DPDParcelshop":
divResult.innerHTML = "You have chosen for a ParcelShop Delivery in shop: <strong>" + data.parcelShop.name + "</strong><br> with address: <br><strong>" + data.parcelShop.address.street + " " + data.parcelShop.address.houseNumber + ", " + data.parcelShop.address.postalCode + " " + data.parcelShop.address.city + "</strong>";
break;
default:
}
}
function initWidget(){
// Create the config array.
var config = {
"order": {
"orderNumber": "123456", // Your order number - Get this out of your system
"orderPrice": "12.50", // Order price (used for table rate price calculation) - Get this out of your system
"orderWeight": "2.5" // Order weight (used for price calculation) - Get this out of your system
},
"integrationType": "inline",// Inline or overlay
"locale": "nl_BE", // Language _ Country
"apiKey": "", // YOUR API KEY
"divId": 'dpd_widget_container', // The container ID
"consumerInfo": { // Information out of the form
"name": document.getElementById("txtCneeFirstName").value + " " + document.getElementById("txtCneeLastName").value,
"email": document.getElementById("txtCneeEmail").value,
"phoneNumber": document.getElementById("txtCneePhone").value,
"address": {
"street": document.getElementById("txtCneeStreet").value,
"houseNumber": document.getElementById("txtCneeHouseNo").value,
"houseNumberAddition": null,
"postalCode": document.getElementById("txtCneeCode").value,
"city": document.getElementById("txtCneeCity").value,
"countryISO": "BE" // You can add an extra field to the form for country code for other countries. Or change it here just for testing purposes.
}
}
};
// Call the startCheckoutWidget function with config array and callback function name.
startCheckoutWidget(config, callback);
}
</script>
</head>
<body>
<div id="main_container">
<div id="center_container">
<div id="header_container">
<img src="images/header.png" />
</div>
<div id="content_container">
<div id="shipping_address">
<h1>Billing Address</h1>
<span class="inputBlock">
<label>First Name</label><br><input type="text" id="txtCneeFirstName"><br>
</span>
<span class="inputBlock">
<label>Last Name</label><br><input type="text" id="txtCneeLastName"><br>
</span>
<span class="inputBlock">
<label>Email Address</label><br><input type="text" id="txtCneeEmail"><br>
</span>
<span class="inputBlock address">
<label>Address</label><br><input maxlength="35" type="text" id="txtCneeStreet"><br>
</span>
<span class="inputBlock">
<label>House Number</label><br><input maxlength="8" type="text" id="txtCneeHouseNo"><br>
</span>
<span class="inputBlock">
<label>City</label><br><input type="text" id="txtCneeCity"><br>
</span>
<span class="inputBlock">
<label>Zip Code</label><br><input type="text" id="txtCneeCode"><br>
</span>
<span class="inputBlock">
<label>Telephone</label><br><input type="text" id="txtCneePhone"><br>
</span>
<a href="#" onclick="javascript:initWidget(); return false;">Click here to launch the widget</a>
</div>
<div id="widget_container">
<div id="dpd_widget_container"></div>
</div>
<div id="widget_result"></div>
</div>
</div>
</div>
</body>
</html>