三星Galaxy设备Chrome移动端Stripe.js自动填充功能失效问题

这个问题是@stripe/react-stripe-js@1.x和@stripe/stripe-js@1.x的已知兼容问题，仅触发于三星Galaxy设备的移动端Chrome浏览器，根因为该环境下GPay填充完成后没有触发Stripe CardElement内置的状态同步事件，且弹窗期间CardElement保持焦点时，组件不会主动拉取最新的填充值。

解决方案 #

方案1：升级依赖（推荐）

Stripe官方在2022年的版本更新中已经修复了该场景的兼容问题，你可以将两个依赖升级至以下版本即可解决：

"@stripe/react-stripe-js": "^2.3.0",
"@stripe/stripe-js": "^2.2.0"

升级后不需要修改原有业务逻辑，组件会自动适配三星移动端Chrome的填充事件。

方案2：临时兼容（无法升级版本时使用）

如果你的项目暂时无法升级大版本依赖，可以通过手动触发组件状态同步解决：

• 监听GPay的填充完成回调，获取CardElement实例后手动执行失焦再聚焦的操作，强制组件刷新内部状态：

// GPay填充完成回调逻辑中插入以下代码
const cardElement = elements.getElement(CardElement);
if (cardElement) {
  cardElement.blur();
  // 延迟50ms触发focus，避免三星浏览器的事件冲突
  setTimeout(() => cardElement.focus(), 50);
}

• 额外可在CardElement的配置中显式关闭禁用自动填充的开关，确保填充事件可被捕获：

const cardElementOptions = {
  disableAutofill: false,
  // 其余原有配置保持不变
  style: {}
};

// 组件传入配置
<CardElement options={cardElementOptions} />

验证注意 #

该问题仅出现在三星真机的Chrome浏览器中，桌面端模拟器、其他品牌安卓设备的Chrome浏览器均不会触发，验证时请使用对应真机测试。

内容的提问来源于stack exchange，提问作者jamescharlesworth