@extends('layouts.master')

@section('title')
Payment
@endsection

@section('content')
<style type="text/css">
    .panel-title {
        display: inline;
        font-weight: bold;
    }

    .display-table {
        display: table;
    }

    .display-tr {
        display: table-row;
    }

    .display-td {
        display: table-cell;
        vertical-align: middle;
        width: 61%;
    }
</style>
<h1>Checkout</h1>
<h4>Your Total: ${{ $total }}</h4>
<div class="row">
    <div class="col-md-4 m-auto">
        <div class="panel panel-default credit-card-box">
            <div class="panel-heading display-table">
                <div class="row display-tr">
                    <h3 class="panel-title display-td">Payment Details</h3>
                    <div class="display-td">
                        <img class="img-responsive pull-right" src="http://i76.imgup.net/accepted_c22e0.png">
                    </div>
                </div>
            </div>
            <div class="panel-body">
                @if ($errors->any())
                @foreach ($errors->all() as $error)
                <div>{{$error}}</div>
                @endforeach
                @endif
                @if (Session::has(&#039;success&#039;))
                <div class="alert alert-danger text-center">
                    <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                    <p>{{ Session::get(&#039;success&#039;) }}</p>
                </div>
                @endif
                @if (Session::has(&#039;fail-message1&#039;))
                <div class="alert alert-danger  text-center">
                    <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                    <p>{{ Session::get(&#039;fail-message1&#039;) }}</p>
                </div>
                @endif
                @if (Session::has(&#039;fail-message2&#039;))
                <div class="alert alert-danger  text-center">
                    <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                    <p>{{ Session::get(&#039;fail-message2&#039;) }}</p>
                </div>
                @endif
                @if (Session::has(&#039;fail-message3&#039;))
                <div class="alert alert-danger  text-center">
                    <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                    <p>{{ Session::get(&#039;fail-message3&#039;) }}</p>
                </div>
                @endif
                @if (Session::has(&#039;fail-message4&#039;))
                <div class="alert alert-danger  text-center">
                    <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                    <p>{{ Session::get(&#039;fail-message4&#039;) }}</p>
                </div>
                @endif
                @if (Session::has(&#039;fail-message5&#039;))
                <div class="alert alert-danger  text-center">
                    <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                    <p>{{ Session::get(&#039;fail-message5&#039;) }}</p>
                </div>
                @endif   
                @if (Session::has(&#039;fail-message6&#039;))
                <div class="alert alert-danger  text-center">
                    <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                    <p>{{ Session::get(&#039;fail-message5&#039;) }}</p>
                </div>
                @endif 
                @if (Session::has(&#039;fail-message7&#039;))
                <div class="alert alert-danger  text-center">
                    <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                    <p>{{ Session::get(&#039;fail-message5&#039;) }}</p>
                </div>
                @endif             
                <form action="{{ route(&#039;checkout&#039;) }}" method="POST" id="payment-form">
                    {{ csrf_field() }}
                    <div class="row">
                        <div class="col-md-12 mb-3">
                            <label for="name">Cart Name</label>
                            <input type="text" id="cardname" class="form-control" required>
                            <label for="name">Name</label>
                            <input type="text" id="name" class="form-control" required>
                            <label for="surname">Surname</label>
                            <input type="text" id="surname" class="form-control" required>
                            <label for="firstName">Enter Card Details</label>
                            <div id="card-element">
                                <!-- A Stripe Element will be inserted here. -->
                            </div>
                        </div>
                    </div>
                    <div id="card-errors" role="alert"></div>
            </div>
            <button id="complete-orders" class="btn btn-success btn-block">Submit Payment</button>
            </form>
        </div>
    </div>
</div>
</div>

</div>
@endsection
@section(&#039;scripts&#039;)
<script type="text/javascript" src="https://js.stripe.com/v3/"></script>
<script type="text/javascript" src="{{URL::to(&#039;js/checkout.js&#039;)}}"></script>
@endsection

Add a code snippet to your website: www.paste.org