How to solve Undefined index: stripeToken in PHP?

Question

I am getting this error and I have no clue about this and trying to sort out the things and tried many things but nothing works. Kindly check the errors below:

Notice: Undefined index: stripeToken in
/opt/lampp/htdocs/fullbrick/thankYou.php on line 42 NULL Fatal error:
Uncaught Stripe\Error\InvalidRequest: Must provide source or customer.
in /opt/lampp/htdocs/fullbrick/stripe-php/lib/ApiRequestor.php:181
from API request 'req_cuGvSG7abb9bzS' Stack trace: #0
/opt/lampp/htdocs/fullbrick/stripe-php/lib/ApiRequestor.php(144):
Stripe\ApiRequestor::_specificAPIError('{\n "error": {\n...', 400,
Array, Array, Array) #1
/opt/lampp/htdocs/fullbrick/stripe-php/lib/ApiRequestor.php(430):
Stripe\ApiRequestor->handleErrorResponse('{\n "error": {\n...', 400, Array, Array) #2
/opt/lampp/htdocs/fullbrick/stripe-php/lib/ApiRequestor.php(97):
Stripe\ApiRequestor->_interpretResponse('{\n "error": {\n...', 400 , Array) #3
/opt/lampp/htdocs/fullbrick/stripe-php/lib/ApiOperations/Request.php(56):
Stripe\ApiRequestor->request('post', '/v1/charges', Array, Array) #4
/opt/lampp/htdocs/halfdrink/stripe-php/lib/ApiOperations/Create.php(23):
Stripe\ApiResource::_staticRequest('post', '/v1/charges', Array, NULL)
5 /opt/lampp/htdocs/fullbrick/thankYou.php(53): Stripe\Charge::create(Array) #6
{main} in /opt/lampp/htdocs/fullbrick/stripe-php/lib/ApiRequestor.php on line
181

The code is:

<script>
// Errors For Stripe Payment Card Check
card.addEventListener('change', function(event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
  displayError.textContent = event.error.message;
} else {
  displayError.textContent = '';
}
});

// Create a token or display an error when the form is submitted.
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
event.preventDefault();

stripe.createToken(card).then(function(result) {
if (result.error) {
  // Inform the customer that 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);
 }
 });
 });

 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();
 }


  // Custom styling can be passed to options when creating an Element.
  var style = {
  base: {
  // Add your base input styles here. For example:
  fontSize: '16px',
  color: "#32325d",
  }
  };

  // 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');

  </script>

   <form action="thankYou.php" method="post" id="payment-form">
       <span class="bg-danger" id="payment_errors"></span>
       <span class="bg-danger" id="card-errors"></span>

       <div class="form-group col-md-6">
                          <label for="full_name">Full Name:</label>
                          <input class="form-control" type="text" name="full_name"  id="full_name">
       </div>
       //Same as Email div, phone,address,city,state,zipcode,country,cardname,cardnumber,exp month, exp year, cvc

       <button type="submit" class="btn btn-primary"  id="checkout_button" style="display:none;">Check Out >></button>

   </form>

On thanYou.php

  //Getting Variable details like 

  $full_name = $_POST['full_name']; // same as email,phone, address,city ...

  $metadata = array(
  "cart_id"   => $cart_id,
  "tax"       => $tax,
  "sub_total" => $sub_total,
  );


  // Set your secret key: remember to change this to your live secret key in production
  // See your keys here: https://dashboard.stripe.com/account/apikeys

  \Stripe\Stripe::setApiKey("sk_test_hiQjZlN9oJ9GcLGAlPVwAvfq");  // secret Key

   // Token is created using Checkout or Elements!

   // Get the payment token ID submitted by the form:
    $token = $_POST['stripeToken']; // Here not getting token
    var_dump($token);

     try{ . // Here not getting inside the try because token is null

     $charge = \Stripe\Charge::create([

     'amount' => 999,
     'currency' => 'usd',
     'description' => 'Example charge',
     'source' => $token,
     'receipt_email' => $email,
     'metadata' => $metadata,
     ]);
     }catch(\Stripe\Error\card $e){
     echo $e;
      }

This ApiRequestor.php is the main problem I guess.