ꦫꦣꦺꦤ꧀ꦄꦤ꧀ꦠꦱꦺꦤ

PATH: home / lab2454c / netxzero.com / carbon-credit / resources / views / frontend / ecommerce

@extends('frontend.layouts.master')

@section('title', 'Checkout')

@section('content')

<div class="cabkenz__radio__row billing__radio__row cart__wrapp">
    <div class="container">
        <h2>Checkout</h2>
         <form class="card-form" method="POST" action="{{ route('submitCheckout') }}">
            @csrf
            <div class="row">
               
                <div class="col-xl-7 col-lg-7 col-md-12 mr__bottom">
                    <div class="billing__details__wrapp">
                        <h3>Billing details</h3>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form__group">
                                    <label class="label__field">First name<span class="text-danger"> *</span></label>
                                    <input type="text" 
                                           class="form__control @error('first_name') is-invalid @enderror" 
                                           name="first_name" 
                                           placeholder="Enter First Name"
                                           value="{{ old('first_name') }}" 
                                           required
                                           autofocus>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form__group">
                                    <label class="label__field">Last name<span class="text-danger"> *</span></label>
                                    <input type="text" 
                                           class="form__control @error('last_name') is-invalid @enderror" 
                                           name="last_name" 
                                           placeholder="Enter Last Name"
                                           value="{{ old('last_name') }}" 
                                           required>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form__group">
                                    <label class="label__field">Company name</label>
                                    <input type="text" 
                                           class="form__control @error('company_name') is-invalid @enderror" 
                                           name="company_name" 
                                           placeholder="Enter Company Name"
                                           value="{{ old('company_name') }}" >
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form__group">
                                    <label class="label__field">Country / Region<span class="text-danger"> *</span></label>
                                    <select class="form__control" name="country" required>
                                        <option value="">Select</option>
                                            @isset($countries)
                                            @foreach($countries as $country)
                                            <option value="{{ $country->name }}" @if(old('country') == $country->name) selected='selected' @endif>
                                                {{ $country->name }}
                                            </option>
                                            @endforeach
                                            @endisset
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form__group">
                                    <label class="label__field">Address<span class="text-danger"> *</span></label>
                                    <textarea class="form__control" name="address" placeholder="Enter Address" required>{{ old('address') }}</textarea>
                                </div>
                            </div>
                           
                            <div class="col-md-6">
                                <div class="form__group">
                                    <label class="label__field">Town / City<span class="text-danger"> *</span></label>
                                    <input type="text" 
                                           class="form__control @error('city') is-invalid @enderror" 
                                           name="city" 
                                           placeholder="Enter City"
                                           value="{{ old('city') }}" 
                                           required>
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form__group">
                                    <label class="label__field">ZIP Code<span class="text-danger"> *</span></label>
                                    <input type="text" 
                                           class="form__control @error('zipcode') is-invalid @enderror" 
                                           name="zipcode" 
                                           placeholder="Enter ZIP Code"
                                           value="{{ old('zipcode') }}" 
                                           required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form__group">
                                    <label class="label__field">Phone<span class="text-danger"> *</span></label>
                                    <input type="tel" 
                                           class="form__control @error('phone') is-invalid @enderror" 
                                           name="phone" 
                                           placeholder="Enter Phone"
                                           value="{{ old('phone') }}" 
                                           required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form__group">
                                    <label class="label__field">Email<span class="text-danger"> *</span></label>
                                    <input type="text" 
                                           class="form__control @error('email') is-invalid @enderror" 
                                           name="email" 
                                           placeholder="Enter Email"
                                           value="{{ old('email') }}" 
                                           required>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

<div class="col-md-12 mb-4">
                            <div class="cabkenz__radio__inner upload__history__cart cart__details__inner">
                                <h3>Order summary</h3>
                                <div class="table__main">
                                    <div class="table__row">
                                        <div class="table__row__data">
                                            <div class="table__image__box"><img src="images/post-pic.png" alt="" /></div>
                                            <div class="table__text">
                                                <div class="cart__man">
                                                    <h4>Carbon-Cost: </h4>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="table__row__data">
                                            <p>USD {{ $totalEstimate['cost']['in_requested_currency']['carbon_cost'] }}</p>
                                        </div>
                                    </div>

<div class="table__row">
                                        <div class="table__row__data">
                                            <div class="table__image__box"><img src="images/post-pic.png" alt="" /></div>
                                            <div class="table__text">
                                                <div class="cart__man">
                                                    <h4>Transaction-Cost: </h4>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="table__row__data">
                                            <p>USD {{$totalEstimate['cost']['in_requested_currency']['transaction_cost']}}</p>
                                        </div>
                                    </div>

<div class="table__row">
                                        <div class="table__row__data">
                                            <div class="table__image__box"><img src="images/post-pic.png" alt="" /></div>
                                            <div class="table__text">
                                                <div class="cart__man">
                                                    <h4>Total-Cost: </h4>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="table__row__data">
                                             <p>
                                                 <strong>USD {{ $totalEstimate['cost']['in_requested_currency']['total_cost'] }}</strong>
                                             </p>
                                        </div>
                                    </div>
                                    
                                </div>
                            </div>
                        </div>

<div class="col-md-12">
                            <div class="cabkenz__radio__inner upload__history__cart payment__details__inner">
                                <h3>Payment option</h3>
                                <div class="custom-radio-wrap">

<input type="hidden" name="stripeToken" class="stripe-token">
                                        <input class="form__control my-3" name="card_holder_name" placeholder="Card holder name" required>
                                        <div id="card-element">
                                            
                                        </div>
                                        
                                        <div id="card-errors" role="alert"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="cart__btn__wrapp place__order__btn">
                                <button class="cart__btn pay" type="submit">Place Order</button>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
        </form>
    </div>
</div>

.StripeElement--webkit-autofill {
        background-color: #fefde5 !important;
    }

#card-errors {
        color: red;
        margin-top: 8px;
    }
</style>

let stripe = Stripe("{{ env('STRIPE_KEY') }}")
    let elements = stripe.elements()
    
    let card = elements.create('card')
    card.mount('#card-element')

card.on('change', ({error}) => {
      let displayError = document.getElementById('card-errors');
      if (error) {
        displayError.textContent = error.message;
      } else {
        displayError.textContent = '';
      }
    });

let stripeToken = null
    $('.card-form').on('submit', function (e) {
        $('button.pay').attr('disabled', true)
        if (stripeToken) {
            return true
        }
       stripe.createToken(card).then(function (result) {
            if (result.error) {
                $('#card-errors').text(result.error.message)
                $('button.pay').removeAttr('disabled')
            } else {
                console.log(result.token.id);
                stripeToken = result.token.id;
                $('.stripe-token').val(stripeToken)
                $('.card-form').submit()
            }
        })
        return false
    })

</script>

@endsection

[-] checkout.blade.php [edit]
[-] cart.blade.php [edit]
[+] ..