A-23 Example Library Code

The follow section provides samples of how to integrate with the Gateway using our integration libraries as documented in section A-20.1.

A-23.1 Gateway Integration Library

The following example PHP code shows how to send a SALE transaction using the Gateway library:

1. <?PHP 
2. require(‘gateway.php’); 
4. use \P3\SDK\Gateway; 
6. // Signature key entered on MMS. The demo account is fixed to this value, 
7. Gateway::$merchantSecret = ‘Circle4Take40Idea’; 
9. // Gateway URL 
10. Gateway::$hostedUrl = ‘https://gateway.swipen.com/hosted/’; 
12. if (!isset($_POST[‘responseCode’])) { 
13. // Send request to gateway 
14. $req = array( 
15. ‘merchantID’ => 100001, 
16. ‘action’ => ‘SALE’, 
17. ‘type’ => 1, 
18. ‘currencyCode’ => 826, 
19. ‘countryCode’ => 826, 
20. ‘amount’ => 1001, 
21. ‘orderRef’ => ‘Test purchase’, 
22. ‘redirectURL’ => ($_SERVER[‘HTTPS’] == ‘on’ ? ‘https’ : ‘http’) . ‘://’ . $_SERVER[‘HTTP_HOST’] . $_SERVER[‘REQUEST_URI’], 
23. ); 
25. try { 
26. echo Gateway::hostedRequest($req); 
27. } catch (\Exception $e) { 
28. // You should exit gracefully 
29. die(‘Sorry, the request could not be sent: ‘ . $e); 
30. } 
32. } else { 
33. // Received response from gateway 
34. try { 
35. Gateway::verifyResponse($_POST); 
36. } catch(\Exception $e) { 
37. // You should exit gracefully 
38. die(‘Sorry, the request could not be sent: ‘ . $e); 
39. } 
41. // Check the response code 
42. if ($_POST[‘responseCode’] === 0) { 
43. echo “<p>Thank you for your payment.</p>”; 
44. } else { 
45. echo “<p>Failed to take payment: ” . htmlentities($_POST[‘responseMessage’]) . “</p>”; 
46. } 
47. } 
49. ?> 

A-23.1.2 Direct Sale Transaction (with 3-D Secure)

The following example PHP code shows how to send a SALE transaction with support for 3-D Secure using the Gateway library:

