Ensure all hooks are using typedocs + have code examples for each supported SDK

docs/_partials/billing/add-new-payment-method.mdx

@@ -3,80 +3,161 @@ The following example demonstrates how to create a billing page where a user can
 - **`<UserBillingPage />`**: Sets up the `<PaymentElementProvider />`, which specifies that the payment actions within its children are `for` the `user`.
 - **`<AddPaymentMethodForm />`**: Renders the payment form and handles the submission logic. It uses `usePaymentElement()` to get the `submit` function and `useUser()` to get the `user` object. When the form is submitted, it first creates a payment token and then attaches it to the user.
 
-<CodeBlockTabs options={["<UserBillingPage />", "<AddPaymentMethodForm />"]}>
-  ```tsx {{ filename: 'app/user/billing/page.tsx' }}
-  import { ClerkLoaded } from '@clerk/nextjs'
-  import { PaymentElementProvider } from '@clerk/nextjs/experimental'
-  import { AddPaymentMethodForm } from './AddPaymentMethodForm'
-
-  export default function Page() {
-    return (
-      <div>
-        <h1>Billing Settings</h1>
-
-        <ClerkLoaded>
-          <PaymentElementProvider for="user">
-            <AddPaymentMethodForm />
-          </PaymentElementProvider>
-        </ClerkLoaded>
-      </div>
-    )
-  }
-  ```
-
-  ```tsx {{ filename: 'app/user/billing/AddPaymentMethodForm.tsx' }}
-  'use client'
-  import { useUser } from '@clerk/nextjs'
-  import { usePaymentElement, PaymentElement } from '@clerk/nextjs/experimental'
-  import { useState } from 'react'
-
-  export function AddPaymentMethodForm() {
-    const { user } = useUser()
-    const { submit, isFormReady } = usePaymentElement()
-    const [isSubmitting, setIsSubmitting] = useState(false)
-    const [error, setError] = useState<string | null>(null)
-
-    const handleAddPaymentMethod = async (e: React.FormEvent) => {
-      e.preventDefault()
-      if (!isFormReady || !user) {
-        return
-      }
+<If sdk="nextjs">
+  <CodeBlockTabs options={["<UserBillingPage />", "<AddPaymentMethodForm />"]}>
+    ```tsx {{ filename: 'app/user/billing/page.tsx' }}
+    import { ClerkLoaded } from '@clerk/nextjs'
+    import { PaymentElementProvider } from '@clerk/nextjs/experimental'
+    import { AddPaymentMethodForm } from './AddPaymentMethodForm'
+
+    export default function Page() {
+      return (
+        <div>
+          <h1>Billing Settings</h1>
 
-      setError(null)
-      setIsSubmitting(true)
+          <ClerkLoaded>
+            <PaymentElementProvider for="user">
+              <AddPaymentMethodForm />
+            </PaymentElementProvider>
+          </ClerkLoaded>
+        </div>
+      )
+    }
+    ```
 
-      try {
-        // 1. Submit the form to the payment provider to get a payment token
-        const { data, error } = await submit()
+    ```tsx {{ filename: 'app/user/billing/AddPaymentMethodForm.tsx', collapsible: true }}
+    'use client'
+    import { useUser } from '@clerk/nextjs'
+    import { usePaymentElement, PaymentElement } from '@clerk/nextjs/experimental'
+    import { useState } from 'react'
 
