How to connect paddle with sveltekit

I am trying to add paddle with sveltekit but I'm stuck with 400 error, I did search on google, read the documentation but I still couldn't understand what am I doing wrong?I know paddle gives production and sandbox option, and I am trying my test on sandbox.I just couldn't see the checkout box ,this is what the alert box says:

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

this is what the console is giving me:

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

Here what I've come up with.

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}};