Svelte Kit集成PayPal按钮报错：Cannot read properties of null (reading 'Buttons')

可能的原因及修复方案 #

1. DOM容器未挂载就执行渲染逻辑 #

Svelte组件初始化阶段，#paypal-button-container元素可能还未被渲染到DOM中，直接调用render()会导致找不到目标元素，进而引发后续的paypal对象调用错误。

修复：使用Svelte的onMount钩子确保DOM就绪后再加载脚本
修改代码，将PayPal初始化逻辑放到onMount生命周期钩子内：

<script>
import { onMount } from 'svelte';
import { loadScript } from '@paypal/paypal-js';

let amount = 50;
const CLIENT_ID = import.meta.env.PUBLIC_PAYPAL_CLIENT_API;

onMount(async () => {
    try {
        const paypal = await loadScript({ 'client-id': CLIENT_ID });
        if (!paypal) throw new Error('PayPal脚本加载失败');
        
        paypal.Buttons({
            style: {
                color: 'blue',
                shape: 'pill'
            },
            createOrder: (data, actions) => {
                return actions.order.create({
                    purchase_units: [
                        {
                            amount: {
                                value: amount
                            }
                        }
                    ]
                });
            },
            onApprove: async (data, actions) => {
                const details = await actions.order.capture();
                alert('Payment successful!');
            },
            onError: (err) => {
                alert('Something went wrong');
                console.log('Something went wrong', err);
            }
        }).render("#paypal-button-container");
    } catch (err) {
        console.error('PayPal集成出错:', err);
        alert('PayPal加载失败，请重试');
    }
});
</script>

<!-- 确保页面中存在该容器元素 -->
<div id="paypal-button-container"></div>

2. 未处理脚本加载失败的异常 #

如果loadScript因网络问题、无效CLIENT_ID等原因加载失败，会返回null，此时调用paypal.Buttons必然触发报错。

修复：添加错误捕获逻辑，校验paypal对象有效性
上述代码已包含该处理：通过try/catch包裹整个流程，捕获加载和初始化过程中的异常；同时判断paypal对象是否存在，避免后续空值调用。

3. 环境变量配置错误 #

Svelte Kit中前端可访问的环境变量必须以PUBLIC_为前缀，确保你的客户端ID变量名符合要求：

• 开发环境：在.env文件中配置PUBLIC_PAYPAL_CLIENT_API=你的PayPal客户端ID
• 生产环境：根据部署平台的规则设置对应环境变量，保证变量名和值正确。

额外注意事项 #

• 确保页面中仅存在一个id="paypal-button-container"的元素，避免ID冲突。
• 若amount是动态变化的值，可通过Svelte的反应式语句（$:）监听金额变化，重新初始化PayPal按钮。

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