· 5 years ago · Dec 12, 2019, 11:22 AM
1<!doctype html>
2<html>
3<meta charset='utf-8'>
4<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
5<script type="text/javascript" src="https://js.stripe.com/v3/"></script>
6<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"> </script>
7<script src="https://js.braintreegateway.com/web/3.9.0/js/hosted-fields.min.js"></script>
8<script>
9 var stripe;
10 var stripeStyle = {
11 hidePostalCode: true,
12 style: {
13 base: {
14 color: '#222222',
15 fontSmoothing: 'antialiased',
16 '::placeholder': {
17 color: '#aab7c4'
18 }
19 },
20 invalid: {
21 color: '#e5514f',
22 iconColor: '#e5514f'
23 }
24 }
25 };
26 try {
27 setTimeout(function () {
28 stripe = Stripe('<%= key %>', { locale: '<%= language %>' || "en" });
29 });
30 } catch (err) {
31 console.error('Stripe: ', err);
32 }
33</script>
34<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
35<style>
36 body {
37 background-color: #fff;
38 }
39
40 .panel {
41 width: 80%;
42 margin: 2em auto;
43 }
44
45 .bootstrap-basic {
46 background: white;
47 }
48
49 .panel-body {
50 width: 90%;
51 margin: 2em auto;
52 }
53
54 #loader {
55 position: absolute;
56 left: 50%;
57 top: 50%;
58 z-index: 1001;
59 width: 50px;
60 height: 50px;
61 margin: -25px 0 0 -25px;
62 border: 6px solid #f3f3f3;
63 border-radius: 50%;
64 border-top: 6px solid #3498db;
65 -webkit-animation: spin 2s linear infinite;
66 animation: spin 2s linear infinite;
67 }
68
69 #card-errors {
70 color: #e5514f;
71 font-size: 15px;
72 }
73
74 label {
75 font-size: 13px;
76 }
77
78 .cardholder-name {
79 border: 0 !important;
80 box-shadow: none !important;
81 font-size: 14px !important;
82 padding: 0;
83 height: unset;
84 color: #222222;
85 }
86
87 @-webkit-keyframes spin {
88 0% {
89 -webkit-transform: rotate(0deg);
90 }
91
92 100% {
93 -webkit-transform: rotate(360deg);
94 }
95 }
96
97 @keyframes spin {
98 0% {
99 transform: rotate(0deg);
100 }
101
102 100% {
103 transform: rotate(360deg);
104 }
105 }
106
107 .modal-backdrop {
108 position: fixed;
109 top: 0;
110 right: 0;
111 bottom: 0;
112 left: 0;
113 background-color: rgba(0, 0, 0, 0.7);
114 z-index: 990;
115 }
116
117 .helper-text {
118 color: #8A6D3B;
119 font-size: 12px;
120 margin-top: 5px;
121 height: 12px;
122 display: block;
123 }
124
125 /* Braintree Hosted Fields styling classes*/
126 .braintree-hosted-fields-focused {
127 border: 1px solid #0275d8;
128 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
129 }
130
131 .braintree-hosted-fields-focused.focused-invalid {
132 border: 1px solid #ebcccc;
133 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(100, 100, 0, .6);
134 }
135
136 .img-container {
137 position: absolute;
138 top: 50%;
139 left: 50%;
140 }
141
142 .img-container>img {
143 margin-top: -50%;
144 margin-left: -50%;
145 }
146
147 @media (max-width: 670px) {
148 .form-group {
149 width: 100%;
150 }
151
152 .btn {
153 white-space: normal;
154 }
155 }
156
157 .has-error,
158 .has-error .help-block,
159 .has-error .form-control {
160 border: #a94442 1px solid
161 }
162
163 .error_span {
164 color: #a94442;
165 font-size: 12px;
166 }
167
168 .invisible_custom {
169 display: none;
170 }
171
172 .visible_custom {
173 display: block;
174 }
175</style>
176<script type="text/javascript" src="stripe_multi.js"></script>
177<!--<center><img src = "ring.gif" class="img-container"></center>-->
178<!-- Bootstrap inspired Braintree Hosted Fields example -->
179<div class="panel panel-default bootstrap-basic" id="top">
180 <div class="alert alert-success invisible_custom" id="success-toast">
181 <strong>Success!</strong> You have successfully added the card.
182 </div>
183 <div class="alert alert-danger invisible_custom" id="failure-toast">
184 <strong>Failure!</strong> Error in adding card. Please enter valid card details.
185 </div>
186 <div class="panel-heading">
187 <h3 class="panel-title" id="enter_card_details_lng">Enter Card Details</h3>
188 </div>
189 <form class="panel-body" id="payment-form">
190 <div class="row">
191 <div class="form-group">
192 <div id="card-element"></div>
193 </div>
194 </div>
195 <div class="row">
196 <div class="form-group">
197 <label class="control-label" id="name_lng">Name</label>
198 <input type="text" class="form-control cardholder-name" id="name" placeholder="Jane Doe" minlength="4"
199 maxlength="50" />
200 </div>
201 </div>
202 <div class="row">
203 <div class="form-group">
204 <div id="card-errors" role="alert"></div>
205 </div>
206 </div>
207 <button value="submit" id="submit" class="btn btn-success btn-md center-block">Add Card
208 </button>
209 </form>
210 <div class="alert alert-danger invisible_custom" id="error-toast">
211 Something went wrong.
212 </div>
213 <div id="loader"></div>
214</div>
215</body>
216<!-- Load the required client component. -->
217<script src="https://js.braintreegateway.com/web/3.9.0/js/client.min.js"></script>
218<!-- Load Hosted Fields component. -->
219<script src="https://js.braintreegateway.com/web/3.9.0/js/hosted-fields.min.js"></script>
220<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"> </script>
221<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
222<!--<script src="payform-validation.js"></script>-->
223<script>
224 var disable = true;
225 var languages ={};
226 var cardElement;
227 var clientSecret;
228 var addCardFormInvalid = false;
229 var userId = "<%= user_id %>";
230 var jungleSecretKey = "<%= jungle_secret_key %>";
231 var jungleGatewayURL = "<%= jungleGatewayURL %>";
232 var form_id = "<%= form_id %>"
233 document.getElementById("loader").style.display = "none";
234 function validate(evt) {
235 var theEvent = evt || window.event;
236 var key = theEvent.keyCode || theEvent.which;
237 key = String.fromCharCode(key);
238 var regex = /[0-9]|\./;
239 if (!regex.test(key)) {
240 theEvent.returnValue = false;
241 if (theEvent.preventDefault) theEvent.preventDefault();
242 }
243 }
244 var lanKey = '<%= language %>' || "en";
245 // Stripe.setPublishableKey('<%= key %>');
246 var selectedLang = lanKey;
247 var selectedLanguageStrings = languages[selectedLang] ? languages[selectedLang] : {};
248 if (selectedLanguageStrings.successful_card_add_message) {
249 document.getElementById('success-toast').innerText = selectedLanguageStrings.successful_card_add_message;
250 }
251 if (selectedLanguageStrings.error_card_add_message) {
252 document.getElementById('failure-toast').innerText = selectedLanguageStrings.error_card_add_message;
253 }
254 if (selectedLanguageStrings.enter_card_details) {
255 document.getElementById('enter_card_details_lng').innerText = selectedLanguageStrings.enter_card_details;
256 }
257 if (selectedLanguageStrings.card_number) {
258 document.getElementById('card_number_lng').innerText = selectedLanguageStrings.card_number;
259 }
260 if (selectedLanguageStrings.expiration_date) {
261 document.getElementById('expiration_date_lng').innerText = selectedLanguageStrings.expiration_date;
262 }
263 if (selectedLanguageStrings.name) {
264 document.getElementById('name_lng').innerText = selectedLanguageStrings.name;
265 }
266 if (selectedLanguageStrings.cvv) {
267 document.getElementById('cvv_lng').innerText = selectedLanguageStrings.cvv;
268 }
269 if (selectedLanguageStrings.zip_code_optional) {
270 document.getElementById('zipcode_optional_lng').innerText = selectedLanguageStrings.zip_code_optional;
271 }
272 if (selectedLanguageStrings.add_card) {
273 document.getElementById('submit').innerText = selectedLanguageStrings.add_card;
274 }
275 if (selectedLanguageStrings.jan) {
276 document.getElementById('jan_lng').innerText = selectedLanguageStrings.jan;
277 }
278 if (selectedLanguageStrings.feb) {
279 document.getElementById('feb_lng').innerText = selectedLanguageStrings.feb;
280 }
281 if (selectedLanguageStrings.mar) {
282 document.getElementById('mar_lng').innerText = selectedLanguageStrings.mar;
283 }
284 if (selectedLanguageStrings.apr) {
285 document.getElementById('apr_lng').innerText = selectedLanguageStrings.apr;
286 }
287 if (selectedLanguageStrings.may) {
288 document.getElementById('may_lng').innerText = selectedLanguageStrings.may;
289 }
290 if (selectedLanguageStrings.jun) {
291 document.getElementById('jun_lng').innerText = selectedLanguageStrings.jun;
292 }
293 if (selectedLanguageStrings.jul) {
294 document.getElementById('jul_lng').innerText = selectedLanguageStrings.jul;
295 }
296 if (selectedLanguageStrings.aug) {
297 document.getElementById('aug_lng').innerText = selectedLanguageStrings.aug;
298 }
299 if (selectedLanguageStrings.sep) {
300 document.getElementById('sep_lng').innerText = selectedLanguageStrings.sep;
301 }
302 if (selectedLanguageStrings.oct) {
303 document.getElementById('oct_lng').innerText = selectedLanguageStrings.oct;
304 }
305 if (selectedLanguageStrings.nov) {
306 document.getElementById('nov_lng').innerText = selectedLanguageStrings.nov;
307 }
308 if (selectedLanguageStrings.dec) {
309 document.getElementById('dec_lng').innerText = selectedLanguageStrings.dec;
310 }
311
312 function showError(message) {
313 $('#error-toast').css('display', 'block');
314 $('#error-toast').html(message);
315 setTimeout(function () {
316 hideError();
317 }, 5000);
318 }
319
320 function hideError() {
321 $('#error-toast').css('display', 'none');
322 $('#error-toast').html('');
323 }
324
325 function setupStripeIntent() {
326 document.getElementById("loader").style.display = "block";
327 $.ajax({
328 url: jungleGatewayURL+"/stripe/setupIntent",
329 type: "POST",
330 headers: {
331 "Content-Type": "application/json"
332 },
333 data: JSON.stringify({
334 "user_id": userId,
335 "offering_id": 1,
336 "secret_key": jungleSecretKey,
337 "form_id": form_id
338 }),
339 dataType: "json"
340 }).then(
341 function (data) {
342 document.getElementById("loader").style.display = "none";
343 if (data.status == 200) {
344 if (data && data.data) {
345 clientSecret = data.data;
346 } else {
347 showError(data.message || "No stripe intent found");
348 }
349 } else {
350 showError(data.message || "Something went wrong");
351 }
352 },
353 function (data) {
354 document.getElementById("loader").style.display = "none";
355 showError(data.message || "Something went wrong");
356 });
357 }
358
359 function initializeCardIntent() {
360 try {
361 document.getElementById("loader").style.display = "block";
362 addCardFormInvalid = false;
363 setTimeout(function () {
364 var elements = stripe.elements();
365 var cardElement = elements.create('card', stripeStyle);
366 cardElement.mount('#card-element');
367 cardElement.addEventListener('change', function (event) {
368 var displayError = document.getElementById('card-errors');
369 if (event.error) {
370 displayError.textContent = event.error.message;
371 addCardFormInvalid = event.error.message;
372 } else {
373 displayError.textContent = '';
374 addCardFormInvalid = false;
375 }
376 });
377 var form = document.getElementById('payment-form');
378 form.addEventListener('submit', function (event) {
379 event.preventDefault();
380 document.getElementById("loader").style.display = "block";
381 if (!clientSecret) {
382 document.getElementById("loader").style.display = "none";
383 showError("No secret key found, stripe initialization error. Please refresh the page and try again.");
384 return;
385 }
386 if (!cardElement) {
387 document.getElementById("loader").style.display = "none";
388 showError("No card number found, stripe initialization error. Please refresh the page and try again.");
389 return;
390 }
391 if (addCardFormInvalid) {
392 document.getElementById("loader").style.display = "none";
393 showError(addCardFormInvalid);
394 return;
395 }
396 if (document.getElementById('name') && !document.getElementById('name').value) {
397 document.getElementById("loader").style.display = "none";
398 showError("Name is required.");
399 return;
400 }
401 stripe.handleCardSetup(
402 clientSecret, cardElement, {
403 payment_method_data: {
404 billing_details: { name: (document.getElementById('name') && document.getElementById('name').value) || "" }
405 }
406 }
407 ).then(function (result) {
408 setTimeout(function () {
409 if (result.error) {
410 showError((result.error && result.error.message) || "Something went wrong");
411 document.getElementById("loader").style.display = "none";
412 } else {
413 // The setup has succeeded. Display a success message
414 if (result && result.setupIntent && result.setupIntent.payment_method) {
415 addCardtoDatabaseV2(result.setupIntent.payment_method, result.setupIntent)
416 } else {
417 showError(result.status || "No stripe intent found");
418 document.getElementById("loader").style.display = "none";
419 }
420 }
421 });
422 }).catch(function (err) {
423 showError(err.status || "No stripe intent found");
424 });
425 });
426 document.getElementById("loader").style.display = "none";
427 setupStripeIntent();
428 });
429 } catch (err) {
430 console.error('Stripe: ', err);
431 document.getElementById("loader").style.display = "none";
432
433 }
434 }
435
436 initializeCardIntent();
437
438 function getParameterByName(name, url) {
439 if (!url) {
440 url = window.location.href;
441 }
442 name = name.replace(/[\[\]]/g, "\\$&");
443 var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
444 results = regex.exec(url);
445 if (!results) return null;
446 if (!results[2]) return '';
447 return decodeURIComponent(results[2].replace(/\+/g, " "));
448 }
449
450 function addCardtoDatabaseV2(paymentMethod, setupIntent) {
451 $.ajax({
452 url: window.location.origin + "/v2/add_merchant_card",
453 type: "POST",
454 headers: {
455 "Content-Type": "application/json"
456 },
457 data: JSON.stringify({
458 access_token: getParameterByName('access_token'),
459 app_device_type: getParameterByName('app_device_type'),
460 setup_intent: setupIntent,
461 payment_method: 2
462 }),
463 dataType: "json"
464 }).success(function (data) {
465 $('#submit').attr('disabled', false);
466 var body = data; //JSON.parse(data);
467 if (body.status == 200) {
468 // $('#failure-toast').hide();
469 // $('#success-toast').show()
470 // setTimeout(function() {
471 // $('#success-toast').hide();
472 // },5000);
473 var myVar;
474 myVar = setTimeout(showPage, 3000);
475
476 function showPage() {
477
478 document.getElementById("loader").style.display = "none";
479 window.location.replace(window.location.origin + "/success.html");
480 }
481 }
482 else {
483 var myVar;
484 myVar = setTimeout(showPage, 3000);
485
486 function showPage() {
487
488 document.getElementById("loader").style.display = "none";
489 window.location.replace(window.location.origin + "/error.html");
490
491 }
492 }
493 }).error(function (err) {
494 $('#submit').attr('disabled', false);
495 var myVar;
496 myVar = setTimeout(showPage, 3000);
497
498 function showPage() {
499
500 document.getElementById("loader").style.display = "none";
501 setTimeout(errorPage, 500);
502 }
503 function errorPage() {
504 window.location.replace(window.location.origin + "/error.html");
505 }
506
507
508 });
509 }
510
511</script>
512
513<body>
514
515</html>