时间戳

首页 > 解决方案 > 使用托管付款字段时启用自动完成

bluesnap - 使用托管付款字段时启用自动完成

问题描述

我想知道是否可以启用存储在浏览器中的信用卡的自动完成功能，例如使用简单的 html，浏览器会显示自动完成存储的信用卡详细信息的选项。

<form method="post" id="usrForm">
  <h4>Do not use a real card</h4>
  <label for="nameoncard">Name on Card</label>
  <input type="text" id="nameoncard" name="nameoncard" autocomplete="cc-name">
  <label for="ccnumber">Credit Card Number</label>
  <input type="text" id="ccnumber" name="ccnumber" autocomplete="cc-number">
  <label for="cc-exp-month">Expiration Month</label>
  <input type="number" id="cc-exp-month" name="cc-exp-month" autocomplete="cc-exp-month">
  <label for="cc-exp-year">Expiration Year</label>
  <input type="number" id="cc-exp-year" name="cc-exp-year" autocomplete="cc-exp-year">
  <label for="cvv2">CVV</label>
  <input type="text" id="cvv2" name="cvv2" autocomplete="cc-csc">
  <input type="submit" value="Submit" name="submit">
</form>

我们正在使用带有托管付款字段的表单，如下所示：

<div class="panel panel-default bootstrap-basic">
  <form class="panel-body" action="your-form-handling-page" method="POST" id="checkout-form" onsubmit="return do_when_clicking_submit_button()">
    <div class="row">
       <div class="form-group col-md-12">
          <label for="cardholder-name">Name on Card</label>
          <input type="text" class="form-control" id="cardholder-name" placeholder="Full Name">
          <span class="helper-text"></span>
       </div>
       <!--Hosted Field for CC number-->
       <div class="form-group col-md-12">
          <label for="card-number">Card Number</label>
          <div class="input-group">
            <div class="form-control" id="card-number" data-bluesnap="ccn"></div>
            <div id="card-logo" class="input-group-addon"><img src="https://files.readme.io/d1a25b4-generic-card.png" height="20px"></div>
         </div>
         <span class="helper-text" id="card-help"></span>
       </div>
             <!--Hosted Field for CC EXP-->
       <div class="form-group col-xs-7">
          <label for="exp-date">Exp. Date</label>
          <div class="form-control" id="exp-date" data-bluesnap="exp"></div>
          <span class="helper-text"></span>
       </div>
            <!--Hosted Field for CC CVV-->
            <div class="form-group col-xs-5">
         <label for="cvv">Security Code</label>
         <div class="form-control" id="cvv" data-bluesnap="cvv"></div>
         <span class="helper-text"></span>
      </div>
    </div>  

        <button class="btn btn-success btn-lg col-xs-6 col-xs-offset-3" type="submit" id="submit-button">Pay Now</button>

        </form>

</div>

<!--BlueSnap Hosted Payment Fields JavaScript file-->
        <script type="text/javascript" src="https://sandbox.bluesnap.com/services/hosted-payment-fields/v1.0/bluesnap.hpf.mini.js"></script>

如果有办法让浏览器建议自动完成，那就太棒了。

我在这里遗漏了一些明显的东西吗？任何帮助将不胜感激。

标签： bluesnap

解决方案

我为 BlueSnap 工作。不幸的是，托管字段本身已禁用自动完成功能，因此无论您向客户端代码中的 div 添加什么内容，这都不起作用（如果您检查该字段，您将看到 autocomplete="off"）。我在我们的系统中打开了一个错误来支持这一点，因为我明白为什么它是一个重要的功能。感谢您发布此信息。

推荐阅读