Refund details component
Embed the Rainforest Refund Details Component
The Refund Details Component can be displayed to a Merchant's user or a Platform's user. The component can be configured to display or hide as many details as necessary.

How to embed refund details
Session authentication
Create a session to grant the details component permissions to view a refund. The session should include at least the following to view the refund details:
curl --location 'https://api.rainforestpay.com/v1/sessions' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer {{api_key}}' \
--data '{
"ttl": 86400,
"statements": [
{
"permissions": ["group#refund_details_component"]
}
]
}'
JavaScript bundle
Include the merchant JavaScript bundle in your frontend to access the refund details component.
<script type="module" src="https://static.rainforestpay.com/sandbox.merchant.js"></script>
Payin details component
Add the Rainforest refund details component with custom configuration designed in the component studio.
A valid Refund ID must be provided in order to render the details for the refund.
<rainforest-refund-details
session-key="REPLACE_ME"
refund-id="REPLACE_ME"
></rainforest-refund-details>
Customize the component
Head over to the Component Studio for more attributes you can provide to customize the component's appearance and behavior.
Linking payment detail components
The refund details component can include data on associated payment types, such as the associated payin or ACH return.
When using the Payment report component, Rainforest will automatically handle opening additional payment detail components when the user is interacting with the refund details. For example, the user can click on the payin ID in the Related info and the payin detailed component will open.
If the refund details component is embedded separately from the payment report component, the interaction between the various payment detail components can be enabled by listening to event listeners.
Event listeners
The refund details component will emit the following events as the user interacts with it.
Event | Description |
---|---|
close-button-clicked | User clicked close button within one of the payment details components. The hosting page should react by hiding the corresponding payment details component or removing it from the DOM. |
view-payment | User clicked a call to action within one of the payment details components to display a related payin. The payin ID will be passed on the event. The hosting page should react by displaying a payin details component . |
view-ach-return | User clicked a call to action within the refund details component to display a related ACH return. The ACH return ID will be passed on the event. The hosting page should react by displaying an ACH return details component. |
You may listen for the events above as needed. In the case of view-payment
and view-ach-return
you can obtain the corresponding ID value from the event data. The identifier provided can be used to show the payin and ACH return detail components, respectively.
Sample event listening
var component = document.querySelector('rainforest-refund-details');
component.addEventListener('view-payment', function (event) {
// Get payin ID and display payin details component
const [payinId] = event.detail;
});
component.addEventListener('view-ach-return', function (event) {
// Get ACH return ID and display ACH return details component
const [achReturnId] = event.detail;
});
Detailed refusal reason for failed refund
During the processing of the refund, if the refund fails to process a Refusal Reason is returned in the API and displayed in the Refund Details Component. The refusal reason returns in the API in the fields refusal_code
and refusal_desc
. The refusal reason can return as a generic "Declined", which does not give context into why it failed to process.
Within 5 minutes of the refund returning as a failure, a Detailed Refusal Reason will be populated in the API and in the Refund Details Component. For example, the refusal reason could be "Declined", but the detailed refusal reason could be more descriptive, such as "Expired card" or "Do not honor". For a full list of refusal reasons, see the refusal codes guide.
Refund Details Component
The DETAILED REFUSAL REASON
in the Related info section will display as "--" until it is populated.

API
The following fields will be available in the list payments, get refund, and get payin endpoints to help you understand why a refund fails.
detailed_refusal_code
detailed_refusal_desc
These fields will be null
until they are populated, which can take up to 5 minutes after the refund fails.
Updated 9 days ago