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="flex flex-col gap-4 p-6">
        <div className="text-muted-foreground text-sm">
          Click the button to preview the success dialog.
        </div>
        <button
          className="rounded-md border px-3 py-2 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

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

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

npx @billingsdk/cli add payment-success-dialog

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

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

bunx @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