Stripe authentication pop up not working

I have a payment page that looks like this:

{% extends "../main.html" %}
{% load static %}
{% block title %}Payment{% endblock %}
{% block content %}

<div class="container-fluid">
  <div class="row no-gutter">
    <div class="col-md-12">
      <div class="login d-flex align-items-center py-5">
        <div class="container">
          <div class="row">
            <div id="payment-form" class="col-12 col-lg-6 mx-auto">
              <h3 class="mb-3">Billing address</h3>
              <!-- Error messages in this element -->
              <div id="card-errors" class="a" role="alert"></div>
              <form>
                <div class="row g-3">
                  <div class="col-sm-7">
                    <label for="firstName" class="form-label">Customer Name</label>
                    <input type="text" class="form-control" id="custName" placeholder="" required>
                    <div class="invalid-feedback">
                      Valid first name is required.
                    </div>
                  </div>
                  <div class="col-12">
                    <label for="email" class="form-label">Email <span class="text-muted">(Optional)</span></label>
                    <input type="email" class="form-control" id="email" placeholder="you@example.com">
                    <div class="invalid-feedback">
                      Please enter a valid email address for shipping updates.
                    </div>
                  </div>
                  <div class="col-12">
                    <label for="address" class="form-label">Address</label>
                    <input type="text" class="form-control" id="custAdd" placeholder="1234 Main St" required>
                    <div class="invalid-feedback">
                      Please enter your shipping address.
                    </div>
                  </div>
                  <div class="col-12">
                    <label for="address2" class="form-label">Address 2 <span
                        class="text-muted">(Optional)</span></label>
                    <input type="text" class="form-control" id="custAdd2" placeholder="Apartment or suite">
                  </div>
                  <div class="col-md-5">
                    <label for="country" class="form-label">Country</label>
                    <select class="form-select" id="country" required>
                      <option value="">Choose...</option>
                      <option>United States</option>
                    </select>
                    <div class="invalid-feedback">
                      Please select a valid country.
                    </div>
                  </div>
                  <div class="col-md-4">
                    <label for="state" class="form-label">State</label>
                    <select class="form-select" id="state" required>
                      <option value="">Choose...</option>
                      <option>California</option>
                    </select>
                    <div class="invalid-feedback">
                      Please provide a valid state.
                    </div>
                  </div>
                  <div class="col-md-3">
                    <label for="Postcode" class="form-label">Postcode</label>
                    <input type="text" class="form-control" id="postCode" placeholder="" required>
                    <div class="invalid-feedback">
                      Zip code required.
                    </div>
                  </div>
                </div>
                <hr class="my-4">
                <h4 class="mb-3">Payment</h4>
                <label for="card-element">Credit or debit card</label>
                <div id="card-element" class="form-control form-control-payment">
                  <!-- Payment elements will appear here -->
                </div>
                <hr class="my-4">
                <button id="submit" class="btn btn-primary w-100 fw-bold" data-secret="{{ client_secret }}">Pay</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<script>
    //Make csrf token availble in JS files
    var CSRF_TOKEN = '{{ csrf_token }}';
</script>
<script src="https://js.stripe.com/v3/"></script>
<script src="{% static 'js/payment.js' %}" data-rel-js></script>

{% endblock %}

Here is the stripe javascript:

var stripe = Stripe(
  "pk_test_51Nf9XtC7XxoqCynJckNwLBKgOUrApNrcsjHzGGH4fp1noFjHnaAoSatE3lSmxfgIyWavTTBoNIZiVb3mb05SCdrH00WwEhasty"
);

var elem = document.getElementById("submit");
clientsecret = elem.getAttribute("data-secret");

// Set up Stripe.js and Elements to use in checkout form
var elements = stripe.elements();
var style = {
  base: {
    color: "#000",
    lineHeight: "2.4",
    fontSize: "16px",
  },
};

var card = elements.create("card", { style: style });
card.mount("#card-element");

card.on("change", function (event) {
  var displayError = document.getElementById("card-errors");
  if (event.error) {
    displayError.textContent = event.error.message;
    $("#card-errors").addClass("alert alert-info");
  } else {
    displayError.textContent = "";
    $("#card-errors").removeClass("alert alert-info");
  }
});

var form = document.getElementById("payment-form");

form.addEventListener("submit", function (ev) {
  ev.preventDefault();

  var custName = document.getElementById("custName").value;
  var custAdd = document.getElementById("custAdd").value;
  var custAdd2 = document.getElementById("custAdd2").value;
  var postCode = document.getElementById("postCode").value;

  $.ajax({
    type: "POST",
    url: "http://127.0.0.1:8000/orders/add/",
    data: {
      order_key: clientsecret,
      csrfmiddlewaretoken: CSRF_TOKEN,
      action: "post",
    },
    success: function (json) {
      console.log(json.success);

      stripe
        .confirmCardPayment(clientsecret, {
          payment_method: {
            card: card,
            billing_details: {
              address: {
                line1: custAdd,
                line2: custAdd2,
              },
              name: custName,
            },
          },
        })
        .then(function (result) {
          if (result.error) {
            console.log("payment error");
            console.log(result.error.message);
          } else {
            if (result.paymentIntent.status === "succeeded") {
              console.log("payment processed");
              // There's a risk of the customer closing the window before callback
              // execution. Set up a webhook or plugin to listen for the
              // payment_intent.succeeded event that handles any business critical
              // post-payment actions.
              window.location.replace(
                "http://127.0.0.1:8000/payment/orderplaced/"
              );
            }
          }
        });
    },
    error: function (xhr, errmsg, err) {},
  });
});

In my dashboard I can see that the api is being used to create an intent when I click on “Pay”, but the actual window that’s supposed to pop up in order to authenticate the transaction isn’t showing up. Am I missing something?