<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html>
<head>
<title>
Checkout Page
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Simon) Seunghyun Mun">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
<!--<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css'>-->
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/jvectormap/2.0.4/jquery-jvectormap.min.css'>
<link rel="stylesheet" href="./ordering-page/main/css/ordering-page.css">
</head>
<body style="font-family: 'Open Sans', sans-serif;">
<div class="container">
<div class="centered title">
<h1>Check Out</h1>
</div>
</div>
<hr class="featurette-divider"></hr>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="tab-content">
<div id="stripe" class="tab-pane fade in active">
<script src='https://js.stripe.com/v2/' type='text/javascript'></script>
<form accept-charset="UTF-8" action="/" class="require-validation" data-cc-on-file="false" data-stripe-publishable-key="pk_bQQaTxnaZlzv4FnnuZ28LFHccVSaj" id="payment-form" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓" />
<input name="_method" type="hidden" value="PUT" />
<input name="authenticity_token" type="hidden" value="qLZ9cScer7ZxqulsUWazw4x3cSEzv899SP/7ThPCOV8=" />
</div>
<br>
<div class='form-row'>
<div class='form-group required'>
<div class='error form-group hide'>
<div class='alert-danger alert'>
Please correct the errors and try again.
</div>
</div>
<label class='control-label'>Name on Card</label>
<input class='form-control' size='4' type='text'>
</div>
</div>
<div class='form-row'>
<div class='form-group card required'>
<label class='control-label'>Card Number</label>
<input autocomplete='off' class='form-control card-number' size='20' type='text'>
</div>
</div>
<div class='form-row'>
<div class='form-group card required'>
<label class='control-label'>Billing Address</label>
<input autocomplete='off' class='form-control' size='20' type='text'>
</div>
</div>
<div class='form-row'>
<div class='form-group cvc required'>
<label class='control-label'>CVC</label>
<input autocomplete='off' class='form-control card-cvc' placeholder='ex. 111' size='4' type="password" name="psw">
</div>
<div class='form-group expiration required'>
<label class='control-label'>Expiration</label>
<input class='form-control card-expiry-month' placeholder='MM' size='2' type='text'>
</div>
<div class='form-group expiration required'>
<label class='control-label'>Year</label>
<input class='form-control card-expiry-year' placeholder='YYYY' size='4' type='text'>
</div>
</div>
<div class='form-row'>
<div class='form-group'>
<button class='form-control btn btn-primary submit-button' type='submit'>Pay & Continue →</button>
</div>
</div>
<div class='form-row'>
<div class='error form-group hide'>
<div class='alert-danger alert'>
Please fill in the forms properly and try again.
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="col-sm-6">
<a class="rad-menu-item" href="#">
<i class="fa fa-shopping-cart" style="font-size:20px;" >
<sm-text> Your Order:</sm-text>
<span class="rad-menu-badge">2 <!-- Number of orders--> </span>
</i>
</a>
<hr class="featurette-divider"></hr>
<a href="#">
<div class="pull-left">
<img class="md-img" src="" alt="food photo" />
</div>
<div class="rad-notification-body">
<div class="lg-stext">
Spicy Korean Ramen
</div>
<div class="sm-text ">
Hot Korean spicy ramen with beef and vegetables on top
</div> <!-- Brief description of the food -->
<em class="pull-left sm-text">
<img class="icon icons8-Chef-Hat" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABqUlEQVRoQ+2Z0VHDMBBEXyoBKoB0AB1ABdABUEmgA+iADqADoAKgg3QAsxl7yGRs63Q64jGWvvKhlXdv706nyYKJr8XE+VMFjO3gXzhwCFwD54B+a30CL8A98BYpOlrACrhJEHwAboF1hJBIAa/AiZGUXDiLEBEl4K5JGyP/zbYn4CIH0LU3QsAp8OwkIhdUG+4VIUA5felk8AhcObEbmEdA22UUeWvOpziqJtoupY5lXrkCLF3G/PGejaondSnTyhGQ02VMHx/YJDdUH8llFeDpMsmPJzbo0kvdKaYaUM5/lLJx4o+aW7wXbnFgjOi3hJMuWATsM/d3I63utBxyzyLg22l/FGyQ4ywE6GI5iApn5jlfWyN5J9TiwOSLePJtVNaN4UKyheYOc2ppx5k57N3+bh0ULTWwTWIfTpgi35LKFSCcxmjN8N43QJ8rehsoQFmPfo+AlkD0Befi4gI1CqqAnVxyBdMFqg50l7ErmC5QdaA68BuBmkLeYacD5wqmCxRIuvioKqA4hIUHzNqBOszVYc75B8e/edAU9o8Y+Ky7UEwIC0+ZvAM/FUk/MWkrp5YAAAAASUVORK5CYII=" width="18" height="18">
Chef Mun
</em>
<em class="pull-right sm-text">
<i class="fa fa-clock-o"></i> 30 min
</em>
</div>
</a>
<br><br>
<a href="#">
<div class="pull-left">
<img class="md-img" src="" alt="food photo" />
</div>
<div class="rad-notification-body">
<div class="lg-stext">
Fried Chicken
</div>
<div class="sm-text ">
So raw, skilled vet can make it breathe again
</div> <!-- Brief description of the food -->
<em class="pull-left sm-text">
<img class="icon icons8-Chef-Hat" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABqUlEQVRoQ+2Z0VHDMBBEXyoBKoB0AB1ABdABUEmgA+iADqADoAKgg3QAsxl7yGRs63Q64jGWvvKhlXdv706nyYKJr8XE+VMFjO3gXzhwCFwD54B+a30CL8A98BYpOlrACrhJEHwAboF1hJBIAa/AiZGUXDiLEBEl4K5JGyP/zbYn4CIH0LU3QsAp8OwkIhdUG+4VIUA5felk8AhcObEbmEdA22UUeWvOpziqJtoupY5lXrkCLF3G/PGejaondSnTyhGQ02VMHx/YJDdUH8llFeDpMsmPJzbo0kvdKaYaUM5/lLJx4o+aW7wXbnFgjOi3hJMuWATsM/d3I63utBxyzyLg22l/FGyQ4ywE6GI5iApn5jlfWyN5J9TiwOSLePJtVNaN4UKyheYOc2ppx5k57N3+bh0ULTWwTWIfTpgi35LKFSCcxmjN8N43QJ8rehsoQFmPfo+AlkD0Befi4gI1CqqAnVxyBdMFqg50l7ErmC5QdaA68BuBmkLeYacD5wqmCxRIuvioKqA4hIUHzNqBOszVYc75B8e/edAU9o8Y+Ky7UEwIC0+ZvAM/FUk/MWkrp5YAAAAASUVORK5CYII=" width="18" height="18">
Chef Ramsay
</em>
<em class="pull-right sm-text">
<i class="fa fa-clock-o"></i> 1hr 20 min
</em>
</div>
</a>
<div class='form-row'>
<hr class="featurette-divider"></hr>
<div class='text-center'>
Total:
<span class='amount'>$300</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);
.body {
}
.paymentAmt {
font-size: 80px;
}
.centered {
text-align: center;
}
.title {
padding-top: 20px;
text-align: center;
}
$(function() {
$('form.require-validation').bind('submit', function(e) {
var $form = $(e.target).closest('form'),
inputSelector = ['input[type=email]', 'input[type=password]',
'input[type=text]', 'input[type=file]',
'textarea'].join(', '),
$inputs = $form.find('.required').find(inputSelector),
$errorMessage = $form.find('div.error'),
valid = true;
$errorMessage.addClass('hide');
$('.has-error').removeClass('has-error');
$inputs.each(function(i, el) {
var $input = $(el);
if ($input.val() === '') {
$input.parent().addClass('has-error');
$errorMessage.removeClass('hide');
e.preventDefault(); // cancel on first error
}
});
});
});
$(function() {
var $form = $("#payment-form");
$form.on('submit', function(e) {
if (!$form.data('cc-on-file')) {
e.preventDefault();
Stripe.setPublishableKey($form.data('stripe-publishable-key'));
Stripe.createToken({
number: $('.card-number').val(),
cvc: $('.card-cvc').val(),
exp_month: $('.card-expiry-month').val(),
exp_year: $('.card-expiry-year').val()
}, stripeResponseHandler);
}
});
function stripeResponseHandler(status, response) {
if (response.error) {
$('.error')
.removeClass('hide')
.find('.alert')
.text(response.error.message);
} else {
// token contains id, last4, and card type
var token = response['id'];
// insert the token into the form so it gets submitted to the server
$form.find('input[type=text]').empty();
$form.append("<input type='hidden' name='reservation[stripe_token]' value='" + token + "'/>");
$form.get(0).submit();
}
}
})
