How to integrate Stripe payment gateway to ASP.NET MVC

I want to integrate Stripe psp into my ASP.NET MVC application.

Before you roast me with looking for questions with same issues, I did look for the said questions but they seem to be outdated.

I tried to follow the procedures from stripe website, but the javascript couldn't load the payment. I know I'm missing something.

If you could help me rather than roast me it would be great :).
p.s I'm totally new to MVC :/

The cshtml view with script

@{
    Layout = null;
}


<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>ProcessPayment | Merchant Dashboard</title>
    <script src="https://js.stripe.com/v3/"></script>
  <script>
      var stripe = Stripe('pk_test_51H1XOgCuKWbkvTE3V6VYOV0qVBLrEcZMCISGPWJ3nZeDqq3JgWb1GL1c2HRxk4NAve4j7YFkZeAvWoatocuvgzLb00bSZL72k3');
      var elements = stripe.elements();

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

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

      // Set your secret key. Remember to switch to your live secret key in production!
      // See your keys here: https://dashboard.stripe.com/account/apikeys
      StripeConfiguration.ApiKey = "pk_test_51H1XOgCuKWbkvTE3V6VYOV0qVBLrEcZMCISGPWJ3nZeDqq3JgWb1GL1c2HRxk4NAve4j7YFkZeAvWoatocuvgzLb00bSZL72k3";

      // Token is created using Checkout or Elements!
      // Get the payment token submitted by the form:
      var token = model.Token; // Using ASP.NET MVC

      var options = new ChargeCreateOptions
      {
          Amount = 999,
              Currency = "usd",
              Description = "Example charge",
              Source = token,
};

      var service = new ChargeService();
      var charge = service.Create(options);
  </script>
</head>
<body>

    <form action="/charge" method="post" id="payment-form">
        <div class="form-row">
            <label for="card-element">
                Credit or debit card
            </label>
            <div id="card-element">
                <!-- A Stripe Element will be inserted here. -->
            </div>

            <!-- Used to display Element errors. -->
            <div id="card-errors" role="alert"></div>
        </div>

        <button>Submit Payment</button>
    </form>
</body>
</html>

The controller

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MerchantCheckout.Models;
using Stripe;

namespace MerchantCheckout.Controllers
{
    public class ProcessPaymentController : Controller
    {
        // GET: ProcessPayment
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult ProcessPayment()
        {
            var stripePublishKey = ConfigurationManager.AppSettings["pk_test_51H1XOgCuKWbkvTE3V6VYOV0qVBLrEcZMCISGPWJ3nZeDqq3JgWb1GL1c2HRxk4NAve4j7YFkZeAvWoatocuvgzLb00bSZL72k3"];
            ViewBag.StripePublishKey = stripePublishKey;
            return View();
        }

        public ActionResult Charge(string stripeEmail, string stripeToken)
        {
            Stripe.CustomerCreateOptions customer = new Stripe.CustomerCreateOptions();

            var custService = new Stripe.CustomerService();

            Stripe.Customer stpCustomer = custService.Create(customer);

            return View();
        }
    }
}