-        // Usually a validation error from stripe that you can ignore.
-        if (error) {
-          setIsSubmitting(false)
+    export function AddPaymentMethodForm() {
+      const { user } = useUser()
+      const { submit, isFormReady } = usePaymentElement()
+      const [isSubmitting, setIsSubmitting] = useState(false)
+      const [error, setError] = useState<string | null>(null)
+
+      const handleAddPaymentMethod = async (e: React.FormEvent) => {
+        e.preventDefault()
+        if (!isFormReady || !user) {
           return
         }
 
-        // 2. Use the token to add the payment source to the user
-        await user.addPaymentSource(data)
+        setError(null)
+        setIsSubmitting(true)
+
+        try {
+          // 1. Submit the form to the payment provider to get a payment token
+          const { data, error } = await submit()
+
+          // Usually a validation error from stripe that you can ignore.
+          if (error) {
+            setIsSubmitting(false)
+            return
+          }
+
+          // 2. Use the token to add the payment source to the user
+          await user.addPaymentSource(data)
 
-        // 3. Handle success (e.g., show a confirmation, clear the form)
-        alert('Payment method added successfully!')
-      } catch (err: any) {
-        setError(err.message || 'An unexpected error occurred.')
-      } finally {
-        setIsSubmitting(false)
+          // 3. Handle success (e.g., show a confirmation, clear the form)
+          alert('Payment method added successfully!')
+        } catch (err: any) {
+          setError(err.message || 'An unexpected error occurred.')
+        } finally {
+          setIsSubmitting(false)
+        }
       }
+
+      return (
+        <form onSubmit={handleAddPaymentMethod}>
+          <h3>Add a new payment method</h3>
+          <PaymentElement />
+          <button type="submit" disabled={!isFormReady || isSubmitting}>
+            {isSubmitting ? 'Saving...' : 'Save Card'}
+          </button>
+          {error && <p style={{ color: 'red' }}>{error}</p>}
+        </form>
+      )
+    }
+    ```
+  </CodeBlockTabs>
+</If>
+
+<If sdk="react">
+  <CodeBlockTabs options={["<UserBillingPage />", "<AddPaymentMethodForm />"]}>
+    ```tsx {{ filename: 'src/pages/user/billing/page.tsx' }}
+    import { ClerkLoaded } from '@clerk/clerk-react'
+    import { PaymentElementProvider } from '@clerk/clerk-react/experimental'
+    import { AddPaymentMethodForm } from './AddPaymentMethodForm'
+
+    export default function Page() {
+      return (
+        <div>
+          <h1>Billing Settings</h1>
+
+          <ClerkLoaded>
+            <PaymentElementProvider for="user">
+              <AddPaymentMethodForm />
+            </PaymentElementProvider>
+          </ClerkLoaded>
+        </div>
+      )
     }
+    ```
 
-    return (
-      <form onSubmit={handleAddPaymentMethod}>
-        <h3>Add a new payment method</h3>
-        <PaymentElement />
-        <button type="submit" disabled={!isFormReady || isSubmitting}>
-          {isSubmitting ? 'Saving...' : 'Save Card'}
-        </button>
-        {error && <p style={{ color: 'red' }}>{error}</p>}
-      </form>
-    )
-  }
-  ```
-</CodeBlockTabs>
+    ```tsx {{ filename: 'src/pages/user/billing/AddPaymentMethodForm.tsx', collapsible: true }}
+    import { useUser } from '@clerk/clerk-react'
+    import { usePaymentElement, PaymentElement } from '@clerk/clerk-react/experimental'
+    import { useState } from 'react'
+
+    export function AddPaymentMethodForm() {
+      const { user } = useUser()
+      const { submit, isFormReady } = usePaymentElement()
+      const [isSubmitting, setIsSubmitting] = useState(false)
+      const [error, setError] = useState<string | null>(null)
+
+      const handleAddPaymentMethod = async (e: React.FormEvent) => {
+        e.preventDefault()
+        if (!isFormReady || !user) {
+          return
+        }
+
+        setError(null)
+        setIsSubmitting(true)
+
+        try {
+          // 1. Submit the form to the payment provider to get a payment token
+          const { data, error } = await submit()
+
+          // Usually a validation error from stripe that you can ignore.
+          if (error) {
+            setIsSubmitting(false)
+            return
+          }
+
+          // 2. Use the token to add the payment source to the user
+          await user.addPaymentSource(data)
+
+          // 3. Handle success (e.g., show a confirmation, clear the form)
+          alert('Payment method added successfully!')
+        } catch (err: any) {
+          setError(err.message || 'An unexpected error occurred.')
+        } finally {
+          setIsSubmitting(false)
+        }
+      }
+
+      return (
+        <form onSubmit={handleAddPaymentMethod}>
+          <h3>Add a new payment method</h3>
+          <PaymentElement />
+          <button type="submit" disabled={!isFormReady || isSubmitting}>
+            {isSubmitting ? 'Saving...' : 'Save Card'}
+          </button>
+          {error && <p style={{ color: 'red' }}>{error}</p>}
+        </form>
+      )
+    }
+    ```
+  </CodeBlockTabs>
+</If>

docs/guides/development/custom-flows/billing/add-new-payment-method.mdx

@@ -25,9 +25,5 @@ For the custom flow that allows users to add a new payment method **during check
   1. Use the [`usePaymentElement()`](/docs/reference/hooks/use-payment-element) hook to submit the form and create a payment token.
   1. Use the [`useUser()`](/docs/reference/hooks/use-user) hook to attach the newly created payment method to the user.
 
-  <Tabs items={["Next.js"]}>
-    <Tab>
-      <Include src="_partials/billing/add-new-payment-method" />
-    </Tab>
-  </Tabs>
+  <Include src="_partials/billing/add-new-payment-method" />
 </Steps>