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.
When creating an Account Session, enable payout details by specifying payout_details in the components parameter.
After creating the account session and initializing ConnectJS, you can render the payout details component in the front end:
payout-details.js
JavaScript
React
No results
// Include this element in your HTMLconst 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:
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.
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.
