Toast

AppFunnel includes Sonner  as a built-in toast notification system. The SDK mounts a <Toaster> inside FunnelProvider automatically — you can call toast() from anywhere in your funnel without any setup.

Import

import { toast } from '@appfunnel-dev/sdk'

Usage

toast('Hello!')
toast.success('Payment complete')
toast.error('Something went wrong')
toast.info('Check your email for confirmation')

In a button handler

import { toast, usePayment, useNavigation } from '@appfunnel-dev/sdk'
 
export default function Upsell() {
  const { purchase } = usePayment()
  const { goToNextPage } = useNavigation()
 
  const handlePurchase = () => {
    purchase('upsell_1', {
      onSuccess: () => {
        toast.success('Added to your plan!')
        goToNextPage()
      },
    })
  }
 
  return <button onClick={handlePurchase}>Add to my plan</button>
}

Built-in error toasts

The SDK automatically shows toast.error() when payment errors occur in:

• usePayment().purchase() — failed purchases, missing card, 3DS failures
• StripePaymentForm — intent creation errors, payment confirmation failures

These built-in toasts can be disabled in your config while keeping the <Toaster> available for your own toasts:

import { defineConfig } from '@appfunnel-dev/sdk'
 
export default defineConfig({
  // ...
  settings: {
    disableToasts: true,
  },
})

With disableToasts: true, the SDK will not call toast.error() on payment errors. You can still call toast() yourself, and errors are still available via usePayment().error and the onError callbacks.

Sonner API

The toast function is re-exported directly from Sonner. For the full API (promises, custom components, durations, dismiss, etc.), see the Sonner documentation .