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

PATH: home / lab2454c / omvstudio.com / resources / views / front / payment

@extends('front.layouts.loginMasterLayout')
@section('title','Upgrade Subscription')
@section('login-content')
@if (count($page_banners->pageBanners))
<div class="image__card__wrapp">
   @foreach ($page_banners->pageBanners as $pageBanner)
   <div class="image__box"><img src="{{ asset('storage/page_banners/' . $pageBanner->banner_image) }}"
      alt="" /></div>
   @endforeach
</div>
@endif
<div class="body__container__wrapp__single">
   <div class="form__wrapp">
      <div class="header__wrapp">
         <div class="logo__wrapp">
            <a href="{{ route('home') }}"><img src="{{ (isset($setting->site_logo)) ? asset('storage/site_settings/'.$setting->site_logo) : asset('admin_assets/images/default-image.png') }}"></a>
         </div>
         <h1>Subscribe For 30 Days</h1>
         <p>You will be charged <b>${{ env('PAYMENT_PRICE_ONE_MONTH') }}</b> for this subscription</p>
      </div>
      <div class="form__wrapp__inner">
         <div class="form-group form-floating form__group">
            <input type="hidden" id="plan" value="{{ env('STRIPE_PRICE_ID') }}">
            <input type="text" class="form-control form__control" id="card-holder-name" placeholder="Card Holder"  required>
            
            <div id="card-element"></div>
            <button class="btn btn-default submit__btn" id="card-button" data-secret="{{ $intent->client_secret }}">Subscribe</button>
            <div class="d-flex align-items-center mt-4 d-none" id="Loader">
               <strong>Registering...</strong>
               <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
            </div>
         </div>
      </div>
   </div>
   <div class="container__wrapp__single__footer">
      @isset($pages)
      <ul>
         @foreach($pages as $menu)
         <li>
            <a href="{{ url($menu['link']) }}">
            {{ $menu['label'] }}
            </a>
         </li>
         @endforeach
      </ul>
      @endisset
      <div class="socila__info">
         <ul>
            @if (isset($setting->facebook_link))
            <li><a href="{{ url($setting->facebook_link) }}" target="_blank"><img src="{{ asset('front_assets/images/facebook.svg') }}" alt="" /></a></li>
            @endif
            @if (isset($setting->twitter_link))
            <li><a href="{{ url($setting->twitter_link) }}" target="_blank"><img src="{{ asset('front_assets/images/twitter.svg') }}" alt="" /></a></li>
            @endif
            @if (isset($setting->instagram_link))
            <li><a href="{{ url($setting->instagram_link) }}" target="_blank"><img src="{{ asset('front_assets/images/instagram.svg') }}" alt="" /></a></li>
            @endif
            @if (isset($setting->linkedin_link))
            <li><a href="{{ url($setting->linkedin_link) }}" target="_blank"><img src="{{ asset('front_assets/images/linkedin.svg') }}" alt="" /></a></li>
            @endif
            @if (isset($setting->app_store_link))
            <li><a href="{{ url($setting->app_store_link) }}" target="_blank"><img src="{{ asset('front_assets/images/app-store.svg') }}" alt="" /></a></li>
            @endif
            @if (isset($setting->google_store_link))
            <li><a href="{{ url($setting->google_store_link) }}" target="_blank"><img src="{{ asset('front_assets/images/plat-store.svg') }}" alt="" /></a></li>
            @endif
         </ul>
      </div>
   </div>
</div>
@endsection
@push('frontend-styles')
<style>
   .StripeElement {
   box-sizing: border-box;
   height: 40px;
   padding: 10px 12px;
   border: 1px solid transparent;
   border-radius: 4px;
   background-color: white;
   box-shadow: 0 1px 3px 0 #e6ebf1;
   -webkit-transition: box-shadow 150ms ease;
   transition: box-shadow 150ms ease;
   }
   .StripeElement--focus {
   box-shadow: 0 1px 3px 0 #cfd7df;
   }
   .StripeElement--invalid {
   border-color: #fa755a;
   }
   .StripeElement--webkit-autofill {
   background-color: #fefde5 !important;
   }
</style>
@endpush
@push('frontend-scripts')
<script src="https://js.stripe.com/v3/"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
   (function($){
   
     $(document).ready(function(){
       $('#card-element').length && $('#card-holder-name').length && $('#card-button').length && (
   
        window.addEventListener('load', function() {
          const stripe = Stripe('{{env('STRIPE_KEY')}}');
          const elements = stripe.elements();
          const cardElement = elements.create('card');
          cardElement.mount('#card-element');
          const cardHolderName = document.getElementById('card-holder-name');
          const cardButton = document.getElementById('card-button');
          const clientSecret = cardButton.dataset.secret;
          const plan = document.getElementById('plan').value;
          cardButton.addEventListener('click', async (e) => {
            cardButton.disabled = true;
            $("#Loader").removeClass('d-none');
            const { setupIntent, error } = await stripe.handleCardSetup(
               clientSecret, cardElement, {
                 payment_method_data: {
                   billing_details: { name: cardHolderName.value }
                 }
               }
             );
            if (error) {
              /*iziToast.error({
                title: 'Error',
                message: error.message,
                position:'topRight'
              });*/
              toastr.error(error.message);
              cardButton.disabled = false;
              $("#Loader").addClass('d-none');
   
            } else {
                    // The card has been verified successfully...
                    console.log('handling success', setupIntent.payment_method);
                    axios.post('{{ route('upgradeRegistrationPayment') }}',{
                      payment_method: setupIntent.payment_method,
                      plan : plan
                    }).then((data)=>{
                      toastr.success(data.data.success);
                      location.replace(data.data.success_url)
                    });
                  }
                });
        })
   
        )
   
     })
   
   })(jQuery)
   
</script>
@endpush

[+] ..
[-] register-payment.blade.php [edit]
[-] upgrade-subscription.blade.php [edit]
[-] movie-payment.blade.php [edit]
[-] payment-option.blade.php [edit]