Next.js 12中Snap Finance SDK支付按钮无法渲染求助

针对你在Next.js中集成Snap UK支付SDK时遇到的按钮不渲染问题，以下是具体的排查和修复方案：

1. 修正Script组件的加载与初始化逻辑 #

Next.js的Script组件默认加载策略可能导致SDK还未完全加载就触发了初始化代码。通过指定加载策略并利用onLoad回调，可以确保SDK加载完成后再执行初始化：

'use client'; // App Router 环境必须添加，Pages Router 可省略

import { Script } from 'next/script';
import { useState, useCallback } from 'react';

export default function TestPage() {
  const [sdkReady, setSdkReady] = useState(false);
  const clientId = "cfB9gZpXGM0HkhwVMtfyaD0m";
  // 假设transaction是你定义的交易对象，需确保其值正确
  const transaction = { /* 你的交易数据 */ };

  // SDK加载完成后初始化
  const initSnapSdk = useCallback(() => {
    const win = window as any;
    if (win.snapuk) {
      win.snapuk.init(clientId);
      setSdkReady(true);
    }
  }, [clientId]);

  const renderPayButton = useCallback(() => {
    if (!sdkReady) return;
    
    const win = window as any;
    // 先检查容器是否存在
    const checkoutContainer = document.getElementById('snap-uk-checkout');
    if (!checkoutContainer) {
      console.error('Snap UK checkout container not found');
      return;
    }
    
    // 清空容器避免重复渲染
    checkoutContainer.innerHTML = '';
    
    win.snapuk.checkout.button({
      transaction,
      merchantId: clientId,
    });
  }, [sdkReady, transaction, clientId]);

  return (
    <div>
      <Script
        src="https://sandbox-sdk.snapfinance.co.uk/v1/snapuk.min.js"
        strategy="afterInteractive" // 确保在页面交互后加载SDK
        onLoad={initSnapSdk}
      />
      <h1>Hello</h1>
      <div id="snap-uk-checkout"></div>
      <button onClick={renderPayButton} disabled={!sdkReady}>Pay Now</button>
    </div>
  );
}

2. 修复useCallback的依赖缺失问题 #

你的原代码中RenderButton的useCallback依赖数组为空，但函数内部使用了transaction变量，这会导致闭包捕获到旧的变量值（甚至可能是undefined）。务必将所有用到的外部变量加入依赖数组，确保每次变量更新时函数能获取到最新值。

3. 确保组件在客户端环境运行 #

如果使用Next.js 13+的App Router，页面组件默认是服务器组件，无法访问window对象。必须在组件顶部添加'use client'指令，将组件转为客户端组件，才能正常操作浏览器环境的API。

4. 额外排查步骤 #

• 打开浏览器开发者工具的控制台，查看是否有报错信息（比如SDK加载失败、transaction未定义、容器找不到等）
• 确认transaction对象的结构完全符合Snap UK文档要求，纯HTML能运行说明该对象在纯HTML中是正确的，需确保在Next.js中也传入了相同结构的值
• 避免重复调用win.snapuk.init，通过状态变量sdReady控制只初始化一次

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