React集成Stripe购买按钮遇Uncaught TypeError：无法读取payload属性

问题分析 #

你遇到的Cannot read properties of undefined (reading 'payload')错误，本质是Stripe的buy-button.js脚本加载时机与React组件渲染时机不匹配，以及页面重载时自定义元素的重复初始化/残留状态导致的：

• 首次保存后热重载时，脚本已在浏览器缓存中，组件渲染时自定义元素stripe-buy-button已完成注册，所以正常工作；
• 页面硬重载时，async加载的脚本可能滞后于React组件渲染，导致元素未注册就被挂载，或者脚本重复加载引发内部状态冲突。

解决方案 #

方案1：动态加载脚本并等待加载完成后渲染组件 #

通过React的useEffect动态注入脚本，确保脚本加载完成后再渲染Stripe按钮，避免时机不匹配问题：

import * as React from 'react';

function BuyButtonComponent() {
  const [isStripeReady, setIsStripeReady] = React.useState(false);

  React.useEffect(() => {
    // 检查脚本是否已加载完成
    if (window.StripeBuyButton) {
      setIsStripeReady(true);
      return;
    }

    // 创建并注入脚本标签
    const script = document.createElement('script');
    script.src = 'https://js.stripe.com/v3/buy-button.js';
    script.async = true;
    
    script.onload = () => setIsStripeReady(true);
    script.onerror = () => console.error('Stripe购买按钮脚本加载失败');

    document.head.appendChild(script);

    // 组件卸载时清理脚本
    return () => {
      document.head.removeChild(script);
      // 清理已注册的自定义元素，避免重载时残留状态
      if (customElements.get('stripe-buy-button')) {
        customElements.define('stripe-buy-button', class extends HTMLElement {});
      }
    };
  }, []);

  // 未加载完成时显示加载状态
  if (!isStripeReady) {
    return <div>加载中...</div>;
  }

  return (
    <stripe-buy-button
      buy-button-id="..."
      publishable-key="..."
    />
  );
}

export default BuyButtonComponent;

方案2：关闭React严格模式（临时测试用） #

如果你的应用开启了StrictMode，它会触发组件的双重渲染，可能导致Stripe元素重复初始化。可以暂时移除根组件的<StrictMode>标签测试，确认是否是这个原因：

// 原根组件代码
ReactDOM.createRoot(document.getElementById('root')).render(
  {/* <StrictMode> 临时注释或删除这一行 */}
    <App />
  {/* </StrictMode> */}
);

方案3：验证配置参数正确性 #

确认buy-button-id和publishable-key没有拼写错误，虽然首次加载正常，但重载时参数传递异常也可能引发内部错误（概率较低，但值得排查）。

调试建议 #

• 在浏览器开发者工具的Network面板，查看buy-button.js的加载状态，确认重载时脚本是否成功加载；
• 在Elements面板查看stripe-buy-button元素的属性，确认参数是否正确传递；
• 查看控制台的其他错误信息，是否有脚本加载失败或自定义元素注册失败的提示。

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