在SvelteKit中集成Paddle遇400错误，无法唤起结账框求助

问题详情 #

我正尝试在SvelteKit中集成Paddle支付工具，但遭遇400错误，无法显示结账框。已查阅谷歌资料及官方文档，仍未定位问题原因，当前使用sandbox环境进行测试。

弹窗提示内容 #

Something went wrong
Please try again later. If the issue persists, you can contact our support team using the button below.

控制台报错信息 #

Failed to load resource: the server responded with a status of 400 ()

实现代码 #

import { onMount } from 'svelte';
import { initializePaddle, type Paddle } from '@paddle/paddle-js';
import { PADDLE_CLIENT_API, PADDLE_PRICE_ID } from '$lib';

let paddlePriceId = [{ priceId: PADDLE_PRICE_ID, quantity: 1 }];
let paddle: Paddle;

onMount(async () => {
    const paddleInstance = await initializePaddle({
        environment: 'sandbox',
        token: `${PADDLE_CLIENT_API}`
    });
    if (paddleInstance) {
        paddle = paddleInstance;
    }
});

const startCheckout = async () => {
    try {
    await paddle?.Checkout.open({
        settings: {
            displayMode: 'overlay',
            theme: 'light',
            locale: 'en'
        },
        items: paddlePriceId
    });
}  catch (error) {
    console.error('Error opening checkout:', error);
    // Handle the error, e.g., display an error message to the user
}

};

排查与解决方案 #

核心排查点 #

• 验证客户端令牌有效性：确认PADDLE_CLIENT_API是Sandbox环境的有效令牌，检查是否拼写错误、过期，或误用了生产环境令牌。
• 检查价格ID正确性：确保PADDLE_PRICE_ID属于Sandbox环境，且对应产品/订阅在Paddle后台已正确配置、状态正常。
• 确认实例初始化状态：避免在paddle实例未就绪时调用结账方法，可在触发前增加实例存在性判断，或等待初始化完成后启用结账按钮。
• 查看详细错误响应：在浏览器Network面板中找到返回400的请求，查看响应体的具体错误描述（Paddle通常会给出令牌无效、价格ID不存在等具体原因）。
• 检查CORS配置：确认你的SvelteKit应用域名已添加到Paddle Sandbox后台的允许列表，避免跨域请求被拦截。

代码优化建议 #

修改代码以确保初始化完成后再触发结账，同时增强错误捕获：

import { onMount } from 'svelte';
import { initializePaddle, type Paddle } from '@paddle/paddle-js';
import { PADDLE_CLIENT_API, PADDLE_PRICE_ID } from '$lib';

let paddlePriceId = [{ priceId: PADDLE_PRICE_ID, quantity: 1 }];
let paddle: Paddle | null = null;
let isPaddleReady = false;

onMount(async () => {
    try {
        const paddleInstance = await initializePaddle({
            environment: 'sandbox',
            token: PADDLE_CLIENT_API
        });
        paddle = paddleInstance;
        isPaddleReady = true;
    } catch (initError) {
        console.error('Paddle初始化失败:', initError);
    }
});

const startCheckout = async () => {
    if (!paddle || !isPaddleReady) {
        console.error('Paddle实例未就绪');
        return;
    }
    try {
        await paddle.Checkout.open({
            settings: {
                displayMode: 'overlay',
                theme: 'light',
                locale: 'en'
            },
            items: paddlePriceId
        });
    } catch (error) {
        console.error('打开结账框失败:', error);
        // 可在此处向用户展示具体错误提示
    }
};

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