如何构建可嵌入网站的React结账Widget组件

一、核心脚本（cc.js）的核心逻辑 #

• 因为用了defer，脚本会等DOM解析完成后执行，直接查找页面中的<sc-checkout>元素即可
• 提取元素上的product、subdomain、coupon等属性，作为后续渲染UI、请求数据的核心参数

二、自定义元素处理（不用复杂Web Components也能搞定） #

1. 遍历页面中所有<sc-checkout>标签
2. 确定展示模式：可以给元素加mode属性（inline为内嵌模式，popup为弹窗模式），也可以默认弹窗，让用户手动指定内嵌
3. 替换元素内容：
   • 内嵌模式：直接将结账UI的HTML结构插入到<sc-checkout>内部
   • 弹窗模式：在页面底部插入弹窗容器，给<sc-checkout>绑定点击事件，触发弹窗显示

三、样式隔离必须做（避免宿主网站样式打乱你的UI） #

• 优先用CSS Shadow DOM：把UI包裹在Shadow Root里，实现内部样式与外部完全隔离

  const checkoutEl = document.querySelector('sc-checkout');
  const shadowRoot = checkoutEl.attachShadow({ mode: 'open' });
  shadowRoot.innerHTML = `
    <style>/* 这里放置你的结账UI全部样式 */</style>
    <!-- 结账UI的HTML结构 -->
  `;
  

• 兼容旧浏览器的话，给所有类名加唯一前缀，比如sc-checkout-开头，例如.sc-checkout-form、.sc-checkout-btn，降低样式冲突概率

四、两种展示模式的具体实现 #

1. 内嵌模式 #

• 直接将结账UI的HTML、样式插入到<sc-checkout>内部（用Shadow DOM更干净）
• 表单验证、提交等交互逻辑都在Shadow DOM内编写，不会与宿主网站的JS产生冲突

2. 弹窗模式 #

• 脚本创建全屏半透明遮罩和弹窗容器，默认设置display: none隐藏
• 给<sc-checkout>绑定点击事件，触发遮罩和弹窗显示（设置display: block）
• 弹窗内部加载结账UI，添加关闭按钮，点击后隐藏遮罩和弹窗
• 注意将弹窗的z-index设为9999以上，避免被宿主网站元素遮挡

五、数据交互与安全 #

• 用提取到的subdomain和product参数，请求你的后端API获取商品信息、价格等数据
• 表单提交使用Fetch发送请求到后端处理支付流程，必须采用HTTPS协议，防止数据泄露
• 后端需配置CORS，允许所有域名访问（因为面向未注册用户，无法提前配置白名单）

六、兼容性与动态元素处理 #

• 旧浏览器不支持Shadow DOM时，降级使用样式前缀方案
• 脚本内禁止使用document.write，避免破坏宿主网站的DOM结构
• 如果用户动态添加<sc-checkout>元素，使用MutationObserver监听DOM变化，自动初始化新插入的元素

七、示例脚本优化建议 #

可以给<sc-checkout>增加更多可选属性，让用户更灵活控制展示效果：

<script defer src="https://janedoe.webfever.com/checkout/cc.js"></script>
<!-- 内嵌模式 -->
<sc-checkout product="zero-to-one" subdomain="themarv" coupon="" mode="inline"></sc-checkout>
<!-- 弹窗模式，自定义按钮文字 -->
<sc-checkout product="zero-to-one" subdomain="themarv" coupon="" mode="popup" button-text="立即购买"></sc-checkout>

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