I am trying to pass some PHP variables and Javascript variable into url in Javascript window.location.href

I am trying to pass some PHP variables and Javascript variable name "referenced" into a URL in Javascript. Below are the PHP variables which are working very fine

//Collect user's data
$amt = $_GET['amount'];
$email = $_GET['email'];
$firstname = "bas";
$lastname = "aik";
<script>    
callback: function(response){
              const referenced = response.reference;
              window.location.href='successful.php?successfullypaid=referenced&email=<?php echo $email; ?>';
          },
<script?

I have pasted my entire code below for you to see.

    <?php
//sanitize form inputs
$sanitizer = filter_var_array($_POST, FILTER_SANITIZE_STRING);

//Collect user's data
$amt = $_GET['amount'];
$email = $_GET['email'];
$firstname = "bas";
$lastname = "aik";

//Make sure fields are not empty
//if(empty($amt)) {
//  header("Location: deposit.php");
//}else{


?>
                <div class="modal-body">
                    <p>Confirm Online payment to pay with paystack</p>
                    <form >
                        <script src="https://js.paystack.co/v1/inline.js"></script>
                        <button type="button" class="btn btn-success confirm-button" onclick="payWithPaystack()"> Confirm </button>
                        <a class="btn btn-danger" href="index.php"> Decline </a> 
                    </form>
                </div>
               <!-- <div class="modal-footer">
                    
                    <a href="index.php"> <button type="button" class="btn btn-primary">Go to Account</button></a>
                </div>-->
            </div>
        </div>
    </div>
</div>
<script>
  function payWithPaystack(){
    const api = "pk_test_71bd9a7489bee5e300594cabeac43344eed2ef5c";
    var handler = PaystackPop.setup({
      key: api,
      email: '<?php echo $email; ?>',
      amount: <?php echo $amt*100; ?>,
      currency: "NGN",
      ref: ''+Math.floor((Math.random() * 1000000000) + 1), // generates a pseudo-unique reference. Please replace with a reference you generated. Or remove the line entirely so our API will generate one for you
      /*firstname: <?php echo $firstname; ?>,
      lastname: <?php echo $lastname; ?>,*/
      metadata: {
         custom_fields: [
            {
                /*display_name: <?php echo $firstname; ?>,
                variable_name: <?php echo $lastname; ?>,
                value: "+2348012345678"*/
            }
         ]
      },
      callback: function(response){
          const referenced = response.reference;
          window.location.href='successful.php?successfullypaid=referenced&email=<?php echo $email; ?>';
      },
      onClose: function(){
          alert('window closed');
      }
    });
    handler.openIframe();
  }
</script>

I have tried all the answers to this question How can i pass multiple parameters in location.href in php?, but they are not working for me.

window.location.href='successful.php?successfullypaid=referenced&email=<?php echo $email; ?>';

This is the only solution that is close to what I want, the PHP variable works fine but the javascript variable doesn't work