I am trying to add and pass a variable for payment but the final variable keeps giving me the error undefined finalAmount. Below is the code:

@extends('layouts.front')

@section('content')

@lang('front.headings.payment')

@lang('front.summary.checkout.heading.bookingSummary')

@if ($booking->deal_id=='')

• @lang('front.bookingDate'): {{ $booking->date_time->isoFormat('dddd, MMMM Do') }}
• @lang('front.bookingTime'): {{ $booking->date_time->format($settings->time_format) }}
• @lang('front.amountToPay'): {{ $settings->currency->currency_symbol.$booking->amount_to_pay}}
• @lang('front.serviceCharge'):

                              </span>
                              </li>
                              <li>
                                  <span>
                                      @lang('app.employee'):
                                  </span>
                                      <span>
                                         @if (!empty($emp_name))
                                              {{ $emp_name }}
                                          @else
                                              None
                                         @endif
                                  </span>
                              </li>
                          </ul>
                      @else
                          <ul>
                              <li>
                              <span>
                                  @lang('app.deal') @lang('app.name'):
                              </span>
                                  <span>
                                      {{$booking->deal->title}}
                              </span>
                              </li>
                              <li>
                              <span>
                                  @lang('app.amount'):
                              </span>
                                  <span>
                                  {{ $settings->currency->currency_symbol.$service }}
                              </span>
                              </li>
  
  
                          </ul>
                      @endif
  
                  </div>
                 
  
                
                
                          <form>
  
  
                          
  

  Pay

     </div>
                  </div>
              </div>
              <div class="row mt-30">
                  <div class="col-12 text-center">
                      <a href="{{ route('admin.dashboard') }}" class="btn btn-custom">
                          <i class="fa fa-home mr-2"></i>
                          @lang('front.navigation.toAccount')</a>
                  </div>
              </div>
          </div>
      </section>
  </section>
  

  @endsection

  $percentageToGet = 2.5; $percentInDecimal = $percentageToGet/100; $serviceChargee = $percentInDecimal * $booking->amount_to_pay; $diFinalAmount = $booking->amount_to_pay * 100; $finalAmount = $diFinalAmount + $serviceChargee;

  @push('footer-script')

  function payWithPaystack(){ var handler = PaystackPop.setup({ "key": "", "email": "{{ }}", "currency": "", "name": "{{ }}" , "amount":"{{$finalAmount}}" , "description": "@lang('app.booking') @lang('front.headings.payment')", metadata: { custom_fields: [ { display_name: "Mobile Number", variable_name: "mobile_number", value: "" } ] }, callback: function(response){ alert('{{ $booking->id }}' + response.reference); redirect: true; }, onClose: function(){ alert('window closed'); } }); handler.openIframe(); }