StripeConfirmPaymentCodeCheck

@model GamePlay.Dal.Model.Contact
@{
    ViewData["Title"] = "SetupPayment";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
    <form id="setup-form" >
        <input type="hidden" value="@ViewBag.ClientSecret" id="data-secret" />
        <h1>SetupPayment</h1>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="name">Name</label>
                    <input class="form-control" id="name" type="text" value="@Model.FullName" autocomplete="name">
                </div>
                <div class="form-group">
                    <label for="email">Email</label>
                    <input class="form-control" id="email" type="email" value="@Model.EmailAddress" autocomplete="email">
                </div>
                <div class="form-group">
                    <label for="phone">Phone</label>
                    <input class="form-control" id="phone" type="tel" value="@Model.MobilePhone"  autocomplete="tel">
                </div>
                <div class="form-group">
                    <div class="form-control" id="card-element">

                    </div>
                </div>
                <div class="form-group">
                    Country: USA
                </div>
                <div class="sr-field-error" id="card-errors" role="alert"></div>


                <div class="form-group">
                    <button id="card-button" class="form-group">
                        <div class="spinner hidden" id="spinner"></div>
                        Save Card
                    </button>

                </div>
            </div>
        </div>


    </form>
    <link rel="stylesheet" href="~/css/stripe.css" />
@section Scripts {

<script src="https://js.stripe.com/v3/"></script>
<script>
    var stripe = Stripe('@ViewBag.StripePublishKey');
    var elements = stripe.elements();

    // Element styles

  var style = {

    base: {

      fontSize: "16px",

      color: "#32325d",

      fontFamily:

        "-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif",

      fontSmoothing: "antialiased",

      "::placeholder": {

          color: "rgba(0,0,0,0.4)"
      }

    }

  };



  var cardObj = elements.create("card");



  cardObj.mount("#card-element");



  // Element focus ring

  cardObj.on("focus", function() {

    var el = document.getElementById("card-element");

    el.classList.add("focused");

  });



  cardObj.on("blur", function() {

    var el = document.getElementById("card-element");

    el.classList.remove("focused");

  });

   var cardButton = document.getElementById('card-button');



    cardButton.addEventListener('click', function (ev) {
        var cardholderName = document.getElementById("name").value;
        var clientSecret = document.getElementById("data-secret").value;
        var emailStr = document.getElementById("email").value;
        var phoneStr = document.getElementById("phone").value;
       // alert(clientSecret + " " + cardholderName);
        console.log(cardObj);
        stripe.confirmCardSetup(
            clientSecret,
            {
              payment_method: {
                card: cardObj,
                billing_details: {
                  name: cardholderName , email: emailStr
                }
              }
            }
          ).then(function(result) {
            if (result.error) {
                alert("result.error");
            } else {
                alert("success");
            }
          });

    });




</script>
}