1<script>
2 // Define state tab index value
3 var statesTab = 10;
4 // Do not enforce state input client side
5 var stateNotRequired = true;
6</script>
7{include file="orderforms/standard_cart/common.tpl"}
8<script type="text/javascript" src="{$BASE_PATH_JS}/StatesDropdown.js"></script>
9<script type="text/javascript" src="{$BASE_PATH_JS}/PasswordStrength.js"></script>
10<script>
11 window.langPasswordStrength = "{$LANG.pwstrength}";
12 window.langPasswordWeak = "{$LANG.pwstrengthweak}";
13 window.langPasswordModerate = "{$LANG.pwstrengthmoderate}";
14 window.langPasswordStrong = "{$LANG.pwstrengthstrong}";
15</script>
16
17<div id="order-standard_cart">
18
19 <div class="row">
20
21 <div class="pull-md-right col-md-9">
22
23 <div class="header-lined">
24 <h1>{$LANG.orderForm.checkout}</h1>
25 </div>
26
27 </div>
28
29 <div class="col-md-3 pull-md-left sidebar hidden-xs hidden-sm">
30
31 {include file="orderforms/standard_cart/sidebar-categories.tpl"}
32
33 </div>
34
35 <div class="col-md-9 pull-md-right">
36
37 {include file="orderforms/standard_cart/sidebar-categories-collapsed.tpl"}
38
39 <div class="already-registered clearfix">
40 <div class="pull-right">
41 <button type="button" class="btn btn-info{if $loggedin || !$loggedin && $custtype eq "existing"} hidden{/if}" id="btnAlreadyRegistered">
42 {$LANG.orderForm.alreadyRegistered}
43 </button>
44 <button type="button" class="btn btn-warning{if $loggedin || $custtype neq "existing"} hidden{/if}" id="btnNewUserSignup">
45 {$LANG.orderForm.createAccount}
46 </button>
47 </div>
48
49 <p>{lang key='orderForm.enterPersonalDetails'}</p>
50 </div>
51
52 {if $errormessage}
53 <div class="alert alert-danger checkout-error-feedback" role="alert">
54 <p>{$LANG.orderForm.correctErrors}:</p>
55 <ul>
56 {$errormessage}
57 </ul>
58 </div>
59 <div class="clearfix"></div>
60 {/if}
61
62 <form method="post" action="{$smarty.server.PHP_SELF}?a=checkout" name="orderfrm" id="frmCheckout">
63 <input type="hidden" name="submit" value="true" />
64 <input type="hidden" name="custtype" id="inputCustType" value="{$custtype}" />
65
66 {if $custtype neq "new" && $loggedin}
67 <div class="sub-heading">
68 <span>
69 {lang key='switchAccount.title'}
70 </span>
71 </div>
72 <div id="containerExistingAccountSelect" class="row account-select-container">
73 {foreach $accounts as $account}
74 <div class="col-sm-{if $accounts->count() == 1}12{else}6{/if}">
75 <div class="account{if $selectedAccountId == $account->id} active{/if}">
76 <label class="radio-inline" for="account{$account->id}">
77 <input id="account{$account->id}" class="account-select{if $account->isClosed || $account->noPermission || $inExpressCheckout} disabled{/if}" type="radio" name="account_id" value="{$account->id}"{if $account->isClosed || $account->noPermission || $inExpressCheckout} disabled="disabled"{/if}{if $selectedAccountId == $account->id} checked="checked"{/if}>
78 <span class="address">
79 <strong>
80 {if $account->company}{$account->company}{else}{$account->fullName}{/if}
81 </strong>
82 {if $account->isClosed || $account->noPermission}
83 <span class="label label-default">
84 {if $account->isClosed}
85 {lang key='closed'}
86 {else}
87 {lang key='noPermission'}
88 {/if}
89 </span>
90 {elseif $account->currencyCode}
91 <span class="label label-info">
92 {$account->currencyCode}
93 </span>
94 {/if}
95 <br>
96 <span class="small">
97 {$account->address1}{if $account->address2}, {$account->address2}{/if}<br>
98 {if $account->city}{$account->city},{/if}
99 {if $account->state} {$account->state},{/if}
100 {if $account->postcode} {$account->postcode},{/if}
101 {$account->countryName}
102 </span>
103 </span>
104 </label>
105 </div>
106 </div>
107 {/foreach}
108 <div class="col-sm-12">
109 <div class="account border-bottom{if !$selectedAccountId || !is_numeric($selectedAccountId)} active{/if}">
110 <label class="radio-inline">
111 <input class="account-select" type="radio" name="account_id" value="new"{if !$selectedAccountId || !is_numeric($selectedAccountId)} checked="checked"{/if}{if $inExpressCheckout} disabled="disabled" class="disabled"{/if}>
112 {lang key='orderForm.createAccount'}
113 </label>
114 </div>
115 </div>
116 </div>
117 {/if}
118
119 <div id="containerExistingUserSignin"{if $loggedin || $custtype neq "existing"} class="hidden"{/if}>
120
121 <div class="sub-heading">
122 <span>{$LANG.orderForm.existingCustomerLogin}</span>
123 </div>
124
125 <div class="row">
126 <div class="col-sm-6">
127 <div class="form-group prepend-icon">
128 <label for="inputLoginEmail" class="field-icon">
129 <i class="fas fa-envelope"></i>
130 </label>
131 <input type="text" name="loginemail" id="inputLoginEmail" class="field" placeholder="{$LANG.orderForm.emailAddress}" value="{$loginemail}">
132 </div>
133 </div>
134 <div class="col-sm-6">
135 <div class="form-group prepend-icon">
136 <label for="inputLoginPassword" class="field-icon">
137 <i class="fas fa-lock"></i>
138 </label>
139 <input type="password" name="loginpassword" id="inputLoginPassword" class="field" placeholder="{$LANG.clientareapassword}">
140 </div>
141 </div>
142 </div>
143
144 {include file="orderforms/standard_cart/linkedaccounts.tpl" linkContext="checkout-existing"}
145 </div>
146
147 <div id="containerNewUserSignup"{if $custtype === 'existing' || (is_numeric($selectedAccountId) && $selectedAccountId > 0) || ($loggedin && $accounts->count() > 0 && $selectedAccountId !== 'new')} class="hidden"{/if}>
148
149 <div{if $loggedin} class="hidden"{/if}>
150 {include file="orderforms/standard_cart/linkedaccounts.tpl" linkContext="checkout-new"}
151 </div>
152
153 <div class="sub-heading">
154 <span>{$LANG.orderForm.personalInformation}</span>
155 </div>
156
157 <div class="row">
158 <div class="col-sm-6">
159 <div class="form-group prepend-icon">
160 <label for="inputFirstName" class="field-icon">
161 <i class="fas fa-user"></i>
162 </label>
163 <input type="text" name="firstname" id="inputFirstName" class="field" placeholder="{$LANG.orderForm.firstName}" value="{$clientsdetails.firstname}" autofocus>
164 </div>
165 </div>
166 <div class="col-sm-6">
167 <div class="form-group prepend-icon">
168 <label for="inputLastName" class="field-icon">
169 <i class="fas fa-user"></i>
170 </label>
171 <input type="text" name="lastname" id="inputLastName" class="field" placeholder="{$LANG.orderForm.lastName}" value="{$clientsdetails.lastname}">
172 </div>
173 </div>
174 <div class="col-sm-6">
175 <div class="form-group prepend-icon">
176 <label for="inputEmail" class="field-icon">
177 <i class="fas fa-envelope"></i>
178 </label>
179 <input type="email" name="email" id="inputEmail" class="field" placeholder="{$LANG.orderForm.emailAddress}" value="{$clientsdetails.email}">
180 </div>
181 </div>
182 <div class="col-sm-6">
183 <div class="form-group prepend-icon">
184 <label for="inputPhone" class="field-icon">
185 <i class="fas fa-phone"></i>
186 </label>
187 <input type="tel" name="phonenumber" id="inputPhone" class="field" placeholder="{$LANG.orderForm.phoneNumber}" value="{$clientsdetails.phonenumber}">
188 </div>
189 </div>
190 </div>
191
192 <div class="sub-heading">
193 <span>{$LANG.orderForm.billingAddress}</span>
194 </div>
195
196 <div class="row">
197 <div class="col-sm-12">
198 <div class="form-group prepend-icon">
199 <label for="inputCompanyName" class="field-icon">
200 <i class="fas fa-building"></i>
201 </label>
202 <input type="text" name="companyname" id="inputCompanyName" class="field" placeholder="{$LANG.orderForm.companyName} ({$LANG.orderForm.optional})" value="{$clientsdetails.companyname}">
203 </div>
204 </div>
205 <div class="col-sm-12">
206 <div class="form-group prepend-icon">
207 <label for="inputAddress1" class="field-icon">
208 <i class="far fa-building"></i>
209 </label>
210 <input type="text" name="address1" id="inputAddress1" class="field" placeholder="{$LANG.orderForm.streetAddress}" value="{$clientsdetails.address1}">
211 </div>
212 </div>
213 <div class="col-sm-12">
214 <div class="form-group prepend-icon">
215 <label for="inputAddress2" class="field-icon">
216 <i class="fas fa-map-marker-alt"></i>
217 </label>
218 <input type="text" name="address2" id="inputAddress2" class="field" placeholder="{$LANG.orderForm.streetAddress2}" value="{$clientsdetails.address2}">
219 </div>
220 </div>
221 <div class="col-sm-4">
222 <div class="form-group prepend-icon">
223 <label for="inputCity" class="field-icon">
224 <i class="far fa-building"></i>
225 </label>
226 <input type="text" name="city" id="inputCity" class="field" placeholder="{$LANG.orderForm.city}" value="{$clientsdetails.city}">
227 </div>
228 </div>
229 <div class="col-sm-5">
230 <div class="form-group prepend-icon">
231 <label for="state" class="field-icon" id="inputStateIcon">
232 <i class="fas fa-map-signs"></i>
233 </label>
234 <label for="stateinput" class="field-icon" id="inputStateIcon">
235 <i class="fas fa-map-signs"></i>
236 </label>
237 <input type="text" name="state" id="inputState" class="field" placeholder="{$LANG.orderForm.state}" value="{$clientsdetails.state}">
238 </div>
239 </div>
240 <div class="col-sm-3">
241 <div class="form-group prepend-icon">
242 <label for="inputPostcode" class="field-icon">
243 <i class="fas fa-certificate"></i>
244 </label>
245 <input type="text" name="postcode" id="inputPostcode" class="field" placeholder="{$LANG.orderForm.postcode}" value="{$clientsdetails.postcode}">
246 </div>
247 </div>
248 <div class="col-sm-12">
249 <div class="form-group prepend-icon">
250 <label for="inputCountry" class="field-icon" id="inputCountryIcon">
251 <i class="fas fa-globe"></i>
252 </label>
253 <select name="country" id="inputCountry" class="field">
254 {foreach $countries as $countrycode => $countrylabel}
255 <option value="{$countrycode}"{if (!$country && $countrycode == $defaultcountry) || $countrycode eq $country} selected{/if}>
256 {$countrylabel}
257 </option>
258 {/foreach}
259 </select>
260 </div>
261 </div>
262 {if $showTaxIdField}
263 <div class="col-sm-12">
264 <div class="form-group prepend-icon">
265 <label for="inputTaxId" class="field-icon">
266 <i class="fas fa-building"></i>
267 </label>
268 <input type="text" name="tax_id" id="inputTaxId" class="field" placeholder="{lang key=\WHMCS\Billing\Tax\Vat::getLabel()} ({$LANG.orderForm.optional})" value="{$clientsdetails.tax_id}">
269 </div>
270 </div>
271 {/if}
272 </div>
273
274 {if $customfields}
275 <div class="sub-heading">
276 <span>{$LANG.orderadditionalrequiredinfo}</span>
277 </div>
278 <div class="field-container">
279 <div class="row">
280 {foreach $customfields as $customfield}
281 <div class="col-sm-6">
282 <div class="form-group">
283 <label for="customfield{$customfield.id}">{$customfield.name}</label>
284 {$customfield.input}
285 {if $customfield.description}
286 <span class="field-help-text">
287 {$customfield.description}
288 </span>
289 {/if}
290 </div>
291 </div>
292 {/foreach}
293 </div>
294 </div>
295 {/if}
296
297 </div>
298
299 {if $domainsinorder}
300
301 <div class="sub-heading">
302 <span>{$LANG.domainregistrantinfo}</span>
303 </div>
304
305 <p class="small text-muted">{$LANG.orderForm.domainAlternativeContact}</p>
306
307 <div class="row margin-bottom">
308 <div class="col-sm-6 col-sm-offset-3">
309 <select name="contact" id="inputDomainContact" class="field">
310 <option value="">{$LANG.usedefaultcontact}</option>
311 {foreach $domaincontacts as $domcontact}
312 <option value="{$domcontact.id}"{if $contact == $domcontact.id} selected{/if}>
313 {$domcontact.name}
314 </option>
315 {/foreach}
316 <option value="addingnew"{if $contact == "addingnew"} selected{/if}>
317 {$LANG.clientareanavaddcontact}...
318 </option>
319 </select>
320 </div>
321 </div>
322
323 <div class="row{if $contact neq "addingnew"} hidden{/if}" id="domainRegistrantInputFields">
324 <div class="col-sm-6">
325 <div class="form-group prepend-icon">
326 <label for="inputDCFirstName" class="field-icon">
327 <i class="fas fa-user"></i>
328 </label>
329 <input type="text" name="domaincontactfirstname" id="inputDCFirstName" class="field" placeholder="{$LANG.orderForm.firstName}" value="{$domaincontact.firstname}">
330 </div>
331 </div>
332 <div class="col-sm-6">
333 <div class="form-group prepend-icon">
334 <label for="inputDCLastName" class="field-icon">
335 <i class="fas fa-user"></i>
336 </label>
337 <input type="text" name="domaincontactlastname" id="inputDCLastName" class="field" placeholder="{$LANG.orderForm.lastName}" value="{$domaincontact.lastname}">
338 </div>
339 </div>
340 <div class="col-sm-6">
341 <div class="form-group prepend-icon">
342 <label for="inputDCEmail" class="field-icon">
343 <i class="fas fa-envelope"></i>
344 </label>
345 <input type="email" name="domaincontactemail" id="inputDCEmail" class="field" placeholder="{$LANG.orderForm.emailAddress}" value="{$domaincontact.email}">
346 </div>
347 </div>
348 <div class="col-sm-6">
349 <div class="form-group prepend-icon">
350 <label for="inputDCPhone" class="field-icon">
351 <i class="fas fa-phone"></i>
352 </label>
353 <input type="tel" name="domaincontactphonenumber" id="inputDCPhone" class="field" placeholder="{$LANG.orderForm.phoneNumber}" value="{$domaincontact.phonenumber}">
354 </div>
355 </div>
356 <div class="col-sm-12">
357 <div class="form-group prepend-icon">
358 <label for="inputDCCompanyName" class="field-icon">
359 <i class="fas fa-building"></i>
360 </label>
361 <input type="text" name="domaincontactcompanyname" id="inputDCCompanyName" class="field" placeholder="{$LANG.orderForm.companyName} ({$LANG.orderForm.optional})" value="{$domaincontact.companyname}">
362 </div>
363 </div>
364 <div class="col-sm-12">
365 <div class="form-group prepend-icon">
366 <label for="inputDCAddress1" class="field-icon">
367 <i class="far fa-building"></i>
368 </label>
369 <input type="text" name="domaincontactaddress1" id="inputDCAddress1" class="field" placeholder="{$LANG.orderForm.streetAddress}" value="{$domaincontact.address1}">
370 </div>
371 </div>
372 <div class="col-sm-12">
373 <div class="form-group prepend-icon">
374 <label for="inputDCAddress2" class="field-icon">
375 <i class="fas fa-map-marker-alt"></i>
376 </label>
377 <input type="text" name="domaincontactaddress2" id="inputDCAddress2" class="field" placeholder="{$LANG.orderForm.streetAddress2}" value="{$domaincontact.address2}">
378 </div>
379 </div>
380 <div class="col-sm-4">
381 <div class="form-group prepend-icon">
382 <label for="inputDCCity" class="field-icon">
383 <i class="far fa-building"></i>
384 </label>
385 <input type="text" name="domaincontactcity" id="inputDCCity" class="field" placeholder="{$LANG.orderForm.city}" value="{$domaincontact.city}">
386 </div>
387 </div>
388 <div class="col-sm-5">
389 <div class="form-group prepend-icon">
390 <label for="inputDCState" class="field-icon">
391 <i class="fas fa-map-signs"></i>
392 </label>
393 <input type="text" name="domaincontactstate" id="inputDCState" class="field" placeholder="{$LANG.orderForm.state}" value="{$domaincontact.state}">
394 </div>
395 </div>
396 <div class="col-sm-3">
397 <div class="form-group prepend-icon">
398 <label for="inputDCPostcode" class="field-icon">
399 <i class="fas fa-certificate"></i>
400 </label>
401 <input type="text" name="domaincontactpostcode" id="inputDCPostcode" class="field" placeholder="{$LANG.orderForm.postcode}" value="{$domaincontact.postcode}">
402 </div>
403 </div>
404 <div class="col-sm-12">
405 <div class="form-group prepend-icon">
406 <label for="inputDCCountry" class="field-icon" id="inputCountryIcon">
407 <i class="fas fa-globe"></i>
408 </label>
409 <select name="domaincontactcountry" id="inputDCCountry" class="field">
410 {foreach $countries as $countrycode => $countrylabel}
411 <option value="{$countrycode}"{if (!$domaincontact.country && $countrycode == $defaultcountry) || $countrycode eq $domaincontact.country} selected{/if}>
412 {$countrylabel}
413 </option>
414 {/foreach}
415 </select>
416 </div>
417 </div>
418 <div class="col-sm-12">
419 <div class="form-group prepend-icon">
420 <label for="inputDCTaxId" class="field-icon">
421 <i class="fas fa-building"></i>
422 </label>
423 <input type="text" name="domaincontacttax_id" id="inputDCTaxId" class="field" placeholder="{lang key=\WHMCS\Billing\Tax\Vat::getLabel()} ({$LANG.orderForm.optional})" value="{$domaincontact.tax_id}">
424 </div>
425 </div>
426 </div>
427
428 {/if}
429
430 {if !$loggedin}
431
432 <div id="containerNewUserSecurity"{if (!$loggedin && $custtype eq "existing") || ($remote_auth_prelinked && !$securityquestions) } class="hidden"{/if}>
433
434 <div class="sub-heading">
435 <span>{$LANG.orderForm.accountSecurity}</span>
436 </div>
437
438 <div id="containerPassword" class="row{if $remote_auth_prelinked && $securityquestions} hidden{/if}">
439 <div id="passwdFeedback" style="display: none;" class="alert alert-info text-center col-sm-12"></div>
440 <div class="col-sm-6">
441 <div class="form-group prepend-icon">
442 <label for="inputNewPassword1" class="field-icon">
443 <i class="fas fa-lock"></i>
444 </label>
445 <input type="password" name="password" id="inputNewPassword1" data-error-threshold="{$pwStrengthErrorThreshold}" data-warning-threshold="{$pwStrengthWarningThreshold}" class="field" placeholder="{$LANG.clientareapassword}"{if $remote_auth_prelinked} value="{$password}"{/if}>
446 </div>
447 </div>
448 <div class="col-sm-6">
449 <div class="form-group prepend-icon">
450 <label for="inputNewPassword2" class="field-icon">
451 <i class="fas fa-lock"></i>
452 </label>
453 <input type="password" name="password2" id="inputNewPassword2" class="field" placeholder="{$LANG.clientareaconfirmpassword}"{if $remote_auth_prelinked} value="{$password}"{/if}>
454 </div>
455 </div>
456 <div class="col-sm-6">
457 <button type="button" class="btn btn-default btn-sm generate-password" data-targetfields="inputNewPassword1,inputNewPassword2">
458 {$LANG.generatePassword.btnLabel}
459 </button>
460 </div>
461 <div class="col-sm-6">
462 <div class="password-strength-meter">
463 <div class="progress">
464 <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="passwordStrengthMeterBar">
465 </div>
466 </div>
467 <p class="text-center small text-muted" id="passwordStrengthTextLabel">{$LANG.pwstrength}: {$LANG.pwstrengthenter}</p>
468 </div>
469 </div>
470 </div>
471 {if $securityquestions}
472 <div class="row">
473 <div class="col-sm-6">
474 <select name="securityqid" id="inputSecurityQId" class="field">
475 <option value="">{$LANG.clientareasecurityquestion}</option>
476 {foreach $securityquestions as $question}
477 <option value="{$question.id}"{if $question.id eq $securityqid} selected{/if}>
478 {$question.question}
479 </option>
480 {/foreach}
481 </select>
482 </div>
483 <div class="col-sm-6">
484 <div class="form-group prepend-icon">
485 <label for="inputSecurityQAns" class="field-icon">
486 <i class="fas fa-lock"></i>
487 </label>
488 <input type="password" name="securityqans" id="inputSecurityQAns" class="field" placeholder="{$LANG.clientareasecurityanswer}">
489 </div>
490 </div>
491 </div>
492 {/if}
493
494 </div>
495
496 {/if}
497
498 {foreach $hookOutput as $output}
499 <div>
500 {$output}
501 </div>
502 {/foreach}
503
504 <div class="sub-heading">
505 <span>{$LANG.orderForm.paymentDetails}</span>
506 </div>
507
508 <div class="alert alert-success text-center large-text" role="alert" id="totalDueToday">
509 {$LANG.ordertotalduetoday}: <strong id="totalCartPrice">{$total}</strong>
510 </div>
511
512 <div id="applyCreditContainer" class="apply-credit-container{if !$canUseCreditOnCheckout} hidden{/if}" data-apply-credit="{$applyCredit}">
513 <p>{lang key='cart.availableCreditBalance' amount=$creditBalance}</p>
514
515 <label class="radio">
516 <input id="useCreditOnCheckout" type="radio" name="applycredit" value="1"{if $applyCredit} checked{/if}>
517 <span id="spanFullCredit"{if !($creditBalance->toNumeric() >= $total->toNumeric())} class="hidden"{/if}>
518 {lang key='cart.applyCreditAmountNoFurtherPayment' amount=$total}
519 </span>
520 <span id="spanUseCredit"{if $creditBalance->toNumeric() >= $total->toNumeric()} class="hidden"{/if}>
521 {lang key='cart.applyCreditAmount' amount=$creditBalance}
522 </span>
523 </label>
524 <label class="radio">
525 <input id="skipCreditOnCheckout" type="radio" name="applycredit" value="0"{if !$applyCredit} checked{/if}>
526 {lang key='cart.applyCreditSkip' amount=$creditBalance}
527 </label>
528 </div>
529
530 {if !$inExpressCheckout}
531 <div id="paymentGatewaysContainer" class="form-group">
532 <p class="small text-muted">{$LANG.orderForm.preferredPaymentMethod}</p>
533
534 <div class="text-center">
535 {foreach $gateways as $gateway}
536 <label class="radio-inline">
537 <input type="radio"
538 name="paymentmethod"
539 value="{$gateway.sysname}"
540 data-payment-type="{$gateway.payment_type}"
541 data-show-local="{$gateway.show_local_cards}"
542 data-remote-inputs="{$gateway.uses_remote_inputs}"
543 class="payment-methods{if $gateway.type eq "CC"} is-credit-card{/if}"
544 {if $selectedgateway eq $gateway.sysname} checked{/if}
545 />
546 {$gateway.name}
547 </label>
548 {/foreach}
549 </div>
550 </div>
551
552 <div class="alert alert-danger text-center gateway-errors hidden"></div>
553
554 <div class="clearfix"></div>
555
556 <div class="cc-input-container{if $selectedgatewaytype neq "CC"} hidden{/if}" id="creditCardInputFields">
557 {if $client}
558 <div id="existingCardsContainer" class="existing-cc-grid">
559 {include file="orderforms/standard_cart/includes/existing-paymethods.tpl"}
560 </div>
561 {/if}
562 <div class="row cvv-input" id="existingCardInfo">
563 <div class="col-lg-3 col-sm-4">
564 <div class="form-group prepend-icon">
565 <label for="inputCardCVV2" class="field-icon">
566 <i class="fas fa-barcode"></i>
567 </label>
568 <div class="input-group">
569 <input type="tel" name="cccvv" id="inputCardCVV2" class="field" placeholder="{$LANG.creditcardcvvnumbershort}" autocomplete="cc-cvc">
570 <span class="input-group-btn">
571 <button type="button" class="btn btn-default" data-toggle="popover" data-placement="bottom" data-content="<img src='{$BASE_PATH_IMG}/ccv.gif' width='210' />">
572 ?
573 </button>
574 </span>
575 </div>
576 <span class="field-error-msg">{lang key="paymentMethodsManage.cvcNumberNotValid"}</span>
577 </div>
578 </div>
579 </div>
580
581 <ul>
582 <li>
583 <label class="radio-inline">
584 <input type="radio" name="ccinfo" value="new" id="new" {if !$client || $client->payMethods->count() === 0} checked="checked"{/if} />
585
586 {lang key='creditcardenternewcard'}
587 </label>
588 </li>
589 </ul>
590
591 <div class="row" id="newCardInfo">
592 <div id="cardNumberContainer" class="col-sm-6 new-card-container">
593 <div class="form-group prepend-icon">
594 <label for="inputCardNumber" class="field-icon">
595 <i class="fas fa-credit-card"></i>
596 </label>
597 <input type="tel" name="ccnumber" id="inputCardNumber" class="field cc-number-field" placeholder="{$LANG.orderForm.cardNumber}" autocomplete="cc-number" data-message-unsupported="{lang key='paymentMethodsManage.unsupportedCardType'}" data-message-invalid="{lang key='paymentMethodsManage.cardNumberNotValid'}" data-supported-cards="{$supportedCardTypes}" />
598 <span class="field-error-msg"></span>
599 </div>
600 </div>
601 <div class="col-sm-3 new-card-container">
602 <div class="form-group prepend-icon">
603 <label for="inputCardExpiry" class="field-icon">
604 <i class="fas fa-calendar-alt"></i>
605 </label>
606 <input type="tel" name="ccexpirydate" id="inputCardExpiry" class="field" placeholder="MM / YY{if $showccissuestart} ({$LANG.creditcardcardexpires}){/if}" autocomplete="cc-exp">
607 <span class="field-error-msg">{lang key="paymentMethodsManage.expiryDateNotValid"}</span>
608 </div>
609 </div>
610 <div class="col-sm-3" id="cvv-field-container">
611 <div class="form-group prepend-icon">
612 <label for="inputCardCVV" class="field-icon">
613 <i class="fas fa-barcode"></i>
614 </label>
615 <div class="input-group">
616 <input type="tel" name="cccvv" id="inputCardCVV" class="field" placeholder="{$LANG.creditcardcvvnumbershort}" autocomplete="cc-cvc">
617 <span class="input-group-btn">
618 <button type="button" class="btn btn-default" data-toggle="popover" data-placement="bottom" data-content="<img src='{$BASE_PATH_IMG}/ccv.gif' width='210' />">
619 ?
620 </button>
621 </span><br>
622 </div>
623 <span class="field-error-msg">{lang key="paymentMethodsManage.cvcNumberNotValid"}</span>
624 </div>
625 </div>
626 {if $showccissuestart}
627 <div class="col-sm-3 col-sm-offset-6 new-card-container">
628 <div class="form-group prepend-icon">
629 <label for="inputCardStart" class="field-icon">
630 <i class="far fa-calendar-check"></i>
631 </label>
632 <input type="tel" name="ccstartdate" id="inputCardStart" class="field" placeholder="MM / YY ({$LANG.creditcardcardstart})" autocomplete="cc-exp">
633 </div>
634 </div>
635 <div class="col-sm-3 new-card-container">
636 <div class="form-group prepend-icon">
637 <label for="inputCardIssue" class="field-icon">
638 <i class="fas fa-asterisk"></i>
639 </label>
640 <input type="tel" name="ccissuenum" id="inputCardIssue" class="field" placeholder="{$LANG.creditcardcardissuenum}">
641 </div>
642 </div>
643 {/if}
644 </div>
645 <div class="row" id="newCardSaveSettings">
646 <div class="form-group new-card-container">
647 <div id="inputDescriptionContainer" class="col-md-6">
648 <div class="prepend-icon">
649 <label for="inputDescription" class="field-icon">
650 <i class="fas fa-pencil"></i>
651 </label>
652 <input type="text" class="field" id="inputDescription" name="ccdescription" autocomplete="off" value="" placeholder="{$LANG.paymentMethods.descriptionInput} {$LANG.paymentMethodsManage.optional}" />
653 </div>
654 </div>
655 {if $allowClientsToRemoveCards}
656 <div id="inputNoStoreContainer" class="col-md-6" style="line-height: 32px;">
657 <input type="hidden" name="nostore" value="1">
658 <input type="checkbox" class="toggle-switch-success no-icheck" data-size="mini" checked="checked" name="nostore" id="inputNoStore" value="0" data-on-text="{lang key='yes'}" data-off-text="{lang key='no'}">
659 <label for="inputNoStore" class="checkbox-inline no-padding">
660
661 {$LANG.creditCardStore}
662 </label>
663 </div>
664 {/if}
665 </div>
666 </div>
667 </div>
668 {else}
669 {if $expressCheckoutOutput}
670 {$expressCheckoutOutput}
671 {else}
672 <p align="center">
673 {lang key='paymentPreApproved' gateway=$expressCheckoutGateway}
674 </p>
675 {/if}
676 {/if}
677
678 {if $shownotesfield}
679
680 <div class="sub-heading">
681 <span>{$LANG.orderForm.additionalNotes}</span>
682 </div>
683
684 <div class="row">
685 <div class="col-sm-12">
686 <div class="form-group">
687 <textarea name="notes" class="field" rows="4" placeholder="{$LANG.ordernotesdescription}">{$orderNotes}</textarea>
688 </div>
689 </div>
690 </div>
691
692 {/if}
693
694 {if $showMarketingEmailOptIn}
695 <div class="marketing-email-optin">
696 <h4>{lang key='emailMarketing.joinOurMailingList'}</h4>
697 <p>{$marketingEmailOptInMessage}</p>
698 <input type="checkbox" name="marketingoptin" value="1"{if $marketingEmailOptIn} checked{/if} class="no-icheck toggle-switch-success" data-size="small" data-on-text="{lang key='yes'}" data-off-text="{lang key='no'}">
699 </div>
700 {/if}
701
702 <div class="text-center">
703 {if $accepttos}
704 <p>
705 <label class="checkbox-inline">
706 <input type="checkbox" name="accepttos" id="accepttos" />
707
708 {$LANG.ordertosagreement}
709 <a href="{$tosurl}" target="_blank">{$LANG.ordertos}</a>
710 </label>
711 </p>
712 {/if}
713 {if $captcha}
714 <div class="text-center margin-bottom">
715 {include file="$template/includes/captcha.tpl"}
716 </div>
717 {/if}
718
719 <button type="submit"
720 id="btnCompleteOrder"
721 class="btn btn-primary btn-lg disable-on-click spinner-on-click{if $captcha}{$captcha->getButtonClass($captchaForm)}{/if}"
722 {if $cartitems==0}disabled="disabled"{/if}
723 >
724 {if $inExpressCheckout}{$LANG.confirmAndPay}{else}{$LANG.completeorder}{/if}
725 <i class="fas fa-arrow-circle-right"></i>
726 </button>
727 </div>
728 </form>
729
730 {if $servedOverSsl}
731 <div class="alert alert-warning checkout-security-msg">
732 <i class="fas fa-lock"></i>
733 {$LANG.ordersecure} (<strong>{$ipaddress}</strong>) {$LANG.ordersecure2}
734 <div class="clearfix"></div>
735 </div>
736 {/if}
737
738 </div>
739 </div>
740</div>
741
742<script type="text/javascript" src="{$BASE_PATH_JS}/jquery.payment.js"></script>
743