1. 1.<?PHP
   2.
   3.require(‘gateway.php’);
   4.
   5.use \P3\SDK\Gateway;
   6.
   7.// Signature key entered on MMS. The demo account is fixed to this value,
   8.Gateway::$merchantSecret = ‘Circle4Take40Idea’;
   9.
   10. // Gateway URL
   11. Gateway::$directUrl = ‘https://gateway.example.com/direct/’;
   12.
   13. // Setup PHP session as use it to store data between 3DS steps
   14. if (isset($_GET[‘sid’])) {
   15. session_id($_GET[‘sid’]);
   16. }
   17.
   18. session_start();
   19.
   20. // Compose current page URL (removing any sid and acs parameters)
   21. $pageUrl = ((isset($_SERVER[‘HTTPS’]) && $_SERVER[‘HTTPS’] == ‘on’) ? ‘https://’ : ‘http://’)
   22. . $_SERVER[‘SERVER_NAME’] . ($_SERVER[‘SERVER_PORT’] != ’80’ ? ‘:’ . $_SERVER[‘SERVER_PORT’] : ”)
   23. . preg_replace(‘/(sid=[^&]+&?)|(acs=1&?)/’, ”, $_SERVER[‘REQUEST_URI’]);
   24.
   25. // Add back the correct sid parameter (used as session cookie may not be passed when the page is redirected fro
   m an IFRAME)
   26. $pageUrl .= (strpos($pageUrl, ‘?’) === false ? ‘?’ : ‘&’) . ‘sid=’ . urlencode(session_id());
   27.
   28.
   29. // If ACS response into the IFRAME then redirect back to parent window
   30. if (!empty($_GET[‘acs’])) {
   31. echo silentPost($pageUrl, array(‘threeDSResponse’ => $_POST), ‘_parent’);
   32. exit();
   33. }
   34.
   35. if (!isset($_POST[‘threeDSResponse’])) {
   36. // Initial request
   37.
   38. // Gather browser info – can be done at any time prior to the checkout
   39. if (!isset($_POST[‘browserInfo’])) {
   40. echo Gateway::collectBrowserInfo();
   41. exit();
   42. }
   43.
   44. // Direct Request
   45. $req = array(
   46. ‘merchantID’ => 100001,
   47. ‘action’ => ‘SALE’,
   48. ‘type’ => 1,
   49. ‘currencyCode’ => 826,
   50. ‘countryCode’ => 826,
   51. ‘amount’ => 1001,
   52. ‘cardNumber’ => ‘4012001037141112’,
   53. ‘cardExpiryMonth’ => 12,
   54. ‘cardExpiryYear’ => 15,
   55. ‘cardCVV’ => ‘083’,
   56. ‘customerName’ => ‘Test Customer’,
   57. ‘customerEmail’ => ‘test@testcustomer.com’,
   58. ‘customerAddress’ => ’16 Test Street’,
   59. ‘customerPostCode’ => ‘TE15 5ST’,
   60. ‘orderRef’ => ‘Test purchase’,
   61.
   62.
   63. // The following fields are mandatory for 3DS v2
   64. ‘remoteAddress’ => $_SERVER[‘REMOTE_ADDR’],
   65. ‘threeDSRedirectURL’ => $pageUrl . ‘&acs=1’,
   66.
   67. // The following field allows options to be passed for 3DS v2
   68. // and the values here are for demonstration purposes only
   69. ‘threeDSOptions’ => array(
   70. ‘paymentAccountAge’ => ‘20190601’,
   71. ‘paymentAccountAgeIndicator’ => ’05’,
   72. ),
   73. );
   74.
   75. // Add the browser info as it is mandatory for 3DS v2
   76. $req += $_POST[‘browserInfo’];
   77.
   78. } else {
   79. // 3DS continuation request
   80. $req = array(
   81. // The following field are only required for tbe benefit of the SDK
   82. ‘merchantID’ => 100001,
   83. ‘action’ => ‘SALE’,
   84.
   85. // The following field must be passed to continue the 3DS request
   86. ‘threeDSRef’ => $_SESSION[‘threeDSRef’],
   87. ‘threeDSResponse’ => $_POST[‘threeDSResponse’],
   88. );
   89.
   90. }
   91.
   92.
   93. try {
   94. $res = Gateway::directRequest($req);
   95. } catch (\Exception $e) {
   96. // You should exit gracefully
   97. die(‘Sorry, the request could not be sent: ‘ . $e);
   98. }
   99.
   100.// Check the response code
   101.if ($res[‘responseCode’] === Gateway::RC_3DS_AUTHENTICATION_REQUIRED) {
   102. // Send request to the ACS server displaying response in an IFRAME
   103.
   104. // Render an IFRAME to show the ACS challenge (hidden for fingerprint method)
   105. $style = (isset($res[‘threeDSRequest’][‘threeDSMethodData’]) ? ‘display: none;’ : ”);
   106. echo “<iframe name=\”threeds_acs\” style=\”height:420px; width:420px; {$style}\”></iframe>\n”;
   107.
   108. // Silently POST the 3DS request to the ACS in the IFRAME
   109. echo silentPost($res[‘threeDSURL’], $res[‘threeDSRequest’], ‘threeds_acs’);
   110.
   111. // Remember the threeDSRef as need it when the ACS responds
   112. $_SESSION[‘threeDSRef’] = $res[‘threeDSRef’];
   113.
   114.} else if ($res[‘responseCode’] === Gateway::RC_SUCCESS) {
   115. echo “<p>Thank you for your payment.</p>”;
   116.} else {
   117. echo “<p>Failed to take payment: ” . htmlentities($res[‘responseMessage’]) . “</p>”;
   118.}
   119.
   120.
   121.
   122.// Render HTML to silently POST data to URL in target brower window
   123.function silentPost($url = ‘?’, array $post = null, $target = ‘_self’) {
   124.
   125. $url = htmlentities($url);
   126. $target = htmlentities($target);
   127. $fields = ”;
   128.
   129. if ($post) {
   130. foreach ($post as $name => $value) {
   131. $fields .= Gateway::fieldToHtml($name, $value);
   132. }
   133. }
   134.
   135. $ret = “
   136. <form id=\”silentPost\” action=\”{$url}\” method=\”post\” target=\”{$target}\”>
   137. {$fields}
   138. <noscript><input type=\”submit\” value=\”Continue\”></noscript
   139. </form>
   140. <script>
   141. window.setTimeout(‘document.forms.silentPost.submit()’, 0);
   142. </script>
   143. “;
   144.
   145. return $ret;
   146.}
   147.
   148. ?>

