# 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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.alternativepayments.io/web-sdk/components/payment-result.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.