CreateReturn container

The CreateReturn container manages the creation of return requests. It supports custom return attributes and configurable validation through the Adobe Commerce Admin. This container consists of three sequential screens that guide users through the item return process:

Select Items. The first screen displays a list of items eligible for return. The user can select items by checking the boxes next to them and specifying the quantity of each item they wish to return. Once the selection is complete, the user can click the Continue button to proceed to the next step.

Return Reasons. The second screen shows the selected items. Below each item, an additional form is displayed that allows the customer can specify the reason for the return. This step helps gather information on why each item is being returned, which can be valuable for analytics and improving customer experience.

container

Success Screen. The final screen displays a success message confirming the return process. It also includes a customizable button that allows redirection to any specified page on the website.

container

Prerequisites

Returns must be enabled. The Stores > Configuration > Sales > Sales > RMA Settings in the Adobe Commerce Admin.
If you need to add custom return attributes, add them at Stores > Attributes > Returns. You can optionally use the Input Validation field to define custom validation rules.

Configurations

The CreateReturn container provides the following configuration options:

Options	Type	Req?	Description
className	string	No	Allows custom CSS classes to be applied to the container for styling purposes.
orderData	OrderDataModel	No	A structured object containing order-related data. It can be used as an initial value if data is not fetched from the backend, serving as a fallback.
slots.ReturnOrderItem	function	No	Enables integration of additional elements or functionality, allowing customization to meet specific requirements. This can include adding new components, modifying existing ones, or inserting custom content.
slots.ReturnFormActions	function	No	Provides the ability to add custom events or replace existing actions with tailored functionality. Examples include adding unique buttons, setting up custom redirects, or modifying interface elements.
onSuccess	function	No	A callback function executed after the form is successfully submitted.
onError	function	No	A callback function executed when an error occurs during submission. The error is passed as a parameter for handling.
routeReturnSuccess	function		Defines a custom URL to redirect users upon successful return submission.
showConfigurableOptions	function	No	Allows rendering additional product parameters during container integration by defining key-value pairs for further customization.

Example

The following example demonstrates how to render the CreateReturn container:

export default async function decorate(block) {
  await orderRenderer.render(CreateReturn, {
    routeReturnSuccess: (orderData) =>
      checkIsAuthenticated()
        ? `${CUSTOMER_ORDER_DETAILS_PATH}?orderRef=${orderData.number}`
        : `${ORDER_DETAILS_PATH}?orderRef=${orderData.token}`,
  })(block);
}