A-23.2 Hosted Payment Page Library

A-23.2.1 Hosted Sale Transaction

The following example code shows how to prepare a payment form to open the Hosted Payment Page in a lightbox style overlay on your website using the Hosted Payment Page library:

1. <html> 
2. <head> 
3. <!– Load the Hosted Payment Page library –> 
4. <script src=“https://gateway.swipen.com/sdk/web/v1/js/hostedforms.min.js”></script> 
5. </head> 
6. <body> 
7. <!– 
8. Hosted Payment <form> as created by the Gateway Integration Library hostedRequest() method 
9. with addition of ‘data-hostedforms-modal’ attribute to signify a modal form is required. 
10. –> 
11. <form name=“payment-form” method=“post” action=“https://gateway.swipen.com/hosted/” data-hostedforms-modal> 
12. <input type=“hidden” name=“merchantID” value=“100001” /> 
13. <input type=“hidden” name=“action” value=“SALE” /> 
14. <input type=“hidden” name=“type” value=“1” /> 
15. <input type=“hidden” name=“currencyCode” value=“826” /> 
16. <input type=“hidden” name=“countryCode” value=“826” /> 
17. <input type=“hidden” name=“amount” value=“1001” /> 
18. <input type=“hidden” name=“orderRef” value=“Test purchase” /> 
19. <input type=“hidden” name=“redirectURL” value=“https://www.merchant.com/payment/” /> 
20. <input type=“hidden” name=“signature” value=“07599ef4cdb2e26cb2bf34a9c65190a7ce82494bc1df144c3bb0d20ee2655d8278dc663b2b0421ef12b8f081e821151bb4c644277c5d65b5523a96539b53b5aa” /> 
21. <input type=“submit” value=“Pay Now”> 
22. </form> 
23. <script> 
24. // Create a new Hosted Form object which will cause the above <form> to load into a modal 
25. // overlay over this page. 
26. var form = new window.hostedForms.classes.Form(document.forms[0]); 
27. </script> 
28. </body> 
29. </html> 

A-23.2.2 Hosted Sale Transaction (jQuery)

The following example code shows how to prepare a payment form to open the Hosted Payment Page in a lightbox style overlay on your website using the Hosted Payment Page and jQuery libraries: 

1.<html> 

2. <head> 
3. <!– Load the jQuery library –> 
4. <script src=“https://code.jquery.com/jquery-3.4.1.min.js” integrity=“sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=” crossorigin=“anonymous”></script> 
6. <!– Load the Hosted Payment Page library –> 
7. <script src=“https://gateway.swipen.com/sdk/web/v1/js/hostedforms.min.js”></script> 
8. </head> 
9. <body> 
10. <!– 
11. Hosted Payment <form> as created by the Gateway Integration Library hostedRequest() method 
12. with addition of ‘data-hostedforms-modal’ attribute to signify a modal form is required. 
13. –> 
14. <form name=“payment-form” method=“post” action=“https://gateway.swipen.com/hosted/” data-hostedforms-modal> 
15. <input type=“hidden” name=“merchantID” value=“100001” /> 
16. <input type=“hidden” name=“action” value=“SALE” /> 
17. <input type=“hidden” name=“type” value=“1” /> 
18. <input type=“hidden” name=“currencyCode” value=“826” /> 
19. <input type=“hidden” name=“countryCode” value=“826” /> 
20. <input type=“hidden” name=“amount” value=“1001” /> 
21. <input type=“hidden” name=“orderRef” value=“Test purchase” /> 
22. <input type=“hidden” name=“redirectURL” value=“https://www.merchant.com/payment/” /> 
23. <input type=“hidden” name=“signature” value=“07599ef4cdb2e26cb2bf34a9c65190a7ce82494bc1df144c3bb0d20ee2655d8278dc663b2b0421ef12b8f081e821151bb4c644277c5d65b5523a96539b53b5aa” /> 
24. <input type=“submit” value=“Pay Now”> 
25. </form> 
26. <script> 
27. // Create a new Hosted Form object which will cause the above <form> to load into a modal 
28. // overlay over this page. 
29. var form = $(document.forms[0]).hostedForm(); 
30. </script> 
31. </body> 
32. </html> 

A-23.2.3 Hosted Sale Transaction #2 

The following example code shows how to create a payment form to open the Hosted Payment Page in a lightbox style overlay on your website using the Hosted Payment Page library: 

