# Payout details

Show details of a given payout.

Payout details renders the details of a given payout. Its UI is equivalent to the overlay that the payouts embedded component renders when the user clicks a payout row.

This component allows you to render the payout detail overlay directly from your UI. For example, you can invoke it from a custom payouts list instead of using the payouts embedded component.

Note: The following is a preview/demo component that behaves differently than live mode usage with real connected accounts. The actual component has more functionality than what might appear in this demo component. For example, for connected accounts without Stripe dashboard access (custom accounts), no user authentication is required in production.

When [creating an Account Session](https://docs.stripe.com/api/account_sessions/create.md), enable payout details by specifying `payout_details` in the `components` parameter.

```curl
curl https://api.stripe.com/v1/account_sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "account={{CONNECTEDACCOUNT_ID}}" \
  -d "components[payout_details][enabled]=true"
```

After creating the account session and [initializing ConnectJS](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#account-sessions), you can render the payout details component in the front end:

#### JavaScript

```js
// Include this element in your HTML
const payoutDetails = stripeConnectInstance.create('payout-details');
payoutDetails.setPayout('{{PAYOUT_ID}}');
// use setOnClose to set a callback function to close payout-details
payoutDetails.setOnClose(() => {
  payoutDetails.remove();
});
container.appendChild(payoutDetails);
```

## Supported parameters

This embedded component supports the following parameters:

#### HTML + JS

| Method       | Type         | Description                                                                                                                                                                                                                                                   |          |
| ------------ | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| `setPayout`  | `string`     | The ID of the payout to display, which must be a payout on the connected account. If you don’t specify a valid ID, the embedded component renders nothing. To find the ID, you can [retrieve a list of payouts](https://docs.stripe.com/api/payouts/list.md). | required |
| `setOnClose` | `() => void` | We send this event when the user closes the overlay.                                                                                                                                                                                                          |          |

To enable the dismiss behavior of this component, listen to the `close` event by calling `setOnClose`.

#### React

| React prop | Type         | Description                                                                                                                                                                                                                                                   |          |
| ---------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| `payout`   | `string`     | The ID of the payout to display, which must be a payout on the connected account. If you don’t specify a valid ID, the embedded component renders nothing. To find the ID, you can [retrieve a list of payouts](https://docs.stripe.com/api/payouts/list.md). | required |
| `onClose`  | `() => void` | The function that runs when the user closes the overlay.                                                                                                                                                                                                      | required |