有没有办法让 Opayo iframe 接受来自 Google Pay 的自动填充卡详细信息?

问题描述

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

iframe 中的卡片过期字段只接受 MMYY 格式的过期日期,并且限制为 4 个字符

如果用户从其 Google Pay 帐户中保存的卡片中自动填充其卡片详细信息,Google Pay 会自动填充 /,从而导致 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>

如果 Opayo 需要有关自动填充好处的详细信息,以下是来自 ebay 的博客文章,可能会有所帮助:https://tech.ebayinc.com/engineering/autofill-deep-dive/