PaddleHQ / paddle-js-wrapper

Wrapper to load Paddle.js as a module and use TypeScript definitions when working with methods.
Apache License 2.0
41 stars 6 forks source link

Setup for nextjs 14 with typescrypt error 401 #25

Closed IsmetGlumcevic closed 7 months ago

IsmetGlumcevic commented 7 months ago

this is example of my component

 "use client"
import {
    initializePaddle,
    InitializePaddleOptions,
    Paddle,
  } from "@paddle/paddle-js";
  import { useEffect, useState } from "react";

export default function CheckoutButton({planId}: any){
   const [paddle, setPaddle] = useState<Paddle>();
    useEffect(() => {
      const token = process.env.NEXT_PUBLIC_PADDLE_TOKEN;
      const type = "sandbox";
      initializePaddle({
        environment: type,
        token: token,
        eventCallback: function(data: any) {
          console.log(data);
        }
      } as unknown as InitializePaddleOptions).then((paddleInstance: Paddle | undefined) => {
        if (paddleInstance) {
          setPaddle(paddleInstance);
        }
      });
    }, []);

  const openCheckout = () => {
    paddle?.Checkout.open({
      items: [
        {
          priceId: planId, 
          quantity: 1,
        },
      ],
      customer: {
        email: "mail@email.com" 
      }
    });
  };

  return (
    <button
      className="mt-10 block w-full rounded-md bg-amber-500 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-amber-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
      onClick={openCheckout}
    >
    Pristupi
    </button>
    );
}
I get these errors

in API headers 

Status Code: 401 Unauthorized

in API response 

{
    "errors": [
        {
            "status": 401,
            "code": "transaction-checkout-payment-error",
            "details": "This payment was declined by your bank. Please try again, or use a different payment method. Contact your bank for further information. ID: xxxx"
        }
    ]
}
vijayasingam-paddle commented 7 months ago

Hi @IsmetGlumcevic , Looking at the error message, it appears that something failed during the payment.

Can you please let us know which test card you were using from our documentation as testing with real cards may not work.

Thank you.