1. <html> 
2. <head> 
3. <!– Load the Hosted Payment Page library –> 
4. <script src=“https://gateway.swipen.com/sdk/web/v1/js/hostedforms.min.js”></script> 
5. </head> 
6. <body> 
7. <!— Pay button placeholder –> 
8. <div id=“paynow”></div> 
9. <script> 
10. // Create a new Hosted Form object which will render a payment button which will load 
11. // the Hosted Payment Pageo load into a modal overlay over this page. 
13. // The request can be provided from your server. 
14. var req = { 
15. merchantID: ‘100001’, 
16. action: ‘SALE’, 
17. type: ‘1’, 
18. currencyCode: ‘826’, 
19. countryCode: ‘826’, 
20. amount: ‘1001’, 
21. orderRef: ‘Test purchase’, 
22. redirectURL: ‘https://www.merchant.com/payment/’, 
23. signature: ‘07599ef4cdb2e26cb2bf34a9c65190a7ce82494bc1df144c3bb0d20ee2655d8278dc663b2b0421ef12b8f081e821151bb4c644277c5d65b5523a96539b53b5aa’, 
24. }; 
26. var data = { 
27. id: ‘my-payment-form’, 
28. url: ‘https://gateway.swipen.com/hosted/modal/’, 
29. modal: true, 
30. data: req, 
31. submit: { 
32. type: ‘button’, 
33. label: ‘Pay <i>Now</i>‘ 
34. } 
35. }; 
37. var form = new window.hostedForms.classes.Form(‘paynow’, data); 
38. </script> 
39. </body> 
40. </html> 

A-23.2.4 Hosted Sale Transaction #2 (jQuery)

The following example code shows how to create a payment form to open the Hosted Payment Page in a lightbox style overlay on your website using the Hosted Payment Page and jQuery libraries: 

