Paddle Checkout Integration Error: "One or more parameters (product id or seller) are missing"

Question

I'm trying to integrate Paddle's inline checkout into my React app. I followed the documentation and set up the initialization and checkout functions, but when I attempt to open the checkout, I receive a 400 Bad Request error with the message:

One or more parameters (product id or seller) are missing.

Here's the error stack from my browser's console:

Details:

• Vendor ID and Product ID are both set properly from environment variables.

• The product ID is selected dynamically based on the user's plan, but it seems the request still fails.

• The error suggests that the product or seller parameters are missing.

What I’ve Tried:

• Verified that process.env.NEXT_PUBLIC_PADDLE_VENDOR_ID and paddleProductId contain correct values.

• Checked if the environment variable NEXT_PUBLIC_PADDLE_VENDOR_ID is correctly set for the sandbox environment.

• Ensured that productIds[selectedPlan.name] and priceIds[selectedPlan.name] are properly defined.

Questions:

1. What might be missing in the request that causes the "400 Bad Request" error?

2. How can I ensure that all required parameters are being sent correctly?

3. Are there any issues with the way I'm setting up the Paddle checkout configuration?

Any help would be appreciated! Thanks in advance.

4.1ff59060.chunk.js:2

GET https://sandbox-checkout-service.paddle.com/create/v2/checkout/product/pro_01jd1w5q6dvfbj2c7r7dyydvry/?product=pro_01jd1w5q6dvfbj2c7r7dyydvry&parentURL=http%3A%2F%2Flocalhost%3A3000%2Fcheckout&parent_url=http%3A%2F%2Flocalhost%3A3000%2Fcheckout&referring_domain=localhost%3A3000%20%2F%20localhost%3A3000&locale=en&guest_email=xivo%40mailinator.com&guest_country=us&guest_postcode=14269&vendor=24755&passthrough=%7B%7D&disable_logout=true&display_mode=overlay&apple_pay_enabled=false&paddlejs-version=1.2.1&checkout_initiated=1732270263614&popup=true&paddle_js=true&is_popup=true 400 (Bad Request)

Code Snippet: Here’s the relevant code where I set up Paddle:

useEffect(() => {
    const initializePaddle = () => {
      if (typeof window.Paddle !== 'undefined') {
        const vendorId = parseInt(process.env.NEXT_PUBLIC_PADDLE_VENDOR_ID);
        if (isNaN(vendorId)) {
          console.error("Invalid Vendor ID.");
          return;
        }
        const environment = process.env.NEXT_PUBLIC_PADDLE_ENVIRONMENT || "sandbox";
        Paddle.Environment.set(environment);
        Paddle.Setup({
          vendor: vendorId,
        });
        console.log(`Paddle initialized with vendor ${vendorId} in ${environment} mode.`);
      } else {
        console.error("Paddle is not loaded properly.");
      }
    };

    if (isPaddleLoaded) {
      initializePaddle();
    }
  }, [isPaddleLoaded]);

const handleCheckout = async (e) => {
    e.preventDefault();
    const paddlePriceId = priceIds[selectedPlan.name]?.[selectedPlan.planTime];
    const paddleProductId = productIds[selectedPlan.name]?.[selectedPlan.planTime];

    if (!paddlePriceId || !paddleProductId) {
      alert('Invalid plan or plan time selected.');
      return;
    }

    if (!formData.email || !formData.country || !formData.zipCode) {
      alert('Please complete all required fields.');
      return;
    }

    try {
      Paddle.Checkout.open({
        email: formData.email,
        country: formData.country,
        postcode: formData.zipCode,
        product: paddleProductId, // This should be a valid product ID from your system
        vendor: process.env.NEXT_PUBLIC_PADDLE_VENDOR_ID,
        settings: {
          displayMode: "inline",
          frameTarget: "checkout-container",
          frameInitialHeight: "450",
          frameStyle: "width: 100%; min-width: 312px; background-color: transparent; border: none;",
        },
        items: [
          {
            price_id: paddlePriceId,
            quantity: 1,
          },
        ],
        customer: [
          {
            name: selectedPlan.name,
            amount: parseFloat(selectedPlan.currentPrice),
          },
        ],
        passthrough: JSON.stringify({
          userId: formData.userId,
          planId: selectedPlan.planId,
        }),
        currency: selectedPlan.selectedCurrency.code,
        locale: "en",
        method: "card",
        disableLogout: true,
        successCallback: (data) => {
          console.log("Checkout complete:", data);
          router.push("/thank-you");
        },
        closeCallback: () => console.log("Checkout closed"),
        errorCallback: (error) => {
          console.error("Paddle checkout error:", error);
          alert(`Error: ${error.message}`);
        },
      });
    } catch (error) {
      console.error('Error during checkout:', error);
    }
};