Google Pay集成报错：TypeError: 无法读取undefined的'payments'属性

问题原因 #

你用async属性引入Google Pay脚本，意味着脚本会异步加载——浏览器不会等这个脚本下载执行完，就继续运行页面其他代码。第263行的代码在脚本还没加载完成、window.google还未被初始化时就执行了，所以会抛出TypeError: Cannot read properties of undefined (reading 'payments')。

调试时的矛盾现象也和异步加载有关：VS里看不到google对象是因为代码执行瞬间它确实不存在；而console.log(window)在调试器里能看到该对象，是因为调试器会保留对象的引用，当后续脚本加载完成后window被更新，你展开查看时才会看到已经初始化的google。

解决方案 #

1. 监听脚本加载完成事件 #

动态创建脚本标签，通过onload回调确保在脚本加载完成后再执行Google Pay相关代码：

const payScript = document.createElement('script');
payScript.src = 'https://pay.google.com/gp/p/js/pay.js';
payScript.onload = function() {
  // 这里执行你的Google Pay逻辑，比如调用google.payments相关方法
};
document.head.appendChild(payScript);

2. 用DOMContentLoaded事件延迟执行代码 #

如果脚本是放在页面<head>中，可将业务代码包裹在DOMContentLoaded回调里，确保页面和脚本都加载完成后再执行：

document.addEventListener('DOMContentLoaded', function() {
  // 先检查google对象是否存在，再执行逻辑
  if (window.google?.payments) {
    // 编写你的Google Pay相关代码
  }
});

3. 移除async属性（不推荐） #

如果对页面加载性能要求不高，可以去掉async让脚本同步加载，这样脚本执行完成后才会运行后续代码：

<script src="https://pay.google.com/gp/p/js/pay.js"></script>

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