jQuery-使用条带元素和本地存储来保存/更新信用卡

Question

[在测试环境中，我试图将Stripe Elements信用卡验证器挂接到设置为保存已验证的表单信息以及更新存储的信息的代码中。该代码用于模拟checkout UX，用户可以在其中输入新的信用卡信息（使用“条纹元素”表单），并使用local storage保存其经过验证的信息。

除了能够保存其新卡之外，他们还可以更新已经保存/显示在加载中的卡。

我的问题是，我不确定如何定义将使用更新/保存代码循环Stripe Elements表单的var valid = ();，以及如何运行Stripe验证程序的两个实例（一个用于新卡，另一个用于更新已保存的卡）。

这是codepen：https://codepen.io/moofawsaw/pen/jOOwbwG

$(document).ready(function() {
  var stripe = Stripe("pk_test_6pRNASCoBOKtIshFeQd4XMUh");
  var elements = stripe.elements();

  var style = {
    base: {
      iconColor: "#666EE8",
      color: "#31325F",
      lineHeight: "40px",
      fontWeight: 600,
      fontSize: "16px",

      "::placeholder": {
        color: "#CFD7E0",
        fontWeight: 400
      }
    }
  };

  var cardNumberElement = elements.create("cardNumber", {
    style: style
  });
  cardNumberElement.mount("#cc-number");

  var cardExpiryElement = elements.create("cardExpiry", {
    style: style
  });
  cardExpiryElement.mount("#cc-exp");

  var cardCvcElement = elements.create("cardCvc", {
    style: style
  });
  cardCvcElement.mount("#cc-cvc");

  function setOutcome(result) {
    var successElement = document.querySelector(".success");
    var errorElement = document.querySelector(".error");
    successElement.classList.remove("visible");
    errorElement.classList.remove("visible");

    if (result.token) {
      // In this example, we're simply displaying the token
      successElement.querySelector(".token").textContent = result.token.id;
      successElement.classList.add("visible");

      // In a real integration, you'd submit the form with the token to your backend server
      //var form = document.querySelector('form');
      //form.querySelector('input[name="token"]').setAttribute('value', result.token.id);
      //form.submit();
    } else if (result.error) {
      errorElement.textContent = result.error.message;
      errorElement.classList.add("visible");
    }
  }

  var cardBrandToPfClass = {
    visa: "pf-visa",
    mastercard: "pf-mastercard",
    amex: "pf-american-express",
    discover: "pf-discover",
    diners: "pf-diners",
    jcb: "pf-jcb",
    unknown: "pf-credit-card"
  };

  function setBrandIcon(brand) {
    var brandIconElement = document.getElementById("brand-icon");
    var pfClass = "pf-credit-card";
    if (brand in cardBrandToPfClass) {
      pfClass = cardBrandToPfClass[brand];
    }
    for (var i = brandIconElement.classList.length - 1; i >= 0; i--) {
      brandIconElement.classList.remove(brandIconElement.classList[i]);
    }
    brandIconElement.classList.add("pf");
    brandIconElement.classList.add(pfClass);
  }

  cardNumberElement.on("change", function(event) {
    // Switch brand logo
    if (event.brand) {
      setBrandIcon(event.brand);
    }

    setOutcome(event);
  });

  document.querySelector(".payment").addEventListener("submit", function(e) {
    e.preventDefault();
    var options = {};
    stripe.createToken(cardNumberElement, options).then(setOutcome);
  });

  $(function() {
    var $selectedItem;

    window.localStorage.clear();
    if (!localStorage.getItem("_storage")) {
      localStorage.setItem("_storage", "");
    }
    //create localStorage item
    if (localStorage.getItem("_storage")) {
      $("#content").html(localStorage.getItem("_storage"));
    }
    //set data to localStorage function
    function saveData() {
      localStorage.setItem("_storage", $("#content").html());
    }

    $(".payment").on("click", ".btn--save", function() {

      if (valid) {
        var id = $("#cc-cvc").val();
        var createnumb = $("#cc-number").val();
        var exp = $("#cc-exp").val();
        var item = "";
        if (id[0]) {
          for (var i = 0; i < id.length; i++) {
            item += "<div>" + id[i] + "</div>";
          }
        } else {
          item = "<div>Click update to add a card</div>";
        }
        $("#content").append(
          '<div class="checkout__card">' +
          '<div class="card__numb">' +
          createnumb +
          "</div>" +
          "<div class='card__cvc'>" +
          id +
          "</div>" +
          "<div class='card__exp'>" +
          exp +
          "</div>" +
          '<button class="card__remove">Delete</button>' +
          '<button class="card__update">Update</button>' +
          "</div>"
        );
        $("#cc-number").val("");
        $("#cc-exp").val("");
        $("#cc-cvc").val("");
        /*  $(".payment").toggle();*/
        saveData();
      }
    });
    //Close out of creating a new item
    /*  $(".close").click(function() {
    $("#cc-number").val("");
    $("#cc-cvc").val("");
    $(".create").toggle();
  });*/
    //Get inputs and open edit window to update the items:
    $("#content").on("click", ".card__update", function() {
      $selectedItem = $(this).closest(".checkout__card");
      $(".updatenumb").val(
        $(this)
        .closest(".checkout__card")
        .find(".card__numb")
        .text()
      );
      $(".updateexp").val(
        $(this)
        .closest(".checkout__card")
        .find(".card__exp")
        .text()
      );
      $(".updatecvc").val(
        $(this)
        .closest(".checkout__card")
        .find(".card__cvc")
        .text()
      );
      $(".card__modal").toggle();
    });
    //Save changes and update the items (error:changes all items when clicked):
    $(".card__modal").on("click", ".card__save", function() {

      if (valid) {
        var id = $(".updatecvc").val();
        var numb = $(".updatenumb").val();
        var exp = $(".updateexp").val();
        var item = "";
        if (id[0]) {
          for (var i = 0; i < id.length; i++) {
            item += "<div>" + id[i] + "</div>";
          }
        } else {
          item = "<p>Click edit to add a card</p>";
        }

        $selectedItem.html(
          '<div class="card__numb">' +
          numb +
          "</div>" +
          "<div class='card__cvc'>" +
          id +
          "</div>" +
          "<div class='card__exp'>" +
          exp +
          "</div>" +
          '<button class="card__remove">Deleted(saved)</button>' +
          '<button class="card__update">Updated(saved)</button>'
        );
        $(".updatenumb").val("");
        $(".updateexp").val("");
        $(".updatecvc").val("");
        $(".card__modal").toggle();
        saveData();
      } else {}
    });
    //Discard any of these changes:
    $(".card__discard").click(function() {
      $(".updatenumb").val("");
      $(".updateexp").val("");
      $(".updatecvc").val("");
      $(".card__modal").toggle();
    });
    //Delete an item:
    $("#content").on("click", ".card__remove", function() {
      $(this)
        .closest(".checkout__card")
        .remove();
      saveData();
    });
  });
});

#content {
  display: flex;
  background-color: #f5f5f5;
  border: 1px solid #c2c2c2;
}

