Payment Success Dialog

A confirmation dialog that celebrates a successful payment with the paid amount and product name, plus actions to proceed or go back.

Click the button to preview the success dialog.

src/components/payment-success-dialog-demo.tsx

'use client'

import { useState } from 'react'
import { PaymentSuccessDialog } from '@/components/billingsdk/payment-success-dialog'
import { Card, CardContent } from '@/components/ui/card'

export function PaymentSuccessDialogDemo() {
  const [, setLastAction] = useState<string>("")
  const [open, setOpen] = useState(false)

  return (
    <Card className="border-muted/40">
      <CardContent className="p-6 flex flex-col gap-4">
        <div className="text-sm text-muted-foreground">
          Click the button to preview the success dialog.
        </div>
        <button className="px-3 py-2 rounded-md border text-sm" onClick={() => setOpen(true)}>Simulate Payment Success</button>
        <PaymentSuccessDialog
          open={open}
          onOpenChange={setOpen}
          price="99"
          currencySymbol="$"
          productName="Pro Plan (Monthly)"
          proceedButtonText="Go to Dashboard"
          backButtonText="Back to Pricing"
          onProceed={() => setLastAction('proceed')}
          onBack={() => setLastAction('back')}
        />
      </CardContent>
    </Card>
  )
}

Installation

npx shadcn@latest add @billingsdk/payment-success-dialog

pnpm dlx shadcn@latest add @billingsdk/payment-success-dialog

npx shadcn@latest add @billingsdk/payment-success-dialog

npx @billingsdk/cli add payment-success-dialog

pnpm dlx @billingsdk/cli add payment-success-dialog

npx @billingsdk/cli add payment-success-dialog

Usage

import { PaymentSuccessDialog, type PaymentSuccessDialogRef } from "@/components/billingsdk/payment-success-dialog";

// Controlled usage (recommended)
const [open, setOpen] = useState(false);

// Show on demand, e.g. after successful payment
setOpen(true);

<PaymentSuccessDialog
  open={open}
  onOpenChange={setOpen}
  price="29"
  currencySymbol="$"
  productName="Pro Plan (Monthly)"
  proceedButtonText="Go to Dashboard"
  backButtonText="Back to Pricing"
/>

// Imperative ref (optional)
const ref = useRef<PaymentSuccessDialogRef>(null);
ref.current?.open();

Props

Prop	Type	Required	Description
`title`	`string`	❌	Optional heading (default: "Congratulations!")
`subtitle`	`string`	❌	Optional subtext (default: "Your payment was successful.")
`currencySymbol`	`string`	❌	Currency symbol prefix (default: `$`)
`price`	`string`	✅	Amount paid
`productName`	`string`	✅	Product Name
`proceedButtonText`	`string`	❌	Primary action label
`backButtonText`	`string`	❌	Secondary action label
`onProceed`	`() => void`	❌	Callback for proceed action
`onBack`	`() => void`	❌	Callback for back action
`className`	`string`	❌	Additional class names
`open`	`boolean`	❌	Controlled open state
`onOpenChange`	`(open: boolean) => void`	❌	Controlled state handler

Theming

This dialog inherits BillingSDK theme tokens via getThemeStyles, remaining consistent with other components. Colors adapt to light/dark modes and active theme.

Example