问题描述
我们正在使用 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àáâäãåąčćęèéêëėįìíîïłńòóôöõøùúûüųūÿýżźñçčšžÀÁÂÄÃÅĄĆČĖĘÈÉÊËÌÍÎÏĮŁŃÒÓÔÖÕØÙÚÛÜŲŪŸÝŻŹÑßÇŒÆČŠŽ∂ð /\\&-.']{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/