1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220
| @extends('layouts.master')
@section('includes')
<script src="https://js.stripe.com/v3/"></script>
@stop
@section('content')
<!-- Start Banner Area -->
<section class="banner-area organic-breadcrumb">
<div class="container">
<div class="breadcrumb-banner d-flex flex-wrap align-items-center justify-content-end">
<div class="col-first">
<h1>Paiement</h1>
<nav class="d-flex align-items-center">
<a href="index.html">Home<span class="lnr lnr-arrow-right"></span></a>
<a href="single-product.html">Paiement</a>
</nav>
</div>
</div>
</div>
</section>
<!-- End Banner Area -->
<!--================Checkout Area =================-->
<section class="checkout_area section_gap">
<div class="container">
<div class="billing_details">
<div class="row">
<div class="col-lg-8">
<h3>Billing Details</h3>
<form class="row contact_form" action="#" method="post" id="payment-form">
<div class="col-md-6 form-group p_star">
<input type="text" class="form-control" id="first" name="name">
<span class="placeholder" data-placeholder="First name"></span>
</div>
<div class="col-md-6 form-group p_star">
<input type="text" class="form-control" id="last" name="name">
<span class="placeholder" data-placeholder="Last name"></span>
</div>
<div class="col-md-12 form-group">
<input type="text" class="form-control" id="company" name="company" placeholder="Company name">
</div>
<div class="col-md-6 form-group p_star">
<input type="text" class="form-control" id="number" name="number">
<span class="placeholder" data-placeholder="Phone number"></span>
</div>
<div class="col-md-6 form-group p_star">
<input type="text" class="form-control" id="email" name="compemailany">
<span class="placeholder" data-placeholder="Email Address"></span>
</div>
<div class="col-md-12 form-group p_star">
<select class="country_select">
<option value="1">Country</option>
<option value="2">Country</option>
<option value="4">Country</option>
</select>
</div>
<div class="col-md-12 form-group p_star">
<input type="text" class="form-control" id="add1" name="add1">
<span class="placeholder" data-placeholder="Address line 01"></span>
</div>
<div class="col-md-12 form-group p_star">
<input type="text" class="form-control" id="add2" name="add2">
<span class="placeholder" data-placeholder="Address line 02"></span>
</div>
<div class="col-md-12 form-group p_star">
<input type="text" class="form-control" id="city" name="city">
<span class="placeholder" data-placeholder="Town/City"></span>
</div>
<div class="col-md-12 form-group p_star">
<select class="country_select">
<option value="1">District</option>
<option value="2">District</option>
<option value="4">District</option>
<option value="4">District</option>
</select>
</div>
<div class="col-md-12 form-group">
<input type="text" class="form-control" id="zip" name="zip" placeholder="Postcode/ZIP">
</div>
<div class="col-md-12 form-group">
<div class="creat_account">
<input type="checkbox" id="f-option2" name="selector">
<label for="f-option2">Create an account?</label>
</div>
</div>
<div class="col-md-12 form-group">
<div class="creat_account">
<div class="form-group">
<label for="card-element">
Credit or debit card
</label>
<div id="card-element">
<!-- A Stripe Element will be inserted here. -->
</div>
<!-- Used to display form errors. -->
<div id="card-errors" role="alert"></div>
</div>
</div>
</div>
<button id="complete-order" type="submit" class="primary-btn my-3">Procéder au paiement</button>
</form>
</div>
<div class="col-lg-4">
<div class="order_box">
<h2>Your Order</h2>
<ul class="list">
<li><a href="#">Product <span>Total</span></a></li>
<li><a href="#">Fresh Blackberry <span class="middle">x 02</span> <span class="last">$720.00</span></a></li>
<li><a href="#">Fresh Tomatoes <span class="middle">x 02</span> <span class="last">$720.00</span></a></li>
<li><a href="#">Fresh Brocoli <span class="middle">x 02</span> <span class="last">$720.00</span></a></li>
</ul>
<ul class="list list_2">
<li><a href="#">Subtotal <span>$2160.00</span></a></li>
<li><a href="#">Shipping <span>Flat rate: $50.00</span></a></li>
<li><a href="#">Total <span>$2210000.00</span></a></li>
</ul>
</div>
<div class="coupon my-3">
<div class="code">
<p>Avez-vous un coupon ?</p>
<form action="#" method="POST">
<div class="d-flex align-items-center contact_form">
<input type="text" name="coupon_code" id="coupon_code" class="form-control" placeholder="Coupon code">
<button class="primary-btn my-3" type="submit">
<i class="fas fa-check"></i>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--================End Checkout Area =================-->
@stop
@section('js')
<script>
// Create a Stripe client.
var stripe = Stripe('pk_test_51H2YuDFjtg66AnaAjZRguubu8tw5fFFMjjGmEofW7mXHXHxGrBA1qKWbxKwHdz7y9EHruqGlFYy7xvKGVfN4xpLf00ON95DLmi');
// Create an instance of Elements.
var elements = stripe.elements();
// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
base: {
color: '#32325d',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
color: '#aab7c4'
}
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a'
}
};
// Create an instance of the card Element.
var card = elements.create('card', {style: style});
// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');
// Handle real-time validation errors from the card Element.
card.on('change', function(event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});
// Handle form submission.
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
event.preventDefault();
stripe.createToken(card).then(function(result) {
if (result.error) {
// Inform the user if there was an error.
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
} else {
// Send the token to your server.
stripeTokenHandler(result.token);
}
});
});
// Submit the form with the token ID.
function stripeTokenHandler(token) {
// Insert the token ID into the form so it gets submitted to the server
var form = document.getElementById('payment-form');
var hiddenInput = document.createElement('input');
hiddenInput.setAttribute('type', 'hidden');
hiddenInput.setAttribute('name', 'stripeToken');
hiddenInput.setAttribute('value', token.id);
form.appendChild(hiddenInput);
// Submit the form
form.submit();
}
</script>
@stop |
Partager