/home/smartonegroup/public_html/system/ui/theme/default/stripe.tpl
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{$_L['INVOICE']} - {$d['id']}</title>
<link href="{$_theme}/css/bootstrap.min.css" rel="stylesheet">
<link href="{$_theme}/lib/fa/css/font-awesome.min.css" rel="stylesheet">
<link href="{$_theme}/lib/icheck/skins/all.css" rel="stylesheet">
<link href="{$_theme}/css/style.css" rel="stylesheet">
<link href="{$_theme}/css/custom.css" rel="stylesheet">
{if $config['rtl'] eq '1'}
<link href="{$_theme}/css/bootstrap-rtl.min.css" rel="stylesheet">
<link href="{$_theme}/css/style-rtl.min.css" rel="stylesheet">
{/if}
{if isset($xheader)}
{$xheader}
{/if}
<style type="text/css">
body {
background-color: #FAFAFA;
overflow-x: visible;
}
.paper {
margin: 50px auto;
border: 2px solid #DDD;
background-color: #FFF;
position: relative;
width: 450px;
}
/* CSS for Credit Card Payment form */
.credit-card-box .panel-title {
display: inline;
font-weight: bold;
}
.credit-card-box .form-control.error {
border-color: red;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(255,0,0,0.6);
}
.credit-card-box label.error {
font-weight: bold;
color: red;
padding: 2px 8px;
margin-top: 2px;
}
.credit-card-box .payment-errors {
font-weight: bold;
color: red;
padding: 2px 8px;
margin-top: 2px;
}
.credit-card-box label {
display: block;
}
/* The old "center div vertically" hack */
.credit-card-box .display-table {
display: table;
}
.credit-card-box .display-tr {
display: table-row;
}
.credit-card-box .display-td {
display: table-cell;
vertical-align: middle;
width: 50%;
}
/* Just looks nicer */
.credit-card-box .panel-heading img {
min-width: 180px;
}
</style>
</head>
<body class="fixed-nav">
<div class="paper">
<section class="panel">
<div class="panel-container">
<div class="invoice">
{if isset($notify)}
{$notify}
{/if}
<header class="clearfix">
<div class="row">
<div class="col-sm-6 mt-md">
<h2 class="h2 mt-none mb-sm text-dark text-bold">{$_L['INVOICE']}</h2>
<h4 class="h4 m-none text-dark text-bold">#{$d['invoicenum']}{if $d['cn'] neq ''} {$d['cn']} {else} {$d['id']} {/if}</h4>
</div>
<div class="col-sm-6 text-end mt-md mb-md">
{if $d->currency_symbol == ''}
<h3>{$_L['Total Amount']}: {$config['currency_code']} {number_format($d['total'],2,$config['dec_point'],$config['thousands_sep'])}</h3>
{else}
<h3>{$_L['Total Amount']}: {$d->currency_symbol} {number_format($d['total'],2,$config['dec_point'],$config['thousands_sep'])}</h3>
{/if}
<a href="{$_url}client/iview/{$d['id']}/token_{$d['vtoken']}" class="btn btn-xs btn-danger"><i class="fal fa-long-arrow-left"></i> Cancel Payment</a>
</div>
</div>
</header>
<div class="bill-info">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default credit-card-box">
<div class="panel-heading display-table" >
<div class="row display-tr" >
<h3 class="panel-title display-td" >Payment Details</h3>
<div class="display-td" >
<img class="img-responsive pull-right" src="{$app_url}ui/lib/img/credit-cards.png">
</div>
</div>
</div>
<div class="panel-container">
<div class="panel-content">
<form role="form" id="payment-form" method="post" action="{$_url}client/ipay/{$d['id']}/token_{$d['vtoken']}/">
<div class="row">
<div class="col-xs-12">
<div class="mb-3">
<label for="cardNumber">CARD NUMBER</label>
<div class="input-group">
<input
type="tel"
class="form-control"
name="cardNumber"
placeholder="Valid Card Number"
autocomplete="cc-number"
required autofocus
/>
<span class="input-group-addon"><i class="fal fa-credit-card"></i></span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-7 col-md-7">
<div class="mb-3">
<label for="cardExpiry"><span class="hidden-xs">EXPIRATION</span><span class="visible-xs-inline">EXP</span> DATE</label>
<input
type="tel"
class="form-control"
name="cardExpiry"
placeholder="MM / YY"
autocomplete="cc-exp"
required
/>
</div>
</div>
<div class="col-xs-5 col-md-5 pull-right">
<div class="mb-3">
<label for="cardCVC">CV CODE</label>
<input
type="tel"
class="form-control"
name="cardCVC"
placeholder="CVC"
autocomplete="cc-csc"
required
/>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<input type="hidden" name="pg" value="stripe_post">
<button class="btn btn-success btn-lg btn-block" type="submit"><i class="fal fa-check"></i> Make Payment</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Mainly scripts -->
<script src="{$_theme}/js/jquery-1.10.2.js"></script>
<script src="{$_theme}/js/jquery-ui-1.10.4.min.js"></script>
<script>
var _L = [];
var config_animate = 'No';
{if ($config['animate']) eq '1'}
var config_animate = 'Yes';
{/if}
{$jsvar}
</script>
<script src="{$_theme}/js/bootstrap.min.js"></script>
<script src="{$_theme}/js/jquery.metisMenu.js"></script>
<script src="{$_theme}/js/jquery.slimscroll.min.js"></script>
<!-- Custom and plugin javascript -->
<script src="{$_theme}/lib/moment.js"></script>
<script src="{$_theme}/js/app.js"></script>
<script src="{$_theme}/js/pace.min.js"></script>
<script src="{$_theme}/lib/progress.js"></script>
<script src="{$_theme}/lib/bootbox.min.js"></script>
<!-- iCheck -->
<script src="{$_theme}/lib/icheck/icheck.min.js"></script>
{if isset($xfooter)}
{$xfooter}
{/if}
<script>
jQuery(document).ready(function() {
// initiate layout and plugins
{if isset($xjq)}
{$xjq}
{/if}
});
</script>
</body>
</html>