1. <html> 
2. <head> 
3. <!– Load the jQuery library –> 
4. <script src=“https://code.jquery.com/jquery-3.4.1.min.js” integrity=“sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=” crossorigin=“anonymous”></script> 
6. <!– Load the Hosted Payment Page library –> 
7. <script src=“https://gateway.swipen.com/sdk/web/v1/js/hostedforms.min.js”></script> 
8. </head> 
9. <body> 
10. <!— Pay button placeholder –> 
11. <div id=“paynow”></div> 
12. <script> 
13. // Create a new Hosted Form object which will render a payment button which will load 
14. // the Hosted Payment Pageo load into a modal overlay over this page. 
16. // The request can be provided from your server. 
17. var req = { 
18. merchantID: ‘100001’, 
19. action: ‘SALE’, 
20. type: ‘1’, 
21. currencyCode: ‘826’, 
22. countryCode: ‘826’, 
23. amount: ‘1001’, 
24. orderRef: ‘Test purchase’, 
25. redirectURL: ‘https://www.merchant.com/payment/’, 
26. signature: ‘07599ef4cdb2e26cb2bf34a9c65190a7ce82494bc1df144c3bb0d20ee2655d8278dc663b2b0421ef12b8f081e821151bb4c644277c5d65b5523a96539b53b5aa’, 
27. }; 
29. var data = { 
30. id: ‘my-payment-form’, 
31. url: ‘https://gateway.swipen.com/hosted/modal/’, 
32. modal: true, 
33. data: req, 
34. submit: { 
35. type: ‘button’, 
36. label: ‘Pay <i>Now</i>‘ 
37. } 
38. }; 
40. var form = $(‘#paynow’).hostedForm(data); 
41. </script> 
42. </body> 

43. </html>

A-23.3 Hosted Payment Fields Library

The following example code shows how to create and manage Hosted Payment Fields using the Hosted Payment Field library.

The example shows how to style fields using an inline stylesheet and how to listen and react to the field’s events.

The example also shows how to set up the payment form both automatically and manually and integrate with the jQuery validator plugin. You should choose the set-up method best suited for your needs and whatever validation plugin or functions you are familiar with.

Note: The example code demonstrates including the static transaction information, such as the merchantID and amount, in hidden form fields and POSTing the form directly to the Gateway’s Direct Integration using partial message signing. We would however recommend that you capture just the information you require and then POST this data to your own website where you can use it to build a new fully signed request to send to the Gateway’s Direct Integration as a server-to-server request.

1. <html> 
2. <head> 
3. <!– Load the jQuery library –> 
4. <script src=“https://code.jquery.com/jquery-3.4.1.min.js” integrity=“sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=” crossorigin=“anonymous”></script> 
6. <!– Load the jQuery Validator plugin –> 
7. <script src=“https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/jquery.validate.min.js”></script> 
9. <!– Load the Hosted Payment Field library –> 
10. <script src=“https://gateway.swipen.com/sdk/web/v1/js/hostedfields.min.js”></script> 
12. <!– General styles –> 
13. <style> 
14. body { 
15. font-size: 14px; 
16. } 
18. .form-group { 
19. margin: 4px 0 15px 0; 
20. } 
22. .form-group LABEL { 
23. display: inline-block; 
24. max-width: 100%; 
25. margin-bottom: 5px; 
26. font-weight: bold; 
27. } 
29. .form-control { 
30. display: block; 
31. box-sizing: border-box; 
32. height: 34px; 
33. width: 400px; 
34. padding: 6px 12px; 
35. font-size: 14px; 
36. color: #555; 
37. background-color: #fff; 
38. background-image: none; 
39. border: 1px solid #ccc; 
40. border-radius: 4px; 
41. -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); 
42. box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); 
43. -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; 
44. -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
45. transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
46. } 
48. .form-control.hf-focus { 
49. border-color: #66afe9; 
50. outline: 0; 
51. -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6); 
52. box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6); 
53. } 
55. .has-error .form-control.hf-focus { 
56. border-color: #843534; 
57. -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px #ce8483; 
58. box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px #ce8483; 
59. } 
60. </style> 
62. <!– Hosted Field internal styles –> 
63. <style class=“hostedfield”> 
64. /* Grey out when disabled */ 
65. .hostedfield:disabled { 
66. cursor: not-allowed; 
67. background-color: #eee; 
68. opacity: 1; 
69. } 
71. /* Change border and text to green when valid */ 
72. .form-control:valid, 
73. .hostedfield:valid { 
74. border-color: #28a745 !important; 
75. color: #28a745 !important; 
76. } 
78. /* Change border and text to red when invalid */ 
79. .form-control:invalid, 
80. .hostedfield:invalid { 
81. border-color: #a94442 !important; 
82. color: #a94442 !important; 
83. } 
85. /* Change text to light grey when readonly */ 
86. .form-control:readonly, 
87. .hostedfield:readonly { 
88. color: lightgrey !important; 
89. } 
91. /* Emulate webkit auto fill style */ 
92. .form-control.hf-autofill, 
93. .hostedfield.hf-autofill { 
94. background-color: rgb(250, 255, 189) !important; 
95. background-image: none !important; 
96. color: rgb(0, 0, 0) !important; 
97. } 
99. /* Add light blue placeholder */ 
100. .form-control::placeholder, 
101. .hostedfield::placeholder { 
102. color: lightblue; 
103. } 
105. /* Show hovering over the control */ 
106. .form-control:hover, 
107. .hostedfield:hover { 
108. font-style: italic; 
109. } 
111. /* Style by id (hosted field will have ‘-hostedfield’ appended to the id) */ 
112. #form-card-number, #form-card-number-hostedfield { 
113. color: darkcyan; 
114. } 
116. </style> 
118. <!– Hosted Field card-number internal styles –> 
119. <style class=“card-number”> 
121. .hostedfield::placeholder { 
122. color: orange; 
123. } 
125. </style> 
126. </head> 
128. <body> 
129. <!– tokenise payment data and send directly to the Gateway –> 
130. <form id=“form” method=“POST” novalidate=“novalidate” lang=“en” 
131. action=“https://gateway.swipen.com/direct/” 
132. data-hostedform-tokenize=‘{“#form-customer-name”: “customerName”}’> 
133. <input type=“hidden” name=“merchantID” value=“100001”> 
134. <input type=“hidden” name=“action” value=“SALE”> 
135. <input type=“hidden” name=“type” value=“1”> 
136. <input type=“hidden” name=“countryCode” value=“826”> 
137. <input type=“hidden” name=“currencyCode” value=“826”> 
138. <input type=“hidden” name=“amount” value=“1001”> 
139. <input type=“hidden” name=“orderRef” value=“Test purchase”> 
140. <input type=“hidden” name=“transactionUnique” value=“1234”> 
141. <input type=“hidden” name=“redirectURL” value=“https://www.merchant.com/payment/”> 
142. <input type=“hidden” name=“signature” value=“5a0dd6fed71ef68bb3f20175b6a04bbd9d1c904d32ae3f160bd3b8f55740207e5d1e8de5e7e9960b136407e7454b82e428b8378003aa0146df3efa91a3e61b17|merchantID,action,type,countryCode,currencyCode,amount,orderRef,transactionUnique,redirectURL”> 
143. <input type=“hidden” name=“paymentToken” value=“”> 
145. <div class=“form-group”> 
146. <label for=“form-customer-name”>Name on card:</label> 
147. <input id=“form-customer-name” type=“text” name=“paymentToken[customerName]” autocomplete=“cc-name” class=“form-control form-control-native hostedfield-tokenise” placeholder=“Firstname Surname” required> 
148. </div> 
150. <div class=“form-group”> 
151. <label for=“form-card-number”>Card Number:</label> 
152. <input id=“form-card-number” type=“hostedfield:cardNumber” name=“card-number” autocomplete=“cc-number” class=“form-control form-control-hosted” style=“background: #f2f8fb;” placeholder=“**** **** **** ****” required> 
153. </div> 
155. <div class=“form-group”> 
156. <label for=“form-card-expiry-date”>Card Expiry Date:</label> 
157. <input id=“form-card-expiry-date” type=“hostedfield:cardExpiryDate” name=“card-expiry-date” autocomplete=“cc-exp” class=“form-control form-control-hosted” required> 
158. </div> 
160. <div class=“form-group”> 
161. <label for=“form-card-start-date”>Card Issue Date:</label> 
162. <input id=“form-card-start-date” type=“hostedfield:cardStartDate” name=“card-start-date” autocomplete=“cc-iss” class=“form-control form-control-hosted” data-hostedfield=‘{“dropdown”:true}’ data-hostedfield-format=“N – m | y” data-hostedfield-min-date=“-40” data-hostedfeld-max-date=“0”> 
163. </div> 
165. <div class=“form-group”> 
166. <label for=“form-card-cvv”>CVV:</label> 
167. <input id=“form-card-cvv” type=“hostedfield:cardCVV” name=“card-cvv” autocomplete=“cc-csc” class=“form-control form-control-hosted” required> 
168. </div> 
170. <button id=“form-submit” type=“submit”>Pay <span>▷</span></button> 
171. </form> 
173. <script> 
174. // This example demonstrates both automatic and manual form setup 
175. var automatic_setup = true; 
177. $(document).ready(function () { 
179. var $form = $(‘#form’); 
181. // Listen for events on the form to see those sent from the Hosted Payment Fields 
182. // (For demonstration purposes only) 
183. $form.on(events); 
185. if (automatic_setup) { 
186. /////////////////////////////////////////////////////////////// 
187. // FORM AUTOMATIC SETUP 
188. /////////////////////////////////////////////////////////////// 
190. var opts = { 
191. // Auto setup the form creating all hosted fields (default) 
192. autoSetup: true, 
194. // Auto validate, tokenise and submit the form (default) 
195. autoSubmit: true, 
197. // Optional field configuration (by type) 
198. fields: { 
199. any: { 
200. nativeEvents: true, 
201. }, 
202. cardNumber: { 
203. selector: $(‘#form-card-number’), 
204. style: ‘text-decoration: green wavy underline;’, 
205. stylesheet: $(‘style.hostedfields, style.card-number’) 
206. } 
207. } 
208. }; 
210. try { 
211. // Create form, automatically creating all child Hosted Payment Fields 
212. $form.hostedForm(opts); 
213. } catch(e) { 
214. showError(‘Failed to create hosted form: ‘ + e); 
215. throw e; // Can’t continue with this script 
216. } 
218. // Listen for some events from the form thrown by the auto methods 
219. $form.on({ 
220. // Let jQuery Validator check the form on submission 
221. ‘hostedform:presubmit’: function (event) { 
222. console.log(‘Form submitting’); 
223. return $form.valid(); 
224. }, 
226. // Show form is valid 
227. ‘hostedform:valid’: function (event) { 
228. console.log(‘Form valid’); 
229. return true; 
230. }, 
232. // Show any validation errors 
233. ‘hostedform:invalid’: function (event, details) { 
234. console.log(‘Form invalid’); 
235. showFieldErrors(details.invalid); 
236. return true; 
237. }, 
239. // Show general error 
240. ‘hostedform:error’: function (event, details) { 
241. showError(details.message); 
242. return true; 
243. } 
244. }); 
246. // Use jQuery validator to validate the form 
247. $form.validate(); 
249. // End of form automatic setup 
251. } else { 
252. /////////////////////////////////////////////////////////////// 
253. // FORM MANUAL SETUP 
254. /////////////////////////////////////////////////////////////// 
256. try { 
257. // Create the card number field with custom options 
258. $(‘#form-card-number’).hostedField({ 
259. nativeEvents: true, 
260. style: ‘text-decoration: green wavy underline;’, 
261. stylesheet: $(‘style.hostedfields, style.card-number’) 
262. }); 
264. // Create the remaining hosted fields 
265. $(‘.form-control-hosted:input’, $form).hostedField({nativeEvents: true}); 
267. } catch (e) { 
268. showError(‘Failed to create hosted fields: ‘ + e); 
269. throw e; // Can’t continue with this script 
270. } 
272. $form.validate({ 
273. // Get the hosted form widget for the submitted form (Form1 only) 
274. submitHandler: function () { 
275. try { 
276. console.log(‘getPaymentToken’); 
278. // Check we have some enabled fields to submit 
279. if ($($form[0].elements).filter(‘:enabled:not([type=“hidden”])’).length === 0) { 
280. showError(‘You must enable some fields’); 
281. return false; 
282. } 
284. var hostedform = $form.hostedForm(‘instance’); 
286. var also = { 
287. customerName: $(‘#form-customer-name’).val() 
288. }; 
290. hostedform.getPaymentDetails(also, true).then( 
292. // Success validating the form and requesting a payment token 
293. function (details) { 
294. if (details.success) { 
295. $form[0].elements[‘paymentToken’].value = details.paymentToken; 
296. $form[0].submit(); 
297. } else if (details.invalid) { 
298. $form.valid(); 
299. showFieldErrors(details.invalid); 
300. } else { 
301. showError(‘There was a problem fetching the payment token. Please seek assistance.’); 
302. } 
303. }, 
305. // Failure either validating the form or requesting the payment details 
306. function (e) { 
307. showError(‘There was a problem fetching the payment token. Please seek assistance.’); 
308. } 
309. ); 
311. } catch (e) { 
312. showError(‘There was a problem fetching the payment token. Please seek assistance.’); 
313. } 
314. } 
315. }); 
317. // End of form manual setup 
319. } 
321. // Hide errors once all fields are valid 
322. $(‘#form :input’).on(‘valid’, function () { 
323. if ($(this.form).find(‘:invalid’).length === 0) { 
324. hideError($(this.form)); 
325. } 
326. }) 
328. // Listen for some events on the none Hosted Fields 
329. $(‘.form-control-native’).on(‘invalid’, bsMarkInvalid); 
330. $(‘.form-control-native’).on(‘valid’, bsMarkValid); 
332. // Check we can see the Hosted Fields via their new class 
333. // (For demonstration purposes only) 
334. console.log($(‘.form-control-hosted.hostedfield-element’)); 
336. // Check we can see the Hosted Fields via the psuedo element 
337. // (For demonstration purposes only) 
338. console.log($(‘.form-control:hostedfield’)); 
340. }); 
342. /////////////////////////////////////////////////////////////////// 
343. // Supporting functions 
344. /////////////////////////////////////////////////////////////////// 
346. // Display events that are passed from hosted field 
347. var events = { 
348. ‘hostedfield:create.example’ : showEvent, 
349. ‘hostedfield:destroy.example’ : showEvent, 
350. ‘hostedfield:ready.example’ : showEvent, 
351. ‘hostedfield:style.example’ : showEvent, 
352. ‘hostedfield:placeholder.example’ : showEvent, 
353. ‘hostedfield:invalid.example invalid.example’ : showEvent, 
354. ‘hostedfield:userinvalid.example userinvalid.example’ : showEvent, 
355. ‘hostedfield:valid.example valid.example’ : showEvent, 
356. ‘hostedfield:uservalid.example uservalid.example’ : showEvent, 
357. ‘hostedfield:disabled.example disabled.example’ : showEvent, 
358. ‘hostedfield:enabled.example enabled.example’ : showEvent, 
359. ‘hostedfield:required.example required.example’ : showEvent, 
360. ‘hostedfield:optional.example optional.example’ : showEvent, 
361. ‘hostedfield:readonly.example readonly.example’ : showEvent, 
362. ‘hostedfield:readwrite.example readwrite.example’ : showEvent, 
363. ‘hostedfield:focus.example focus.example’ : showEvent, 
364. ‘hostedfield:blur.example blur.example’ : showEvent, 
365. ‘hostedfield:mouseenter.example mouseenter.example’ : showEvent, 
366. ‘hostedfield:mouseleave.example mouseleave.example’ : showEvent,

367. ‘hostedfield:mouseover.example mouseover.example’ : showEvent, 
368. ‘hostedfield:mouseout.example mouseout.example’ : showEvent, 
369. ‘hostedfield:mousemove.example mousemove.example’ : showEvent, 
370. ‘hostedfield:keydown.example keydown.example’ : showEvent, 
371. ‘hostedfield:keypress.example keypress.example’ : showEvent, 
372. ‘hostedfield:keyup.example keyup.example’ : showEvent, 
373. ‘hostedfield:change.example change.example’ : showEvent, 
374. ‘hostedfield:input.example input.example’ : showEvent, 
376. ‘hostedfield:invalid.example invalid.example’ : bsMarkInvalid, 
377. ‘hostedfield:valid.example valid.example’ : bsMarkValid, 
378. ‘hostedfield:valid.example valid.example’ : hideError, 
379. }; 
381. function isInvalid(element) { 
382. return !element[0].checkValidity(); 
383. } 
385. function showError(msg) { 
386. $(‘#error-info’).html(msg).show(); 
387. } 
389. function hideError($form, msg) { 
390. $(‘#error-info’, $form).hide(); 
391. } 
393. function showFieldErrors(errors) { 
394. var msg = ‘<h5>Error</h5><p>The following fields are invalid:</p><ul>’; 
395. for (var p in errors) { 
396. msg += ‘<li><b>‘ + p + ‘:</b> ‘ + errors[p] + ‘</li>‘; 
397. } 
398. msg += ‘</ul>‘ 
399. showError(msg); 
400. } 
402. function bsMarkInvalid(e) { 
403. var element = (e instanceof $.Event ? this : e); 
404. $(element).closest(‘.form-group’).addClass(‘has-error’); 
405. } 
407. function bsMarkValid(e) { 
408. var element = (e instanceof $.Event ? this : e); 
409. $(element).closest(‘.form-group’).removeClass(‘has-error’); 
410. } 
412. function showEvent(event) { 
413. console.log(event); 
414. console.log(‘Field ‘ + event.type + ‘ event: ‘, this, arguments); 
415. } 
417. jQuery.validator.setDefaults({ 
418. ignore: [], 
419. rules: { 
420. ‘customer-name’: { 
421. checkValidity: true, 
422. required: false 
423. }, 
424. ‘card-details’: { 
425. checkValidity: true, 
426. required: false 
427. }, 
428. ‘card-number’: { 
429. checkValidity: true, 
430. required: false 
431. }, 
432. ‘card-expiry-date’: { 
433. checkValidity: true, 
434. required: false 
435. }, 
436. ‘card-start-date’: { 
437. checkValidity: true, 
438. required: false 
439. }, 
440. ‘card-issue-number’: { 
441. checkValidity: true, 
442. required: false 
443. }, 
444. ‘card-cvv’: { 
445. checkValidity: true, 
446. required: false 
447. } 
448. }, 
449. keyup: null, // Don\’t validate on keyup 
450. showErrors: function (errorMap, errorList) { 
451. if (errorList && errorList.length) { 
452. var errors = {}; 
453. for (var i = 0, max_i = errorList.length; i < max_i; i++ ) { 
454. var label = $(‘label[for=“‘ + errorList[i].element.id + ‘”]:not(“.error”)’).text(); 
455. errors[label] = errorList[i].message; 
456. } 
457. showFieldErrors(errors); 
458. } 
459. this.defaultShowErrors(errorMap, errorList); 
460. }, 
461. highlight: bsMarkInvalid, 
462. unhighlight: bsMarkValid, 
463. errorPlacement: function (error, element) { 
464. $(element).closest(‘.form-control:not(“.hostedfield-element”)’).after(error); 
465. } 
466. }); 
468. $.validator.addMethod(‘checkValidity’, 
469. function (value, element, params, message) { 
470. element.checkValidity(); 
471. var valid = (element.validationMessage === ”); 
472. $(element).attr(‘aria-invalid’, !valid); 
473. return valid; 
474. }, 
475. function (params, element) { 
476. return element.validationMessage; 
477. } 
478. ); 
480. </script> 
482. </body> 

483.</html>