-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
107 lines (93 loc) · 5.06 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
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>subscriptionJS Hello World - billwerk</title>
<script type="text/javascript" src="https://selfservice.sandbox.billwerk.com/subscription.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
//Use these setting to test with our preconfigured Demo Account.
//Specifiy your own values, if testing with your own Sandbox Account.
var publicApiKey = "56af727714a9ff0a38f23dba";
var planVariantId = "56af737e14a9ff0a38f23ddd";
var componentId = "56af733414a9ff0a38f23dd7"
var paymentMethod = "CreditCard:Paymill";
var signupService = new subscriptionJS.Signup();
var paymentService = new subscriptionJS.Payment({ publicApiKey: publicApiKey },
function () { console.log("subscriptionJS payment is ready"); },
function () { alert("initialization failed!"); });
$(function () {
$("#form").bind("submit", function (ev) {
// enforce HTML5 validation:
ev.target.checkValidity();
// Create subscriptionJS DTOs from user input
var cart = {
"planVariantId": planVariantId ,
"componentSubscriptions": [{ "componentId": componentId , "quantity": 3}]
};
var customer = {
firstName: $("#firstName").val(),
lastName: $("#lastName").val(),
emailAddress: $("#email").val()
};
var paymentData = {
"bearer": paymentMethod,
"cardNumber": $("#cardNumber").val(),
"expiryMonth": $("#expMonth").val(),
"expiryYear": $("#expYear").val(),
"cardHolder": $("#cardHolder").val(),
"cvc": $("#cvc").val()
};
signupService.subscribe(paymentService, cart, customer, paymentData,
function (subscribeResult) {
console.log(subscribeResult);
alert("success! deux stuff now.");
},
function (errorData) {
console.log(errorData);
alert("something went wrong. See console for details");
});
// make sure the form is not submitted!
ev.preventDefault();
return false;
});
});
</script>
<style type="text/css">
body { font-family: Sans-Serif; font-size: 14px; }
input, select, button { padding: 4px; }
</style>
</head>
<body>
<h1>Hello subscriptionJS!</h1>
<form id="form">
<div>Name</div>
<input type="text" id="firstName" required placeholder="First Name"/><br />
<input type="text" id="lastName" required placeholder="Last Name"/><br />
<div>Email</div>
<input type="email" id="email" required placeholder="E-mail"/><br />
<div>Card Holder</div>
<input type="text" id="cardHolder" value="" required placeholder="Card Holder's Name"/><br />
<div>Credit Card Number</div>
<input type="text" id="cardNumber" value="5169147129584558" required placeholder="Card Number" pattern="[0-9]{10,16}" maxlength="16" /><br />
<div>Expiry</div>
<select required id="expMonth">
<option disabled value="">MM</option>
<option value="01">01</option><option value="02">02</option><option value="03">03</option>
<option value="04">04</option><option value="05">05</option><option value="06">06</option>
<option value="07">07</option><option value="08">08</option><option value="09">09</option>
<option value="10">10</option><option value="11">11</option><option selected value="12">12</option>
</select>
/
<select required id="expYear">
<option disabled value="">YY</option>
<option value="2014">14</option><option value="2015">15</option><option value="2016">16</option>
<option value="2017">17</option><option value="2018">18</option><option value="2019">19</option>
<option value="2020">20</option><option selected value="2021">21</option><option value="2022">22</option>
</select><br />
<div>CVC</div>
<input type="text" id="cvc" value="100" required maxlength="3" pattern="[0-9]{3}" placeholder="CVV / CVC"/><br />
<button id="signup" type="submit">Signup</button>
</form>
</body>
</html>