i'm trying to pass the email gotten the email field in django in other to pass it to the payment gateway. when i click pay, it redirects me to the modal payment gateway for with an error saying An invalid email passed

then when i used inspect, to check the issue, this is what it says

 flwpbf-inline.js:232 Uncaught TypeError: Cannot set properties of undefined (setting 'opacity')
    at Object.message_handlers.modalready (flwpbf-inline.js:232)
    at flwpbf-inline.js:253
message_handlers.modalready @ flwpbf-inline.js:232
(anonymous) @ flwpbf-inline.js:253

the js

<script>
  function makePayment() {
    const email = document.getElementById('email').value;
    FlutterwaveCheckout({
      public_key: "xxxxxxxxxxxxxxxxxxX",
      tx_ref: "RX1",
      amount: '{{cart.get_total_price}}',
      currency: "USD",
      country: "NG",
      payment_options: "",
      redirect_url: // specified redirect URL
        "https://callbacks.piedpiper.com/flutterwave.aspx?ismobile=34",
      meta: {
        consumer_id: 23,
        consumer_mac: "92a3-912ba-1192a",
      },
      customer: {
        email: "{{address.email}}",
        name: "Flutterwave Developers",
      },
      callback: function (data) {
        console.log(data);
      },
      onclose: function() {
        // close modal
      },
    });
  }
</script>

view.py

    @login_required
def delivery_address(request):

    session = request.session
    if "purchase" not in request.session:
        messages.success(request, "Please select delivery option")
        return HttpResponseRedirect(request.META["HTTP_REFERER"])

    addresses = Address.objects.filter(customer=request.user).order_by("-default")

    if "address" not in request.session:
        session["address"] = {"address_id": str(addresses[0].id)}
    else:
        session["address"]["address_id"] = str(addresses[0].id)
        session.modified = True

    return render(request, "checkout/delivery_address.html", {"addresses": addresses, "address_form": UserAddressForm})