Payment details

This component is a subset of payments, which provides the detail overlay of a given payment. The UI rendered by the payment details component is equivalent to the overlay that the payments component renders when the user clicks on a payment row.

Use the payment-details component to invoke the payment details overlay without the need to inline the entirety of the payments list in your website. This allows you to invoke the payment detail overlay from your existing UI (for example, your payments list) and integrate with our detail view to enable your customers to view payment details, issue refunds, and manage disputed payments.

By default, the embedded components offer limited information for destination charges and separate charges and transfers. They don’t provide access to customer information, payment methods, and some charge amount details. The destination_on_behalf_of_charge_management feature allows a connected account to see additional information with destination charges, as well as perform refunds and manage disputes.

When creating an Account Session, enable payment details by specifying payment_details in the components parameter. You can turn on or off an individual feature of the payment details component by specifying the features parameter under payment_details:

curl https://api.stripe.com/v1/account_sessions \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -d account=
{{CONNECTED_ACCOUNT_ID}} \
  -d "components[payment_details][enabled]"=true \
  -d "components[payment_details][features][refund_management]"=true \
  -d "components[payment_details][features][dispute_management]"=true \
  -d "components[payment_details][features][capture_payments]"=true \
  -d "components[payment_details][features][destination_on_behalf_of_charge_management]"=false

After creating the account session and initializing ConnectJS, you can render the payment details component in the frontend:

// Include this element in your HTML
const paymentDetails = stripeConnectInstance.create('payment-details');
paymentDetails.setPayment('{{PAYMENT_OR_PAYMENT_INTENT_ID}}');
// use setOnClose to set a callback function to close payment-details
paymentDetails.setOnClose(() => {
  paymentDetails.remove();
});
container.appendChild(paymentDetails);

The payment details component shows different information and supports different features for different charge types:

• For direct charges, your connected accounts can view the complete set of information. They can also manage refunds, manage disputes, and capture payments if you enable the corresponding features when creating an account session.
• For destination charges and separate charges and transfers, your connected accounts can only see the transfer object associated with the selected charge, which contains limited information.
• For destination charges with the on_behalf_of attribute, your connected accounts can view the complete set of information when the destination_on_behalf_of_charge_management feature is enabled. When this feature is turned on, you can also enable refund and disputes management by enabling the corresponding features.

Allow your connected accounts to manage destination charges

When you set the destination_on_behalf_of_charge_management feature to true, your connected accounts can use the payments component to view and manage destination charges that have the on_behalf_of attribute. If you also turn on the dispute_management feature, your connected accounts can participate directly in handling their disputes.

Enabling the destination_on_behalf_of_charge_management feature has the following limitations:

1. You can’t filter by charge status or payment methods.
2. You can’t export certain data columns.

Dispute management for destination charges

When a dispute occurs on destination charges or separate charges and transfers, the platform is debited the disputed amount and a dispute fee. Connect embedded components don’t reverse the transfer to the connected account regardless of the Account Session features. We recommend setting up webhooks to listen to dispute events. When a dispute is created, you can create an account debit or a transfer reversal on the transfer to your connected account. You can also reverse the transfer to your connected account through the Dashboard. When a dispute is closed, you can then update the balance on your connected account depending on the result of the dispute. If your connected account won the dispute, you can create a transfer to reverse the effect of the account debit or transfer reversal.

When both dispute_management and destination_on_behalf_of_charge_management are enabled, the connected accounts can update and modify dispute evidence, counter disputes, and accept disputes for destination charges with the on_behalf_of attribute set to them.

Supported parameters

This embedded component supports the following parameters: