mirror of
https://github.com/invoiceninja/invoiceninja.git
synced 2025-06-21 18:10:57 -04:00
Redesign of the payment page
This commit is contained in:
Hillel Coren
parent
fd99dd122c
commit
c357f4a278
@ -46,30 +46,9 @@
|
||||
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
@include('script')
|
||||
|
||||
var currencies = {{ Currency::remember(120)->get(); }};
|
||||
var currencyMap = {};
|
||||
for (var i=0; i<currencies.length; i++) {
|
||||
var currency = currencies[i];
|
||||
currencyMap[currency.id] = currency;
|
||||
}
|
||||
var NINJA = NINJA || {};
|
||||
@if (Auth::check())
|
||||
NINJA.primaryColor = "{{ Auth::user()->account->primary_color }}";
|
||||
NINJA.secondaryColor = "{{ Auth::user()->account->secondary_color }}";
|
||||
@endif
|
||||
NINJA.parseFloat = function(str) {
|
||||
if (!str) return '';
|
||||
str = (str+'').replace(/[^0-9\.\-]/g, '');
|
||||
return window.parseFloat(str);
|
||||
}
|
||||
function formatMoney(value, currency_id, hide_symbol) {
|
||||
value = NINJA.parseFloat(value);
|
||||
if (!currency_id) currency_id = {{ Session::get(SESSION_CURRENCY, DEFAULT_CURRENCY); }};
|
||||
var currency = currencyMap[currency_id];
|
||||
return accounting.formatMoney(value, hide_symbol ? '' : currency.symbol, currency.precision, currency.thousand_separator, currency.decimal_separator);
|
||||
}
|
||||
<script type="text/javascript">
|
||||
|
||||
/* Set the defaults for DataTables initialisation */
|
||||
$.extend( true, $.fn.dataTable.defaults, {
|
||||
|
||||
@ -1,29 +1,48 @@
|
||||
@extends('header')
|
||||
@extends('public.header')
|
||||
|
||||
@section('head')
|
||||
@parent
|
||||
|
||||
@include('script')
|
||||
|
||||
<link href="{{ asset('vendor/bootstrap/dist/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css"/>
|
||||
|
||||
<script src="{{ asset('js/pdf_viewer.js') }}" type="text/javascript"></script>
|
||||
<script src="{{ asset('js/compatibility.js') }}" type="text/javascript"></script>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
</style>
|
||||
@stop
|
||||
|
||||
@section('content')
|
||||
|
||||
@if ($invoice->client->account->isGatewayConfigured() && !$invoice->isPaid())
|
||||
<div class="pull-right" style="width:270px">
|
||||
{{ Button::normal(trans('texts.download_pdf'), array('onclick' => 'onDownloadClick()', 'class' => 'btn-lg')) }}
|
||||
{{ Button::primary_link(URL::to('payment/' . $invitation->invitation_key), trans('texts.pay_now'), array('class' => 'btn-lg pull-right')) }}
|
||||
</div>
|
||||
@else
|
||||
<div class="pull-right">
|
||||
{{ Button::primary('Download PDF', array('onclick' => 'onDownloadClick()', 'class' => 'btn-lg')) }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="clearfix"></div><p> </p>
|
||||
<div class="container">
|
||||
|
||||
<iframe id="theFrame" frameborder="1" width="100%" height="1180" style="display:none;margin: 0 auto"></iframe>
|
||||
<canvas id="theCanvas" style="display:none;width:100%;border:solid 1px #CCCCCC;"></canvas>
|
||||
<p> </p>
|
||||
|
||||
@if ($invoice->client->account->isGatewayConfigured() && !$invoice->isPaid())
|
||||
<div class="pull-right" style="width:270px">
|
||||
{{ Button::normal(trans('texts.download_pdf'), array('onclick' => 'onDownloadClick()', 'class' => 'btn-lg')) }}
|
||||
{{ Button::success_link(URL::to('payment/' . $invitation->invitation_key), trans('texts.pay_now'), array('class' => 'btn-lg pull-right')) }}
|
||||
</div>
|
||||
@else
|
||||
<div class="pull-right">
|
||||
{{ Button::primary('Download PDF', array('onclick' => 'onDownloadClick()', 'class' => 'btn-lg')) }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="clearfix"></div><p> </p>
|
||||
|
||||
<iframe id="theFrame" frameborder="1" width="100%" height="1180" style="display:none;margin: 0 auto"></iframe>
|
||||
<canvas id="theCanvas" style="display:none;width:100%;border:solid 1px #CCCCCC;"></canvas>
|
||||
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
@ -1,86 +1,173 @@
|
||||
@extends('header')
|
||||
@extends('public.header')
|
||||
|
||||
@section('content')
|
||||
|
||||
<style type="text/css">
|
||||
<style type="text/css">
|
||||
div > label.control-label
|
||||
{
|
||||
font-weight: bold !important;
|
||||
/* text-transform:uppercase; */
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
{{ Former::vertical_open('payment/' . $invitationKey)->rules(array(
|
||||
'first_name' => 'required',
|
||||
'last_name' => 'required',
|
||||
'card_number' => 'required',
|
||||
'expiration_month' => 'required',
|
||||
'expiration_year' => 'required',
|
||||
'cvv' => 'required',
|
||||
'address1' => 'required',
|
||||
'city' => 'required',
|
||||
'state' => 'required',
|
||||
'postal_code' => 'required',
|
||||
'country' => 'required',
|
||||
'phone' => 'required',
|
||||
'email' => 'required'
|
||||
)) }}
|
||||
{{ Former::vertical_open('payment/' . $invitationKey)->rules(array(
|
||||
'first_name' => 'required',
|
||||
'last_name' => 'required',
|
||||
'card_number' => 'required',
|
||||
'expiration_month' => 'required',
|
||||
'expiration_year' => 'required',
|
||||
'cvv' => 'required',
|
||||
'address1' => 'required',
|
||||
'city' => 'required',
|
||||
'state' => 'required',
|
||||
'postal_code' => 'required',
|
||||
'country' => 'required',
|
||||
'phone' => 'required',
|
||||
'email' => 'required'
|
||||
)) }}
|
||||
|
||||
{{ Former::populate($client) }}
|
||||
{{ Former::populateField('first_name', $contact->first_name) }}
|
||||
{{ Former::populateField('last_name', $contact->last_name) }}
|
||||
|
||||
<p> <p/>
|
||||
<p> <p/>
|
||||
{{ Former::populate($client) }}
|
||||
{{ Former::populateField('first_name', $contact->first_name) }}
|
||||
{{ Former::populateField('last_name', $contact->last_name) }}
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6" style="padding-top:16px">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
{{ Former::text('first_name') }}
|
||||
<section class="hero background hero-secure center" data-speed="2" data-type="background">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<h1>Secure Payment</h1>
|
||||
<p class="thin"><img src="{{ asset('images/icon-secure-pay.png') }}">256-BiT Encryption</p>
|
||||
<!-- <img src="{{ asset('images/providers.png') }}"> -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="secure">
|
||||
<div class="container">
|
||||
<div id="secure-form" class="row">
|
||||
<div class="col-md-7 info">
|
||||
<form>
|
||||
<div class="row">
|
||||
<div class="form-group col-md-6">
|
||||
{{ Former::text('first_name') }}
|
||||
</div>
|
||||
<div class="form-group col-md-6">
|
||||
{{ Former::text('last_name') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="form-group col-md-12">
|
||||
{{ Former::text('address1')->label('Street') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="form-group col-md-3">
|
||||
{{ Former::text('address2')->label('Apt/Suite') }}
|
||||
</div>
|
||||
|
||||
<div class="form-group col-md-3">
|
||||
{{ Former::text('city') }}
|
||||
</div>
|
||||
|
||||
<div class="form-group col-md-3">
|
||||
{{ Former::text('state')->label('State/Province') }}
|
||||
</div>
|
||||
|
||||
<div class="form-group col-md-3">
|
||||
{{ Former::text('postal_code') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
{{ Former::text('last_name') }}
|
||||
|
||||
|
||||
@if(strtolower($gateway->name) == 'beanstream')
|
||||
<div class="row">
|
||||
<div class="form-group col-md-4">
|
||||
{{ Former::text('phone') }}
|
||||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
{{ Former::text('email') }}
|
||||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
{{ Former::select('country')->addOption('','')->label('Country')
|
||||
->fromQuery($countries, 'name', 'iso_3166_2') }}
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
|
||||
<div class="col-md-5">
|
||||
<div class="card">
|
||||
<div class="row">
|
||||
<div class="form-group col-md-12">
|
||||
{{ Former::text('card_number') }}
|
||||
<!-- <span class="glyphicon glyphicon-lock"></span> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="form-group col-md-6">
|
||||
{{ Former::select('expiration_month')->addOption('','')
|
||||
->addOption('01 - January', '1')
|
||||
->addOption('02 - February', '2')
|
||||
->addOption('03 - March', '3')
|
||||
->addOption('04 - April', '4')
|
||||
->addOption('05 - May', '5')
|
||||
->addOption('06 - June', '6')
|
||||
->addOption('07 - July', '7')
|
||||
->addOption('08 - August', '8')
|
||||
->addOption('09 - September', '9')
|
||||
->addOption('10 - October', '10')
|
||||
->addOption('11 - November', '11')
|
||||
->addOption('12 - December', '12')
|
||||
}}
|
||||
|
||||
</div>
|
||||
<div class="form-group col-md-6">
|
||||
{{ Former::select('expiration_year')->addOption('','')
|
||||
->addOption('2014', '2014')
|
||||
->addOption('2015', '2015')
|
||||
->addOption('2016', '2016')
|
||||
->addOption('2017', '2017')
|
||||
->addOption('2018', '2018')
|
||||
->addOption('2019', '2019')
|
||||
->addOption('2020', '2020')
|
||||
}}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="form-group col-md-6">
|
||||
{{ Former::text('cvv') }}
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<!-- <p><span class="glyphicon glyphicon-credit-card" style="margin-right: 10px;"></span><a href="#">Where Do I find CVV?</a></p> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
{{ Former::text('address1')->label('Street') }}
|
||||
{{ Button::block_primary_submit_lg(strtoupper(trans('texts.pay_now')) . ' - ' . Utils::formatMoney($invoice->amount, $client->currency_id) ) }}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
{{ Former::text('address2')->label('Apt/Suite') }}
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
{{ Former::text('city') }}
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
{{ Former::text('state')->label('State/Province') }}
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
{{ Former::text('postal_code') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if(strtolower($gateway->name) == 'beanstream')
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
{{ Former::text('phone') }}
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
{{ Former::text('email') }}
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
{{ Former::select('country')->addOption('','')->label('Country')
|
||||
->fromQuery($countries, 'name', 'iso_3166_2') }}
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
</div>
|
||||
|
||||
<div class="col-md-5 col-md-offset-1" style="background-color:#DDD;padding-top:16px">
|
||||
@ -94,31 +181,8 @@
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
{{ Former::select('expiration_month')->addOption('','')
|
||||
->addOption('01 - January', '1')
|
||||
->addOption('02 - February', '2')
|
||||
->addOption('03 - March', '3')
|
||||
->addOption('04 - April', '4')
|
||||
->addOption('05 - May', '5')
|
||||
->addOption('06 - June', '6')
|
||||
->addOption('07 - July', '7')
|
||||
->addOption('08 - August', '8')
|
||||
->addOption('09 - September', '9')
|
||||
->addOption('10 - October', '10')
|
||||
->addOption('11 - November', '11')
|
||||
->addOption('12 - December', '12')
|
||||
}}
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
{{ Former::select('expiration_year')->addOption('','')
|
||||
->addOption('2014', '2014')
|
||||
->addOption('2015', '2015')
|
||||
->addOption('2016', '2016')
|
||||
->addOption('2017', '2017')
|
||||
->addOption('2018', '2018')
|
||||
->addOption('2019', '2019')
|
||||
->addOption('2020', '2020')
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -143,11 +207,11 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
-->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{{ Former::close() }}
|
||||
{{ Former::close() }}
|
||||
|
||||
@stop
|
||||
@ -93,8 +93,7 @@
|
||||
<div class="navbar" style="margin-bottom:0px">
|
||||
<div class="container">
|
||||
<div class="navbar-inner">
|
||||
<a class="brand" href="{{ URL::to('/') }}"><img src=
|
||||
"images/invoiceninja-logo.png"></a>
|
||||
<a class="brand" href="{{ URL::to('/') }}"><img src="{{ asset('images/invoiceninja-logo.png') }}"></a>
|
||||
<ul class="navbar-list">
|
||||
<!-- <li>{{ link_to('features', 'Features' ) }}</li> -->
|
||||
<!-- <li>{{ link_to('faq', 'FAQ' ) }}</li> -->
|
||||
@ -112,7 +111,6 @@
|
||||
@yield('content')
|
||||
|
||||
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
@ -213,9 +211,11 @@
|
||||
</footer>
|
||||
|
||||
<script type="text/javascript">
|
||||
jQuery(document).ready(function($) {
|
||||
$('.valign').vAlign();
|
||||
|
||||
jQuery(document).ready(function($) {
|
||||
$('.valign').vAlign();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<!--
|
||||
|
||||
26
app/views/script.blade.php
Normal file
26
app/views/script.blade.php
Normal file
@ -0,0 +1,26 @@
|
||||
<script type="text/javascript">
|
||||
|
||||
var currencies = {{ Currency::remember(120)->get(); }};
|
||||
var currencyMap = {};
|
||||
for (var i=0; i<currencies.length; i++) {
|
||||
var currency = currencies[i];
|
||||
currencyMap[currency.id] = currency;
|
||||
}
|
||||
var NINJA = NINJA || {};
|
||||
@if (Auth::check())
|
||||
NINJA.primaryColor = "{{ Auth::user()->account->primary_color }}";
|
||||
NINJA.secondaryColor = "{{ Auth::user()->account->secondary_color }}";
|
||||
@endif
|
||||
NINJA.parseFloat = function(str) {
|
||||
if (!str) return '';
|
||||
str = (str+'').replace(/[^0-9\.\-]/g, '');
|
||||
return window.parseFloat(str);
|
||||
}
|
||||
function formatMoney(value, currency_id, hide_symbol) {
|
||||
value = NINJA.parseFloat(value);
|
||||
if (!currency_id) currency_id = {{ Session::get(SESSION_CURRENCY, DEFAULT_CURRENCY); }};
|
||||
var currency = currencyMap[currency_id];
|
||||
return accounting.formatMoney(value, hide_symbol ? '' : currency.symbol, currency.precision, currency.thousand_separator, currency.decimal_separator);
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -3,127 +3,127 @@
|
||||
@section('content')
|
||||
|
||||
<section class="hero background hero-secure center" data-speed="2" data-type="background">
|
||||
<div class="container">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<h1>Secure Payment</h1>
|
||||
<p class="thin"><img src="{{ asset('images/icon-secure-pay.png') }}">256-BiT Encryption</p>
|
||||
<img src="{{ asset('images/providers.png') }}">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<h1>Secure Payment</h1>
|
||||
<p class="thin"><img src="{{ asset('images/icon-secure-pay.png') }}">256-BiT Encryption</p>
|
||||
<img src="{{ asset('images/providers.png') }}">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="secure">
|
||||
<div class="container">
|
||||
<div id="secure-form" class="row">
|
||||
<div class="col-md-7 info">
|
||||
<div class="col-md-7 info">
|
||||
<form>
|
||||
<div class="row">
|
||||
<div class="form-group col-md-6">
|
||||
<label for="firstname">First Name</label>
|
||||
<input type="text" class="form-control" id="firstname" name="firstname">
|
||||
<span class="help-block" style="display: none;">Please enter your first name.</span>
|
||||
|
||||
</div>
|
||||
<div class="form-group col-md-6">
|
||||
<label for="lastname">Last name</label>
|
||||
<input type="text" class="form-control" id="lastname" name="lastname">
|
||||
<span class="help-block" style="display: none;">Please enter your last name.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="form-group col-md-12">
|
||||
<label for="streetadress">Street Address</label>
|
||||
<input type="text" class="form-control" id="streetadress" name="streetadress">
|
||||
<span class="help-block" style="display: none;">Please enter addess.</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="form-group col-md-3">
|
||||
<label for="apt">Apt/Ste</label>
|
||||
<input type="text" class="form-control" id="apt" name="apt">
|
||||
<span class="help-block" style="display: none;">Please enter your Apt/Ste.</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group col-md-3">
|
||||
<label for="apt">City</label>
|
||||
<input type="text" class="form-control" id="city" name="city">
|
||||
<span class="help-block" style="display: none;">Please enter your city.</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group col-md-3">
|
||||
<label for="apt">State/Province</label>
|
||||
<input type="text" class="form-control" id="state" name="state">
|
||||
<span class="help-block" style="display: none;">Please enter your State/Province.</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group col-md-3">
|
||||
<label for="apt">Postal Code</label>
|
||||
<input type="text" class="form-control" id="postal" name="postal">
|
||||
<span class="help-block" style="display: none;">Please enter your Postal Code.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<div class="card">
|
||||
<div class="row">
|
||||
<div class="form-group col-md-12">
|
||||
<label for="streetadress">Card number</label>
|
||||
<input type="text" class="form-control with-icon" id="cardnumber" name="cardnumber">
|
||||
<span class="glyphicon glyphicon-lock"></span>
|
||||
<span class="help-block" style="display: none;">Please enter your card number.</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="form-group col-md-6">
|
||||
<label for="firstname">Expiration Month</label>
|
||||
<select class="form-control" id="month" name="month">
|
||||
<option>January</option>
|
||||
</select>
|
||||
<span class="help-block" style="display: none;">Please select the month.</span>
|
||||
|
||||
</div>
|
||||
<div class="form-group col-md-6">
|
||||
<label for="firstname">Expiration year</label>
|
||||
<select class="form-control" id="year" name="year">
|
||||
<option>2016</option>
|
||||
</select>
|
||||
<span class="help-block" style="display: none;">Please select the year.</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="form-group col-md-6">
|
||||
<label for="apt">CVV</label>
|
||||
<input type="text" class="form-control" id="cvv" name="cvv">
|
||||
<span class="help-block" style="display: none;">Please enter the CVV.</span>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<p><span class="glyphicon glyphicon-credit-card" style="margin-right: 10px;"></span><a href="#">Where Do I find CVV?</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<button type="submit" id="feedbackSubmit" class="btn btn-primary btn-lg green">PAY NOW - $2.00</button>
|
||||
<div class="form-group col-md-6">
|
||||
<label for="firstname">First Name</label>
|
||||
<input type="text" class="form-control" id="firstname" name="firstname">
|
||||
<span class="help-block" style="display: none;">Please enter your first name.</span>
|
||||
|
||||
</div>
|
||||
<div class="form-group col-md-6">
|
||||
<label for="lastname">Last name</label>
|
||||
<input type="text" class="form-control" id="lastname" name="lastname">
|
||||
<span class="help-block" style="display: none;">Please enter your last name.</span>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="form-group col-md-12">
|
||||
<label for="streetadress">Street Address</label>
|
||||
<input type="text" class="form-control" id="streetadress" name="streetadress">
|
||||
<span class="help-block" style="display: none;">Please enter addess.</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="form-group col-md-3">
|
||||
<label for="apt">Apt/Ste</label>
|
||||
<input type="text" class="form-control" id="apt" name="apt">
|
||||
<span class="help-block" style="display: none;">Please enter your Apt/Ste.</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group col-md-3">
|
||||
<label for="apt">City</label>
|
||||
<input type="text" class="form-control" id="city" name="city">
|
||||
<span class="help-block" style="display: none;">Please enter your city.</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group col-md-3">
|
||||
<label for="apt">State/Province</label>
|
||||
<input type="text" class="form-control" id="state" name="state">
|
||||
<span class="help-block" style="display: none;">Please enter your State/Province.</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group col-md-3">
|
||||
<label for="apt">Postal Code</label>
|
||||
<input type="text" class="form-control" id="postal" name="postal">
|
||||
<span class="help-block" style="display: none;">Please enter your Postal Code.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<div class="card">
|
||||
<div class="row">
|
||||
<div class="form-group col-md-12">
|
||||
<label for="streetadress">Card number</label>
|
||||
<input type="text" class="form-control with-icon" id="cardnumber" name="cardnumber">
|
||||
<span class="glyphicon glyphicon-lock"></span>
|
||||
<span class="help-block" style="display: none;">Please enter your card number.</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="form-group col-md-6">
|
||||
<label for="firstname">Expiration Month</label>
|
||||
<select class="form-control" id="month" name="month">
|
||||
<option>January</option>
|
||||
</select>
|
||||
<span class="help-block" style="display: none;">Please select the month.</span>
|
||||
|
||||
</div>
|
||||
<div class="form-group col-md-6">
|
||||
<label for="firstname">Expiration year</label>
|
||||
<select class="form-control" id="year" name="year">
|
||||
<option>2016</option>
|
||||
</select>
|
||||
<span class="help-block" style="display: none;">Please select the year.</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="form-group col-md-6">
|
||||
<label for="apt">CVV</label>
|
||||
<input type="text" class="form-control" id="cvv" name="cvv">
|
||||
<span class="help-block" style="display: none;">Please enter the CVV.</span>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<p><span class="glyphicon glyphicon-credit-card" style="margin-right: 10px;"></span><a href="#">Where Do I find CVV?</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<button type="submit" id="feedbackSubmit" class="btn btn-primary btn-lg green">PAY NOW - $2.00</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user