-
Notifications
You must be signed in to change notification settings - Fork 1
/
adyen.encrypt.simple.html
122 lines (97 loc) · 6.21 KB
/
adyen.encrypt.simple.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example Payment Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/cse-example-form.css" type="text/css" />
<!-- <link rel="stylesheet" href="css/adyen.cardtype.css" type="text/css" /> -->
</head>
<body>
<form method="POST" action="#handler" id="adyen-encrypted-form">
<fieldset>
<legend>Card Details</legend>
<div class="field">
<label for="adyen-encrypted-form-number">
<span>Card Number</span>
<input type="text" id="adyen-encrypted-form-number" value="5555444433331111" size="20" autocomplete="off" data-encrypted-name="number" />
</label>
<span id="cardType"></span>
</div>
<div class="field">
<label for="adyen-encrypted-form-cvc">
<span>CVC</span>
<input type="text" id="adyen-encrypted-form-cvc" value="737" size="4" maxlength="4" autocomplete="off" data-encrypted-name="cvc" />
</label>
</div>
<div class="field">
<label for="adyen-encrypted-form-holder-name">
<span>Card Holder Name</span>
<input type="text" id="adyen-encrypted-form-holder-name" value="John Doe" size="20" autocomplete="off" data-encrypted-name="holderName" />
</label>
</div>
<div class="field">
<label for="adyen-encrypted-form-expiry-month">
<span>Expiration (MM/YYYY)</span>
<input type="text" value="06" id="adyen-encrypted-form-expiry-month" maxlength="2" size="2" autocomplete="off" data-encrypted-name="expiryMonth" /> /
</label>
<!-- Do not use two input elements inside a single label. This will cause focus issues on the seoncd and latter fields using the mouse in various browsers -->
<input type="text" value="2016" id="adyen-encrypted-form-expiry-year" maxlength="4" size="4" autocomplete="off" data-encrypted-name="expiryYear" />
</div>
<input type="hidden" id="adyen-encrypted-form-expiry-generationtime" value="generate-this-server-side" data-encrypted-name="generationtime" />
<input type="submit" value="Submit" />
</fieldset>
</form>
<!-- How to use the Adyen encryption client-side JS library -->
<!-- N.B. Make sure the library is *NOT* loaded in the "head" of the HTML document -->
<script type="text/javascript" src="js/adyen.encrypt.min.js?0_1_22"></script>
<!-- <script type="text/javascript" src="js/addOns/adyen.cardtype.min.js?0_1_22"></script>-->
<script type="text/javascript">
// generate time client side for testing only... Don't deploy on a
// real integration!!!
document.getElementById('adyen-encrypted-form-expiry-generationtime').value = new Date().toISOString();
// the form element to encrypt
var form = document.getElementById('adyen-encrypted-form');
// the public key
var key = "10001|80C7821C961865FB4AD23F172E220F819A5CC7B9956BC3458E2788"
+ "F9D725B07536E297B89243081916AAF29E26B7624453FC84CB10FC7DF386"
+ "31B3FA0C2C01765D884B0DA90145FCE217335BCDCE4771E30E6E5630E797"
+ "EE289D3A712F93C676994D2746CBCD0BEDD6D29618AF45FA6230C1D41FE1"
+ "DB0193B8FA6613F1BD145EA339DAC449603096A40DC4BF8FACD84A5D2CA5"
+ "ECFC59B90B928F31715A7034E7B674E221F1EB1D696CC8B734DF7DE2E309"
+ "E6E8CF94156686558522629E8AF59620CBDE58327E9D84F29965E4CD0FAF"
+ "A38C632B244287EA1F7F70DAA445D81C216D3286B09205F6650262CAB415"
+ "5F024B3294A933F4DC514DE0B5686F6C2A6A2D";
var options = {};
// Enable basic field validation (default is true)
// The submit button will be disabled when fields
// proof to be invalid. The form submission will be
// prevented as well.
// options.enableValidations = true;
// Always have the submit button enabled (default is false)
// Leave the submit button enabled, even in case
// of validation errors.
// options.submitButtonAlwaysEnabled = false;
// Ignore non-numeric characters in the card number field (default
// is true)
// The payment handling ignores non-numeric characters for the card
// field.
// By default non-numeric characters will also be ignored while
// validating
// the card number field. This can be disabled for UX reasons.
// options.numberIgnoreNonNumeric = true;
// Ignore CVC validations for certain bins. Supply a comma separated
// list.
// options.cvcIgnoreBins = '6703'; // Ignore CVC for BCMC
// Use 4digit cvc for certain bins. Supply a comma separated list.
// options.fourDigitCvcForBins = '34,37'; // Set 4 digit CVC for Amex
// Use a different attribute to identify adyen fields
// Note that the attributes needs to start with data-.
// options.fieldNameAttribute = 'data-encrypted-name';
// Set a element that should display the card type
options.cardTypeElement = document.getElementById('cardType');
// the form will be encrypted before it is submitted
var encryptedForm = adyen.encrypt.createEncryptedForm( form, key, options);
// encryptedForm.addCardTypeDetection(options.cardTypeElement)
</script>
</body>
</html>