分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了有没有办法让 Opayo iframe 接受来自 Google Pay 的自动填充卡详细信息？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决有没有办法让 Opayo iframe 接受来自 Google Pay 的自动填充卡详细信息？？

开发过程中遇到有没有办法让 Opayo iframe 接受来自 Google Pay 的自动填充卡详细信息？的问题如何解决？下面主要结合日常开发的经验，给出你关于有没有办法让 Opayo iframe 接受来自 Google Pay 的自动填充卡详细信息？的解决方法建议，希望对你解决有没有办法让 Opayo iframe 接受来自 Google Pay 的自动填充卡详细信息？有所启发或帮助；

我们正在使用 Opayo 直接结账来获取 Opayo iframe 中的卡详细信息：https://developer-eu.elavon.com/docs/opayo/integrate-our-drop-checkout

iframe 中的卡片过期字段只接受 @H_844_5@mMYY 格式的过期日期，并且限制为 4 个字符

如果用户从其 Google Pay 帐户中保存的卡片中自动填充其卡片详细信息，Google Pay 会自动填充 /，从而导致 @H_844_5@mM/Y 无效输入

有人知道解决这个问题的方法吗？

解决方法

我会向 Opayo 提出错误/功能请求。

根据查看源，他们似乎正在尝试禁用自动填充 (autocomplete="off")：

<form id="card-details-form">
  <div class="form-group">
      <div class="label-column">
          <label>Name:</label>
      </div>
      <div class="input-column">
          <input name="cardholder-name" placeholder="Cardholder Name" maxlength="50" autocomplete="off" pattern="^[a-zA-Z0-9àáâäãåąčćęèéêëėįìíîïłńòóôöõøùúûüųūÿýżźñçčšžÀÁÂÄÃÅĄĆČĖĘÈÉÊËÌÍÎÏĮŁŃÒÓÔÖÕØÙÚÛÜŲŪŸÝŻŹÑßÇŒÆČŠŽ∂ð /\\&amp;-.']{1,50}$" required="">
      </div>
  </div>
  <div class="form-group">
      <div class="label-column">
          <label>Card:</label>
      </div>
      <div class="input-column">
          <input type="tel" name="card-number" inputmode="numeric" placeholder="0000 0000 0000 0000" maxlength="20" autocomplete="off" pattern="^\d{12,20}$" required="">
      </div>
  </div>
  <div class="form-group">
      <div class="label-column">
          <label>Expiry:</label>
      </div>
      <div class="input-column">
          <input type="tel" name="expiry-date" inputmode="numeric" placeholder="MMYY" maxlength="4" autocomplete="off" pattern="^(0[1-9]|1[012])\d{2}$" required="" title="This field is required" class="invalid">
      </div>
  </div>
  <div class="form-group">
      <div class="label-column">
          <label>CVC:</label>
      </div>
      <div id="security-code-input-column" class="input-column">
          <input type="tel" name="security-code" inputmode="numeric" placeholder="123" maxlength="4" autocomplete="off" pattern="^\d{3,4}$" required="">
      </div>
      <span id="cvc-Help" class="icon-BACkground" data-Help-dialog-id="d2189a80-12f9-4a03-bd6a-d34b8ccb01a7"></span>
      <div id="cvc-Help-content" class="hidden">Card Verification Code,the 3-digit number printed on the BACk of your card. For American Express it's the 4-digit number on the front.</div>
  </div>
</form>