Embedded Checkouts: Button Stuck Loading After Successful Purchase

[zaini]

From another ticket (apart from the user reporting this)

Embedded Checkout Button Stuck Loading After Successful Purchase - No Redirect Handling

Description

When using Polar's embedded checkout, after completing a purchase successfully (email confirmation received), the checkout button remains stuck on "Waiting confirmation from Kenzi" and never redirects the user. The issue occurs despite the purchase and subscription being processed successfully.

Related documentation: https://docs.polar.sh/features/checkout/embed

Current Behavior

1. User clicks purchase button and embedded checkout opens
2. User completes purchase process
3. Email confirmation is received confirming successful purchase and subscription
4. Checkout remains stuck on "Waiting confirmation from Kenzi" loading state
5. No redirect occurs automatically
6. User is left in limbo state despite successful transaction

Expected Behavior

After successful purchase completion:

1. Checkout should automatically detect the successful payment
2. User should be redirected to success page or checkout should close
3. Clear indication that purchase was successful within the embed
4. No manual redirect handling should be required for basic functionality

Screenshots

See attached screenshot showing the checkout stuck on "Waiting confirmation from Kenzi" state while developer console shows the successful transaction.

Environment:

• Operating System: Windows 10
• Browser (if applicable): Chrome
• Framework: Next.js (React)
• Polar Checkout Package: @polar-sh/checkout

Code Sample

"use client"

import { useEffect, useState } from 'react'
import { PolarEmbedCheckout } from "@polar-sh/checkout/embed";
import { Button } from '../ui/button'
import { createCheckoutSession } from '@/app/actions/polar/polar-actions';

const PurchaseButton = ({ children }: { children: React.ReactNode }) => {
    const [checkoutEmbedInstance, setCheckoutEmbedInstance] = useState<PolarEmbedCheckout | null>(null)

    useEffect(() => {
        return () => {
            if (checkoutEmbedInstance) {
                checkoutEmbedInstance.close()
            }
        }
    }, [checkoutEmbedInstance])

    const openCheckout = async () => {
        const session = await createCheckoutSession()
        const checkout = await PolarEmbedCheckout.create(session.url);
        setCheckoutEmbedInstance(checkout);
    }

    return (
        <Button onClick={openCheckout}>
            {children}
        </Button>
    )
}

export default PurchaseButton

Questions

1. Is manual redirect handling required for embedded checkout success flows?
2. Should event listeners be implemented to detect successful purchases?
3. Is there a callback or promise resolution that should be handled?
4. Are there additional configuration options needed for proper redirect behavior?

Additional Context

• Purchase processing works correctly (email confirmations received)
• Issue appears to be with the embedded checkout UI state management
• No clear documentation on handling post-purchase flow in embedded mode

---

[zaini]

I've tried adding the following but have the same issue with no redirect occuring:

        checkout.addEventListener('success', (event) => {
            if (!event.detail.redirect) {
                router.push('/dashboard/success')
            }
        })

        checkout.addEventListener('close', () => {
            setCheckoutEmbedInstance(null)
        })

Following docs here: https://docs.polar.sh/features/checkout/embed

[zaini]

Bit more context on the error when I try it in prod:

There was also an error on the embed in red text saying that the checkout does not exist 🤔

I also cannot close the dialog with the X button on the top right.

[zaini]

From some brief debugging, it seems like await PolarEmbedCheckout.create never resolves (print statements after that don't run). Investigating this.

UPDATED:

I currently suspect that the issues stem from the loaded event not being triggered because embedOrigin is null here:

https://github.com/polarsource/polar/blob/main/clients/apps/web/src/components/Checkout/Embed/CheckoutEmbedLoaded.tsx#L15

You can see this request returns null:

And I believe that request is being made here:

https://github.com/polarsource/polar/blob/main/clients/apps/web/src/app/checkout/%5BclientSecret%5D/confirmation/page.tsx#L22-L26

The checkoutsClientGet endpoint is of interest is found here:

https://github.com/polarsource/polar-js/blob/main/src/funcs/checkoutsClientGet.ts

I'm not sure where the actual logic for this is though... I want to see how the embedOrigin field is set.

[zaini]

Fixed by following this instruction:

I was not properly setting the embedOrigin when using my custom checkout session.

This should probably be better handled or throw some error otherwise the UI and states are quite broken. Or a default embed origin of window.location.origin should be used.