<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-md-6 offset-md-3">
<span class="anchor" id="formPayment"></span>
<hr class="my-5">
<div class="card card-outline-secondary">
<div class="card-body">
<h3 class="text-center">Credit Card Payment</h3>
<hr>
<div class="alert alert-info p-2 pb-3">
<a class="close font-weight-normal initialism" data-dismiss="alert" href="#"><samp>×</samp></a>
CVC code is required.
</div>
<form class="form" role="form" autocomplete="off">
<div class="form-group">
<label for="cc_name">Card Holder's Name</label>
<input type="text" class="form-control" id="cc_name" pattern="\w+ \w+.*" title="First and last name" required="required">
</div>
<div class="form-group">
<label>Card Number</label>
<input type="text" class="form-control" autocomplete="off" maxlength="20" pattern="\d{16}" title="Credit card number" required="">
</div>
<div class="form-group row">
<label class="col-md-12">Card Exp. Date</label>
<div class="col-md-4">
<select class="form-control" name="cc_exp_mo" size="0">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>