[Bug]: Multiple checkouts on the same page causing state issues

[transferrocket]

What happened?

I am experiencing state issues when integrating the Paddle.js wrapper into my Next.js project and completing multiple checkouts on the same page. I suspect it has something to do with having multiple paddle instances on the same page, as I am seeing the Cannot call Paddle.Setup() more than once per page, the call was ignored. warning in the console. Unfortunately, I haven't been successful in preventing the creating of multiple paddle instances/destruction of existing instances on navigation.

Steps to reproduce

1. Clone the project at https://github.com/transferrocket/paddle-demo
2. Create a .evn.local file and populate NEXT_PUBLIC_PADDLE_TOKEN & NEXT_PUBLIC_PRICE_ID with valid values
3. Run the project npm run dev
4. Open up a tab at http://localhost:3030
5. Click the button and complete the checkout process
6. Observe the useEffect console log for the checkoutCompleted state variable. It will log true (expected behaviour).
7. Click the Home button.
8. Click the button again and complete the checkout process
9. Observe that there is no useEffect console log for the checkoutCompleted state variable (not expected).

What did you expect to happen?

The useEffect console log for the checkoutCompleted state variable should be displayed as the value of the state variable has changed. More generally, navigating away from and back to the same page should reset the whole page state including the paddle instance.

How are you integrating?

Next.js 14.0.4

Logs

No response

[vijayasingam-paddle]

Hello, Thank you for providing us a reproducible example. We will review the issue and get back to you with a solution.

[transferrocket]

Hello, Thank you for providing us a reproducible example. We will review the issue and get back to you with a solution.

Great! Thanks for the swift reply.

[vijayasingam-paddle]

Hi @transferrocket, Sorry for the delay. We released a fix to handle this issue.

If you are using initializePaddle it should now accept multiple calls and take updated instance of eventCallback

or if you are calling paddle.Setup manually you can replace that with the below snippet. paddle.Initialize is the new name for paddle.Setup, functionally they do the same thing. paddle.Update will accept the same shape of data as Initialize but reset the properties with new value.

if (paddle.Initialized) {
  paddle.Update({ ...props });
} else {
  paddle.Initialize({ ...props });
}

Note: We have't updated our documentation with the new function yet. It should be updated in a few days

Thank you.

[transferrocket]

Hi @vijayasingam-paddle,

thanks for the update! I look forward to giving it a try in the coming days!

Cheers

[vijayasingam-paddle]

Hello, I am going to close this issue as it is fixed. Please feel free to create a new issue if you face any other problems.

Thank you.