-
Notifications
You must be signed in to change notification settings - Fork 28
/
Copy pathpaymill-payment-skeuocard.html
131 lines (123 loc) · 5.45 KB
/
paymill-payment-skeuocard.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
131
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
<head>
<!-- ... your CSS includes ... -->
<link rel="stylesheet" href="styles/skeuocard.reset.css" />
<link rel="stylesheet" href="styles/skeuocard.css" />
<link rel="stylesheet" href="styles/demo.css">
<script src="javascript/vendor/cssua.min.js"></script>
<!-- ... -->
<script type="text/javascript">
var PAYMILL_PUBLIC_KEY = 'YOUR_PAYMILL_PUBLIC_KEY';
</script>
<script type="text/javascript" src="https://bridge.paymill.com/"></script>
<style>
#payment_errors{
color: #FF0000;
display: block;
font-size: 15px;
font-weight: bold;
margin-bottom: 8px;
}
#paymill-submit-button {
font-size: 18px;
font-weight: bold;
background: #00cc33;
box-shadow: inset 0 -3px 3px #009926;
margin-top: 30px;
border: none;
border-radius: 4px;
color: #fff;
cursor: pointer;
width: 220px;
height: 42px;
}
#paymill-submit-button:hover, #paymill-submit-button:focus {
box-shadow: none;
background: #00cc33;
}
#paymill-submit-button:active {
background: #00b22d;
box-shadow: inset 2px #009926;
}
</style>
</head>
<body>
<!-- START FORM -->
<form id="payment-form" action="payment.php" method="POST">
<div id="payment_errors"> </div>
<div class="credit-card-input no-js" id="skeuocard">
<p class="no-support-warning">
Either you have Javascript disabled, or you're using an unsupported browser, amigo! That's why you're seeing this old-school credit card input form instead of a fancy new Skeuocard. On the other hand, at least you know it gracefully degrades...
</p>
<label for="cc_type">Card Type</label>
<select id="cc_type">
<option value="">...</option>
<option value="visa">Visa</option>
<option value="discover">Discover</option>
<option value="mastercard">MasterCard</option>
<option value="maestro">Maestro</option>
<option value="jcb">JCB</option>
<option value="unionpay">China UnionPay</option>
<option value="amex">American Express</option>
<option value="dinersclubintl">Diners Club</option>
</select>
<label for="cc_number">Card Number</label>
<input type="text" id="cc_number" placeholder="XXXX XXXX XXXX XXXX" maxlength="19" size="19">
<label for="cc_exp_month">Expiration Month</label>
<input type="text" id="cc_exp_month" placeholder="00">
<label for="cc_exp_year">Expiration Year</label>
<input type="text" id="cc_exp_year" placeholder="00">
<label for="cc_name">Cardholder's Name</label>
<input type="text" id="cc_name" placeholder="John Doe">
<label for="cc_cvc">Card Validation Code</label>
<input type="text" id="cc_cvc" placeholder="123" maxlength="3" size="3">
</div>
<div>
<button id="paymill-submit-button" type="button">Abschicken</button>
</div>
</form>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="javascripts/skeuocard.js"></script>
<script>
card = new Skeuocard($("#skeuocard"), {
typeInputSelector: '[id="cc_type"]',
numberInputSelector: '[id="cc_number"]',
expMonthInputSelector: '[id="cc_exp_month"]',
expYearInputSelector: '[id="cc_exp_year"]',
nameInputSelector: '[id="cc_name"]',
cvcInputSelector: '[id="cc_cvc"]'
});
function PaymillResponseHandler(error, result) {
if (error) {
$("#payment_errors").text(error.apierror);
$("#payment_errors").css("display");
} else {
$("#payment_errors").css("display", "none");
$("#payment_errors").text("");
var form = $("#payment-form");
// Token
var token = result.token;
form.append("<input type='hidden' name='paymillToken' value='" + token + "'/>");
form.get(0).submit();
}
}
$("#paymill-submit-button").click(function() {
var params = {
amount_int: 100, // E.g. "15" for 0.15 Eur
currency: 'EUR', // ISO 4217 e.g. "EUR"
number: $('#cc_number').val(),
exp_month: $('#cc_exp_month').val(),
exp_year: $('#cc_exp_year').val(),
cardholder: $('#cc_name').val(),
cvc: $('#cc_cvc').val()
};
paymill.createToken(params, PaymillResponseHandler);
});
</script>
</body>
</html>