.checkout__card {
  display: flex;
  align-items: center;
}

.card__numb,
.card__cvc,
.card__exp {
  padding: 3px;
  margin: 3px;
  border: 1px solid;
}

payment__card,
.card__modal {
  display: none;
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 200px;
  overflow: hidden;
  border: 2px solid;
}

input {
  border: 2px solid;
}

.field {
  background: transparent;
  font-weight: 400;
  border: 0;
  color: #31325f;
  outline: none;
  flex: 1;
  padding-right: 10px;
  padding-left: 10px;
  cursor: text;
}

.field::-webkit-input-placeholder {
  color: #cfd7e0;
}

.field::-moz-placeholder {
  color: #cfd7e0;
}

.outcome {
  float: left;
  width: 100%;
  padding-top: 8px;
  min-height: 24px;
  text-align: center;
}

.success,
.error {
  display: none;
  font-size: 13px;
}

.success.visible,
.error.visible {
  display: inline;
}

.error {
  color: #e4584c;
}

.success {
  color: #666ee8;
}

.success .token {
  font-weight: 500;
  font-size: 13px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://js.stripe.com/v3/"></script>
<form class="payment" action="//httpbin.org/post" method="POST">
  <input type="hidden" name="token" />
  <div class="">
    <label>
        <span>Card number</span>
        <div id="cc-number" class="field"></div>
      </label>
    <label>
        <span>Expiry date</span>
        <div id="cc-exp" class="field"></div>
      </label>
    <label>
        <span>CVC</span>
        <div id="cc-cvc" class="field"></div>
      </label>
  </div>
  <button type="submit" class="btn--payment">Confirm</button>
  <button type="button" class="btn--save">Save</button>
  <div class="outcome">
    <div class="error"></div>
    <div class="success">
      Success! Your Stripe token is <span class="token"></span>
    </div>
  </div>
</form>
<div id="container">
  <div id="content">
    <div class="checkout__card">
      <div class="card__numb">4353 2455 2346 8236</div>
      <p class="card__cvc">101</p>
      <p class="card__exp">01/24</p>
      <button class="card__remove">Delete</button>
      <button class="card__update">Update</button>
    </div>
  </div>
  <!-- <button class="btn--addcard">Add Card</button>-->
</div>

<div class="card__modal">
  <div class="card__board">
    <form class="payment" action="//httpbin.org/post" method="POST">
      <input type="hidden" name="token" />
      <div class="">
        <label>
        <span>Card number</span>
        <div class="field updatenumb"></div>
      </label>
        <label>
        <span>Expiry date</span>
        <div class="field updateexp"></div>
      </label>
        <label>
        <span>CVC</span>
        <div class="field updatecvc"></div>
      </label>
      </div>
      <button type="submit" class="btn--payment">Confirm</button>
      <button type="button" class="btn--save">Save</button>
      <div class="outcome">
        <div class="error"></div>
        <div class="success">
          Success! Your Stripe token is <span class="token"></span>
        </div>
      </div>
    </form>
    <button class="card__save">Save</button>
    <button class="card__discard">Discard</button>
  </div>
</div>

Answer 1

 var valid = $(".card__board").paymentForm("valid");

由于上面的div元素中没有称为PaymentForm的方法，因此您无法从上述代码中获得卡的有效状态。

相反，您可以单击stripe.createToken(cardNumberElement)按钮来调用.btn--save方法并获得卡的有效性，然后进行保存或更新操作。

 $(".payment").on("click", ".btn--save", function() {
    stripe.createToken(cardNumberElement).then(function(result){
        if(result.token){
         // do your stuff
        }else{
       // show the error
       }
    });
 });

或者，对于您的代码，您可以具有一个全局变量来维持卡的有效性状态，更新.payment form submit上的变量值，并在保存或更新按钮单击时检查该变量。

$(document).ready(function() {
  var stripe = Stripe("pk_test_6pRNASCoBOKtIshFeQd4XMUh");
  var elements = stripe.elements();
  var isValidCard =false;
 var style = {
    base: {
      iconColor: "#666EE8",
      color: "#31325F",
      lineHeight: "40px",
      fontWeight: 600,
      fontSize: "16px",

      "::placeholder": {
        color: "#CFD7E0",
        fontWeight: 400
      }
    }
  };

  var cardNumberElement = elements.create("cardNumber", {
    style: style
  });
  cardNumberElement.mount("#cc-number");

  var cardExpiryElement = elements.create("cardExpiry", {
    style: style
  });
  cardExpiryElement.mount("#cc-exp");

  var cardCvcElement = elements.create("cardCvc", {
    style: style
  });
  cardCvcElement.mount("#cc-cvc");

  function setOutcome(result) {
    var successElement = document.querySelector(".success");
    var errorElement = document.querySelector(".error");
    successElement.classList.remove("visible");
    errorElement.classList.remove("visible");

    if (result.token) {
      // In this example, we're simply displaying the token
      successElement.querySelector(".token").textContent = result.token.id;
      successElement.classList.add("visible");
      isValidCard = true;
      // In a real integration, you'd submit the form with the token to your backend server
      //var form = document.querySelector('form');
      //form.querySelector('input[name="token"]').setAttribute('value', result.token.id);
      //form.submit();
    } else if (result.error) {
      errorElement.textContent = result.error.message;
      errorElement.classList.add("visible");
      isValidCard=false;
    }
  }
   document.querySelector(".payment").addEventListener("submit", function(e) {
    e.preventDefault();
    var options = {};
    stripe.createToken(cardNumberElement, options).then(setOutcome);
  });

    $(".payment").on("click", ".btn--save", function() {
     // var valid = $(".card__board").paymentForm("valid");
      if(isValidCard){
      }
    });

});