# Payment Success Dialog
URL: /docs/components/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.

***

title: Payment Success Dialog
description: A confirmation dialog that celebrates a successful payment with the paid amount and product name, plus actions to proceed or go back.
--------------------------------------------------------------------------------------------------------------------------------------------------

<Tabs items={['Preview', 'Code']} className="bg-transparent border-none">
  <Tab value="Preview" className="border-none bg-transparent p-0 mt-3">
    <PreviewComponents registryName="payment-success-dialog">
      <PaymentSuccessDialogDemo />
    </PreviewComponents>
  </Tab>

  <Tab value="Code" className="mt-3">
    ```tsx title="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>
      );
    }

    ```
  </Tab>
</Tabs>

## Installation

<Tabs items={['shadcn', 'billingSDK']} defaultValue="shadcn" className="bg-transparent border-none">
  <Tab value="shadcn" className="border-none bg-transparent p-0 mt-3">
    <Tabs items={['npx', 'pnpm', 'yarn', 'bun']} defaultValue="npx" groupId="installation-tabs">
      <Tab value="npx">
        ```bash
        npx shadcn@latest add @billingsdk/payment-success-dialog
        ```
      </Tab>

      <Tab value="pnpm">
        ```bash
        pnpm dlx shadcn@latest add @billingsdk/payment-success-dialog
        ```
      </Tab>

      <Tab value="yarn">
        ```bash
        yarn dlx shadcn@latest add @billingsdk/payment-success-dialog
        ```
      </Tab>

      <Tab value="bun">
        ```bash
        bunx shadcn@latest add @billingsdk/payment-success-dialog
        ```
      </Tab>
    </Tabs>
  </Tab>

  <Tab value="billingSDK" className="border-none bg-transparent p-0 mt-3">
    <Tabs items={['npx', 'pnpm', 'yarn', 'bun']} defaultValue="npx" groupId="billingsdk-cli-tabs">
      <Tab value="npx">
        ```bash
        npx @billingsdk/cli add payment-success-dialog
        ```
      </Tab>

      <Tab value="pnpm">
        ```bash
        pnpm dlx @billingsdk/cli add payment-success-dialog
        ```
      </Tab>

      <Tab value="yarn">
        ```bash
        yarn dlx @billingsdk/cli add payment-success-dialog
        ```
      </Tab>

      <Tab value="bun">
        ```bash
        bunx @billingsdk/cli add payment-success-dialog
        ```
      </Tab>
    </Tabs>
  </Tab>
</Tabs>

## Usage

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

```tsx
// 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"
/>
```

```tsx
// 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

```tsx title="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>
  );
}

```

### Credits

* Created by [@ritiksahni22](https://github.com/ritiksahni)