<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="container py-3">
<div class="row">
<div class="col-12 col-sm-8 col-md-6 mx-auto">
<div id="pay-invoice" class="card">
<div class="card-body">
<div class="card-title">
<h2 class="text-center">Pay Invoice</h2>
</div>
<hr>
<form action="" method="post" novalidate="novalidate">
<input type="hidden" id="x_first_name" name="x_first_name" value="">
<input type="hidden" id="x_last_name" name="x_last_name" value="">
<input type="hidden" id="x_card_num" name="x_card_num" value="">
<input type="hidden" id="x_exp_date" name="x_exp_date" value="">
<div class="form-group text-center">
<ul class="list-inline">
<li class="list-inline-item"><i class="text-muted fa fa-cc-visa fa-2x"></i></li>
<li class="list-inline-item"><i class="fa fa-cc-mastercard fa-2x"></i></li>
<li class="list-inline-item"><i class="fa fa-cc-amex fa-2x"></i></li>
<li class="list-inline-item"><i class="fa fa-cc-discover fa-2x"></i></li>
</ul>
</div>
<div class="form-group">
<label>Payment amount</label>
<h2>$100.00</h2>
</div>
<div class="form-group has-success">
<label for="cc-name" class="control-label">Name on card</label>
<input id="cc-name" name="cc-name" type="text" class="form-control cc-name valid" data-val="true" data-val-required="Please enter the name on card" autocomplete="cc-name" aria-required="true" aria-invalid="false" aria-describedby="cc-name-error">
<span class="help-block field-validation-valid" data-valmsg-for="cc-name" data-valmsg-replace="true"></span>
</div>
<div class="form-group">
