Bug: "This Element has already been destroyed" when clicking Subscribe in paywall/purchase

[kyomster]

Bug: "This Element has already been destroyed" when clicking Subscribe in paywall/purchase

Environment

• @revenuecat/purchases-js: 1.26.0
• Next.js 15 (App Router)
• React 19
• Browser: Chrome (also reproduced in Safari)
• React Strict Mode: disabled

Description

When calling purchases.purchase() or purchases.presentPaywall(),
the paywall/checkout UI renders correctly, but clicking the "Subscribe"
button triggers the Stripe error:

IntegrationError: This Element has already been destroyed. Please create a new one.

The error occurs on the first call — this is not a re-mount issue.

Minimal reproduction

"use client"
import { useEffect, useState } from "react"
import { Purchases } from "@revenuecat/purchases-js"

export default function TestPage() {
    useEffect(() => {
        Purchases.configure({
            apiKey: "rcb_...",
            appUserId: "test-user",
        })
    }, [])

    const handleBuy = async () => {
        const purchases = Purchases.getSharedInstance()
        const offerings = await purchases.getOfferings()
        const pkg = offerings.current?.availablePackages[0]
        if (!pkg) return

        // Both methods produce the same error:
        await purchases.purchase({ rcPackage: pkg })
        // OR: await purchases.presentPaywall({ offering: offerings.current })
    }

    return <button onClick={handleBuy}>Buy</button>
}

Stack trace

The error originates inside the SDK's own Stripe initialization:

initializeStripe (Purchases.es.js:13157)
→ Stripe Elements are created
→ SDK internal render cycle (_emit, destroy)
→ Elements are destroyed by the SDK itself
→ "This Element has already been destroyed"

Key frames:

• initializeStripe (Purchases.es.js:13157)
• i.destroy (stripe.js:494640)
• Internal SDK render: Sd, Ne, hr, lu (Purchases.es.js)

What I've tried (none worked)

• Providing htmlTarget (new div on document.body, on documentElement)
• Creating fresh div each time with document.createElement
• Re-calling Purchases.configure() before each purchase
• Isolating in a blank page with zero other React components
• Disabling React Strict Mode
• Using purchase() instead of presentPaywall()

The error reproduces on a completely isolated test page with no
other components, confirming it's internal to the SDK.

[KaiBizBuilder]

Hey @kyomster — I hit this exact same error during a recent integration (Next.js 15 + RC Billing + Stripe). Wanted to share what I found in case it helps narrow it down.

Context where I reproduced it:

I got the identical IntegrationError: This Element has already been destroyed after fixing two other purchase flow errors. The full sequence was:

1. Error code 0 — on localhost. RC Billing requires a public HTTPS domain. Deploying to Vercel fixed this.
2. Error code 7901 — on Vercel. Stripe's calculate_taxes endpoint returned 400. Fix: toggle OFF "Automatically detect and charge tax rates from Stripe Tax" in RC Dashboard (or complete Stripe Tax setup).
3. "Element has already been destroyed" — appeared after fixing the tax issue. Console shows sessions endpoint returning 400 before the Element error fires.

This suggests the Element destruction might be a downstream symptom — Stripe's checkout session creation fails (400 on sessions), and then the SDK's internal cleanup destroys the Element before it's ready. The error you see isn't the root cause — the session creation failure is.

What I haven't been able to determine:

• What specifically causes the sessions 400. Could be Stripe account verification status, domain configuration in RC settings, or product/price mapping.
• Whether the RC Dashboard "Domains" setting (Project Settings → Domains) affects this. I tried both "Use RevenueCat's domain" and custom domain — same error.

Things to check:

• Is your Stripe account fully verified/activated (not just in test mode)?
• Do you have the Stripe Tax toggle configured in RC Dashboard → Billing?
• Are you seeing a 400 on sessions in the network tab before the Element error?

I documented the full debugging journey here if it's useful: Purchase Flow Troubleshooting Guide

Would love to know if the sessions 400 shows up in your case too — that would confirm whether we're hitting the same root cause or different triggers for the same symptom.

[KaiBizBuilder]

Update: I found the root cause in my own integration and want to share in case it helps.

Root cause: Stripe account connected to RevenueCat but never completed onboarding (no bank account provided). Stripe restricted the account over a year ago. The RC dashboard showed "Stripe: Connected ✓" with zero indication that the account couldn't process payments.

The chain: Restricted Stripe account → checkout session creation returns 400 → Stripe Elements crashes → IntegrationError: This Element has already been destroyed

How to check: Open your Stripe dashboard and look for:

• "Payouts paused" banner
• Incomplete onboarding tasks (especially "Provide an external account")
• Any account restrictions

In my case, everything in the RC integration was correctly configured — SDK, offerings, products, prices, paywall template. The ONLY failure was Stripe account health. And the RC dashboard didn't surface it.

I documented the full 3-hour debug journey with 10 friction points here: https://gist.github.com/KaiBizBuilder/b597fbf6cf04822321f607962cd28465

@kyomster — can you check if your Stripe account has any restrictions or incomplete onboarding steps? That might be the same issue.