# Payment Result

Displays the outcome of a payment attempt (success, error, or processing).

***

## Usage

```typescript
const result = client.components.paymentResult({
  containerId: 'result',
  status: 'success',
  payment: paymentObject,
  onDone: () => {
    console.log('Done clicked');
  },
});
```

***

## Configuration

### PaymentResultConfig

| Property      | Type                                   | Required | Description                             |
| ------------- | -------------------------------------- | -------- | --------------------------------------- |
| `containerId` | `string`                               | Yes      | ID of the container element             |
| `status`      | `'success' \| 'error' \| 'processing'` | Yes      | Payment outcome                         |
| `payment`     | `Payment`                              | No       | Payment details (for success)           |
| `error`       | `Error`                                | No       | Error details (for error status)        |
| `theme`       | `ThemeConfig`                          | No       | Custom theme configuration              |
| `onDone`      | `() => void`                           | No       | Called when "Done" is clicked           |
| `onRetry`     | `() => void`                           | No       | Called when "Retry" is clicked (errors) |

***

## Status Types

### Success

Shows a success message with payment details.

```typescript
const result = client.components.paymentResult({
  containerId: 'result',
  status: 'success',
  payment: {
    id: 'pay_xxx',
    amount: 150.00,
    currency: 'USD',
    // ...
  },
  onDone: () => {
    window.location.href = '/dashboard';
  },
});
```

### Error

Shows an error message with retry option.

```typescript
const result = client.components.paymentResult({
  containerId: 'result',
  status: 'error',
  error: new Error('Card declined'),
  onRetry: () => {
    // Go back to payment method selection
    showPaymentMethods();
  },
  onDone: () => {
    window.location.href = '/dashboard';
  },
});
```

### Processing

Shows a processing indicator for async payments.

```typescript
const result = client.components.paymentResult({
  containerId: 'result',
  status: 'processing',
  onDone: () => {
    window.location.href = '/dashboard';
  },
});
```

***

## Example

```html
<div id="result"></div>

<script type="module">
  import { AlternativeClient } from '@getalternative/partner-sdk';

  const client = new AlternativeClient({
    clientId: 'your-client-id',
    clientSecret: 'your-client-secret',
  });

  // Get payment result from previous step
  const paymentResult = getPaymentResult();

  const result = client.components.paymentResult({
    containerId: 'result',
    status: paymentResult.success ? 'success' : 'error',
    payment: paymentResult.payment,
    error: paymentResult.error,
    onDone: () => {
      // Return to main application
      window.location.href = '/';
    },
    onRetry: () => {
      // Try again
      window.location.href = '/pay';
    },
  });
</script>
```

***

## Display

**Success screen shows:**

* Success icon and message
* Payment confirmation number
* Amount paid
* "Done" button

**Error screen shows:**

* Error icon and message
* Error details
* "Retry" button
* "Done" button

**Processing screen shows:**

* Loading indicator
* Processing message
* "Done" button (to continue anyway)