# DetailPageModule component for Stripe Apps Use DetailPageModule to render your app in Stripe dashboard pages. # v8 > This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/detailpagemodule?app-sdk-version=8. The `DetailPageModule` component isn’t available in the selected SDK version. # v9 > This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/detailpagemodule?app-sdk-version=9. To add the `DetailPageModule` component to your app: ```js import {DetailPageModule} from '@stripe/ui-extension-sdk/ui'; ``` The `DetailPageModule` component provides a standardised way to display and organise content within the Stripe Dashboard. It creates a consistent UI section that seamlessly integrates with Stripe’s design system. You can use this component in two forms: - `table`: Specifically designed for displaying tabular data in a format that matches the surrounding Dashboard experience. It provides a consistent way to show data within the Stripe Dashboard that aligns with Stripe’s design system. - `propertyList`: Displays structured key-value data pairs in either a horizontal or vertical orientation. You can use this format for showing object details, configurations, or any information that naturally fits into label-value relationships, maintaining Stripe’s design consistency. It can display up to eight items. #### Table For more examples, see the [`DetailPageTable` reference](https://docs.stripe.com/stripe-apps/components/detailpagetable.md). ### DetailPageModuleTable props | Property | Type | | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `columns` | (Required) `DetailPageModuleTableColumn[]` The columns to display in the table. Related types: [DetailPageModuleTableColumn](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#detailpagemoduletablecolumn). | | `pending` | (Required) `boolean` Sets the visual style to pending. | | `type` | (Required) `"table"` The type of the module. | | `createAction` | (Optional) `(() => void) | undefined` An event handler to create a new item. | | `emptyMessage` | (Optional) `(string | DetailPageModuleEmptyActionMessage) | undefined` The message to display when the table is empty. Related types: [DetailPageModuleEmptyActionMessage](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#detailpagemoduleemptyactionmessage). | | `error` | (Optional) `DetailPageModuleDisplayError | undefined` Sets the visual style to `error`, displaying an error message. Related types: [DetailPageModuleDisplayError](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#detailpagemoduledisplayerror). | | `extraActions` | (Optional) `DetailPageModuleAction[] | undefined` An array of extra actions to display in the module. Related types: [DetailPageModuleAction](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#detailpagemoduleaction). | | `items` | (Optional) `DetailPageModuleTableItem[] | undefined` The items to display in the table. | | `onItemPress` | (Optional) `((item: DetailPageModuleTableItem) => void) | undefined` An event handler for when the user clicks an item. | | `rowActions` | (Optional) `(DetailPageModuleTableRowAction | DetailPageModuleTableRowActionGroup)[] | undefined` Actions to display in the row. Related types: [DetailPageModuleTableRowActionGroup](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#detailpagemoduletablerowactiongroup), [DetailPageModuleTableRowAction](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#detailpagemoduletablerowaction). | | `showOpenAppAction` | (Optional) `boolean | undefined` | ### DetailPageModuleTableColumn | Property | Type | | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `key` | (Required) `string` The unique identifier for the column. | | `label` | (Required) `string` The label to display for the column. | | `cell` | (Optional) `DetailPageModuleTableCellFormat | undefined` Cell format options. Related types: [DetailPageModuleTableCellFormat](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#detailpagemoduletablecellformat). | | `hideHeaderLabel` | (Optional) `boolean | undefined` Sets the column label to be hidden. | | `pinned` | (Optional) `boolean | undefined` Whether the column is pinned. | ### DetailPageModuleTableCellFormat This is a union type. It can be one of: [TextTableCell](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#texttablecell), [LinkTableCell](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#linktablecell), [DateTableCell](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#datetablecell), [IdTableCell](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#idtablecell), [StatusTableCell](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#statustablecell), [CurrencyTableCell](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#currencytablecell). ### TextTableCell | Property | Type | | -------- | ---------------------------------------------- | | `type` | (Required) `"text"` The type of the cell. | ### LinkTableCell | Property | Type | | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `type` | (Required) `"link"` The type of the cell. | | `linkMap` | (Optional) `{ [x: string]: string; } | undefined` A map of cell values (URLs) to human-readable display text for links. Each key is a URL that may appear as a cell value, and its corresponding value is the text to display for that link. If a cell value is not found in the map, the raw URL is shown as the link text instead. | ### DateTableCell | Property | Type | | -------- | ---------------------------------------------- | | `type` | (Required) `"date"` The type of the cell. | ### IdTableCell | Property | Type | | -------- | -------------------------------------------- | | `type` | (Required) `"id"` The type of the cell. | ### StatusTableCell | Property | Type | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | | `statusMap` | (Required) `{ [x: string]: "neutral" | "urgent" | "warning" | "negative" | "positive" | "info"; }` A map of cell values to status types. | | `type` | (Required) `"status"` The type of the cell. | ### CurrencyTableCell | Property | Type | | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `currency` | (Required) `string` Three-letter ISO-4217 currency code or a non-ISO currency code like `USDC` for USD Coin or `BTC` for Bitcoin. | | `type` | (Required) `"currency"` The type of the cell. | | `currencyMap` | (Optional) `{ [x: string]: CurrencyCode; } | undefined` Specifies a per-item currency code override, keyed by table item id. If an item id is not present in the map, the value of currency is used. This allows a single column to display multiple currencies. | ### DetailPageModuleEmptyActionMessage | Property | Type | | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `action` | (Required) `Action` A call to action displayed below the message. Related types: [Action](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#detailpagemoduleemptyactionmessage-action). | | `message` | (Required) `string` A custom message to display when the table is empty. | ### DetailPageModuleEmptyActionMessage Action | Property | Type | | -------- | ------------------------------------------------- | | `href` | (Required) `string` The link of the action. | | `label` | (Required) `string` The label of the action. | ### DetailPageModuleDisplayError | Property | Type | | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `message` | (Required) `string` The error message to display. | | `errorAction` | (Optional) `ErrorAction | undefined` An action to handle the error. Related types: [ErrorAction](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#detailpagemoduledisplayerror-erroraction). | ### DetailPageModuleDisplayError ErrorAction | Property | Type | | -------- | ------------------------------------------------------- | | `href` | (Required) `string` Native `href` attribute. | | `title` | (Required) `string` The title of the error action. | ### DetailPageModuleAction This is a union type. It can be one of: [DetailPageModuleLink](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#detailpagemodulelink), [DetailPageModuleEvent](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#detailpagemoduleevent), [DetailPageModuleActionLegacy](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#detailpagemoduleactionlegacy). ### DetailPageModuleLink | Property | Type | | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `href` | (Required) `string | RouteDescriptor` The href of the link. Related types: [RouteDescriptor](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#routedescriptor). | | `label` | (Required) `string` The label of the link. | | `type` | (Required) `"link"` The type of the action. | ### RouteDescriptor This is a union type. It can be one of: [BalanceOverviewRoute](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#balanceoverviewroute), [BillingRoute](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#billingroute), [CustomersRoute](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#customersroute), [CustomerDetailsRoute](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#customerdetailsroute), [DashboardRoute](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#dashboardroute), [FullPageRoute](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#fullpageroute), [InvoiceDetailsRoute](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#invoicedetailsroute), [InvoicesRoute](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#invoicesroute), [OnboardingRoute](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#onboardingroute), [PaymentDetailsRoute](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#paymentdetailsroute), [PaymentReviewDetailsRoute](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#paymentreviewdetailsroute), [PaymentsRoute](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#paymentsroute), [ProductDetailsRoute](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#productdetailsroute), [ProductsRoute](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#productsroute), [ReportsHubRoute](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#reportshubroute), [RevenueRecognitionRoute](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#revenuerecognitionroute), [ShippingRateDetailsRoute](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#shippingratedetailsroute), [ShippingRatesRoute](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#shippingratesroute), [SubscriptionDetailsRoute](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#subscriptiondetailsroute), [SubscriptionsRoute](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#subscriptionsroute), [TaxReportingLocationsRoute](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#taxreportinglocationsroute), [TaxReportingRoute](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#taxreportingroute). ### BalanceOverviewRoute | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"balanceOverview"` | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### BillingRoute | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"billing"` | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### CustomersRoute | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"customers"` | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### CustomerDetailsRoute | Property | Type | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"customerDetails"` | | `params` | (Required) `Params` Related types: [Params](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#customerdetailsroute-params). | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### CustomerDetailsRoute Params | Property | Type | | ------------ | ------------------------------------------------ | | `customerId` | (Required) `string` The id of the customer. | ### DashboardRoute | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"dashboard"` | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### FullPageRoute | Property | Type | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | | `name` | (Required) `"fullPage"` | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | | `params` | (Optional) `Params | undefined` Related types: [Params](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#fullpageroute-params). | ### FullPageRoute Params | Property | Type | | -------- | --------------------------------------------------------------------------------- | | `appId` | (Optional) `string | undefined` The id of the app. | | `tabId` | (Optional) `string | undefined` The id of the tab that needs to be selected. | ### InvoiceDetailsRoute | Property | Type | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | | `name` | (Required) `"invoiceDetails"` | | `params` | (Required) `Params` Related types: [Params](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#invoicedetailsroute-params). | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### InvoiceDetailsRoute Params | Property | Type | | ----------- | ----------------------------------------------- | | `invoiceId` | (Required) `string` The id of the invoice. | ### InvoicesRoute | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"invoices"` | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### OnboardingRoute | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"onboarding"` | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | | `params` | (Optional) `Params | undefined` Related types: [Params](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#onboardingroute-params). | ### OnboardingRoute Params | Property | Type | | -------- | ------------------------------------------------------- | | `appId` | (Optional) `string | undefined` The id of the app. | ### PaymentDetailsRoute | Property | Type | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | | `name` | (Required) `"paymentDetails"` | | `params` | (Required) `Params` Related types: [Params](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#paymentdetailsroute-params). | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### PaymentDetailsRoute Params | Property | Type | | ----------- | ----------------------------------------------- | | `paymentId` | (Required) `string` The id of the payment. | ### PaymentReviewDetailsRoute | Property | Type | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | | `name` | (Required) `"paymentReviewDetails"` | | `params` | (Required) `Params` Related types: [Params](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#paymentreviewdetailsroute-params). | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### PaymentReviewDetailsRoute Params | Property | Type | | ----------- | ----------------------------------------------- | | `paymentId` | (Required) `string` The id of the payment. | ### PaymentsRoute | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"payments"` | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### ProductDetailsRoute | Property | Type | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | | `name` | (Required) `"productDetails"` | | `params` | (Required) `Params` Related types: [Params](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#productdetailsroute-params). | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### ProductDetailsRoute Params | Property | Type | | ----------- | ----------------------------------------------- | | `productId` | (Required) `string` The id of the product. | ### ProductsRoute | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"products"` | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### ReportsHubRoute | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"reportsHub"` | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### RevenueRecognitionRoute | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"revenueRecognition"` | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### ShippingRateDetailsRoute | Property | Type | | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"shippingRateDetails"` | | `params` | (Required) `Params` Related types: [Params](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#shippingratedetailsroute-params). | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### ShippingRateDetailsRoute Params | Property | Type | | ---------------- | ----------------------------------------------------- | | `shippingRateId` | (Required) `string` The id of the shipping rate. | ### ShippingRatesRoute | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"shippingRates"` | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### SubscriptionDetailsRoute | Property | Type | | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"subscriptionDetails"` | | `params` | (Required) `Params` Related types: [Params](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#subscriptiondetailsroute-params). | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### SubscriptionDetailsRoute Params | Property | Type | | ---------------- | ---------------------------------------------------- | | `subscriptionId` | (Required) `string` The id of the subscription. | ### SubscriptionsRoute | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"subscriptions"` | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### TaxReportingLocationsRoute | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"taxReportingLocations"` | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### TaxReportingRoute | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"taxReporting"` | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### DetailPageModuleEvent | Property | Type | | --------- | ------------------------------------------------------------- | | `label` | (Required) `string` The label of the action. | | `onPress` | (Required) `() => void` An event handler for the action. | | `type` | (Required) `"action"` The type of the action. | ### DetailPageModuleActionLegacy | Property | Type | | --------- | ------------------------------------------------------------- | | `label` | (Required) `string` The label of the action. | | `onPress` | (Required) `() => void` An event handler for the action. | ### DetailPageModuleTableRowAction | Property | Type | | --------- | -------------------------------------------------------------------------------------------- | | `id` | (Required) `string` The unique identifier for the action. | | `label` | (Required) `string` The label of the action. | | `onPress` | (Required) `(item: DetailPageModuleTableItem) => void` An event handler for the action. | | `type` | (Optional) `("default" | "destructive") | undefined` The type of the action. | ### DetailPageModuleTableRowActionGroup | Property | Type | | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `actions` | (Required) `DetailPageModuleTableRowAction[]` The actions to display in the action group. Related types: [DetailPageModuleTableRowAction](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#detailpagemoduletablerowaction). | | `id` | (Required) `string` The unique identifier for the action group. | | `label` | (Required) `string` The label of the action group. | #### PropertyList For more examples, see the [`DetailPagePropertyList` reference](https://docs.stripe.com/stripe-apps/components/detailpagepropertylist.md). ### DetailPageModulePropertyList props | Property | Type | | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `pending` | (Required) `boolean` Sets the visual style to pending. | | `type` | (Required) `"propertyList"` The type of the module. | | `createAction` | (Optional) `(() => void) | undefined` An event handler to create a new item. | | `emptyMessage` | (Optional) `(string | DetailPageModuleEmptyActionMessage) | undefined` The message to display when the table is empty. Related types: [DetailPageModuleEmptyActionMessage](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#detailpagemoduleemptyactionmessage). | | `error` | (Optional) `DetailPageModuleDisplayError | undefined` Sets the visual style to `error`, displaying an error message. Related types: [DetailPageModuleDisplayError](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#detailpagemoduledisplayerror). | | `extraActions` | (Optional) `DetailPageModuleAction[] | undefined` An array of extra actions to display in the module. Related types: [DetailPageModuleAction](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#detailpagemoduleaction). | | `items` | (Optional) `DetailPagePropertyListItem[] | undefined` The items to display in the property list. Each item defines a label-values pair. Related types: [DetailPagePropertyListItem](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#detailpagepropertylistitem). | | `orientation` | (Optional) `("vertical" | "horizontal") | undefined` The orientation of the list. | | `showOpenAppAction` | (Optional) `boolean | undefined` | ### DetailPageModuleEmptyActionMessage | Property | Type | | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `action` | (Required) `Action` A call to action displayed below the message. Related types: [Action](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#detailpagemoduleemptyactionmessage-action). | | `message` | (Required) `string` A custom message to display when the table is empty. | ### DetailPageModuleEmptyActionMessage Action | Property | Type | | -------- | ------------------------------------------------- | | `href` | (Required) `string` The link of the action. | | `label` | (Required) `string` The label of the action. | ### DetailPageModuleDisplayError | Property | Type | | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `message` | (Required) `string` The error message to display. | | `errorAction` | (Optional) `ErrorAction | undefined` An action to handle the error. Related types: [ErrorAction](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#detailpagemoduledisplayerror-erroraction). | ### DetailPageModuleDisplayError ErrorAction | Property | Type | | -------- | ------------------------------------------------------- | | `href` | (Required) `string` Native `href` attribute. | | `title` | (Required) `string` The title of the error action. | ### DetailPageModuleAction This is a union type. It can be one of: [DetailPageModuleLink](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#detailpagemodulelink), [DetailPageModuleEvent](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#detailpagemoduleevent), [DetailPageModuleActionLegacy](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#detailpagemoduleactionlegacy). ### DetailPageModuleLink | Property | Type | | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `href` | (Required) `string | RouteDescriptor` The href of the link. Related types: [RouteDescriptor](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#routedescriptor). | | `label` | (Required) `string` The label of the link. | | `type` | (Required) `"link"` The type of the action. | ### RouteDescriptor This is a union type. It can be one of: [BalanceOverviewRoute](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#balanceoverviewroute), [BillingRoute](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#billingroute), [CustomersRoute](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#customersroute), [CustomerDetailsRoute](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#customerdetailsroute), [DashboardRoute](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#dashboardroute), [FullPageRoute](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#fullpageroute), [InvoiceDetailsRoute](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#invoicedetailsroute), [InvoicesRoute](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#invoicesroute), [OnboardingRoute](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#onboardingroute), [PaymentDetailsRoute](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#paymentdetailsroute), [PaymentReviewDetailsRoute](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#paymentreviewdetailsroute), [PaymentsRoute](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#paymentsroute), [ProductDetailsRoute](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#productdetailsroute), [ProductsRoute](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#productsroute), [ReportsHubRoute](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#reportshubroute), [RevenueRecognitionRoute](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#revenuerecognitionroute), [ShippingRateDetailsRoute](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#shippingratedetailsroute), [ShippingRatesRoute](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#shippingratesroute), [SubscriptionDetailsRoute](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#subscriptiondetailsroute), [SubscriptionsRoute](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#subscriptionsroute), [TaxReportingLocationsRoute](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#taxreportinglocationsroute), [TaxReportingRoute](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#taxreportingroute). ### BalanceOverviewRoute | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"balanceOverview"` | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### BillingRoute | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"billing"` | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### CustomersRoute | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"customers"` | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### CustomerDetailsRoute | Property | Type | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"customerDetails"` | | `params` | (Required) `Params` Related types: [Params](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#customerdetailsroute-params). | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### CustomerDetailsRoute Params | Property | Type | | ------------ | ------------------------------------------------ | | `customerId` | (Required) `string` The id of the customer. | ### DashboardRoute | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"dashboard"` | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### FullPageRoute | Property | Type | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | | `name` | (Required) `"fullPage"` | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | | `params` | (Optional) `Params | undefined` Related types: [Params](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#fullpageroute-params). | ### FullPageRoute Params | Property | Type | | -------- | --------------------------------------------------------------------------------- | | `appId` | (Optional) `string | undefined` The id of the app. | | `tabId` | (Optional) `string | undefined` The id of the tab that needs to be selected. | ### InvoiceDetailsRoute | Property | Type | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | | `name` | (Required) `"invoiceDetails"` | | `params` | (Required) `Params` Related types: [Params](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#invoicedetailsroute-params). | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### InvoiceDetailsRoute Params | Property | Type | | ----------- | ----------------------------------------------- | | `invoiceId` | (Required) `string` The id of the invoice. | ### InvoicesRoute | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"invoices"` | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### OnboardingRoute | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"onboarding"` | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | | `params` | (Optional) `Params | undefined` Related types: [Params](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#onboardingroute-params). | ### OnboardingRoute Params | Property | Type | | -------- | ------------------------------------------------------- | | `appId` | (Optional) `string | undefined` The id of the app. | ### PaymentDetailsRoute | Property | Type | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | | `name` | (Required) `"paymentDetails"` | | `params` | (Required) `Params` Related types: [Params](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#paymentdetailsroute-params). | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### PaymentDetailsRoute Params | Property | Type | | ----------- | ----------------------------------------------- | | `paymentId` | (Required) `string` The id of the payment. | ### PaymentReviewDetailsRoute | Property | Type | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | | `name` | (Required) `"paymentReviewDetails"` | | `params` | (Required) `Params` Related types: [Params](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#paymentreviewdetailsroute-params). | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### PaymentReviewDetailsRoute Params | Property | Type | | ----------- | ----------------------------------------------- | | `paymentId` | (Required) `string` The id of the payment. | ### PaymentsRoute | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"payments"` | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### ProductDetailsRoute | Property | Type | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | | `name` | (Required) `"productDetails"` | | `params` | (Required) `Params` Related types: [Params](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#productdetailsroute-params). | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### ProductDetailsRoute Params | Property | Type | | ----------- | ----------------------------------------------- | | `productId` | (Required) `string` The id of the product. | ### ProductsRoute | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"products"` | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### ReportsHubRoute | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"reportsHub"` | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### RevenueRecognitionRoute | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"revenueRecognition"` | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### ShippingRateDetailsRoute | Property | Type | | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"shippingRateDetails"` | | `params` | (Required) `Params` Related types: [Params](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#shippingratedetailsroute-params). | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### ShippingRateDetailsRoute Params | Property | Type | | ---------------- | ----------------------------------------------------- | | `shippingRateId` | (Required) `string` The id of the shipping rate. | ### ShippingRatesRoute | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"shippingRates"` | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### SubscriptionDetailsRoute | Property | Type | | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"subscriptionDetails"` | | `params` | (Required) `Params` Related types: [Params](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#subscriptiondetailsroute-params). | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### SubscriptionDetailsRoute Params | Property | Type | | ---------------- | ---------------------------------------------------- | | `subscriptionId` | (Required) `string` The id of the subscription. | ### SubscriptionsRoute | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"subscriptions"` | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### TaxReportingLocationsRoute | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"taxReportingLocations"` | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### TaxReportingRoute | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"taxReporting"` | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### DetailPageModuleEvent | Property | Type | | --------- | ------------------------------------------------------------- | | `label` | (Required) `string` The label of the action. | | `onPress` | (Required) `() => void` An event handler for the action. | | `type` | (Required) `"action"` The type of the action. | ### DetailPageModuleActionLegacy | Property | Type | | --------- | ------------------------------------------------------------- | | `label` | (Required) `string` The label of the action. | | `onPress` | (Required) `() => void` An event handler for the action. | ### DetailPagePropertyListItem | Property | Type | | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `label` | (Required) `string` The label of the property. | | `values` | (Required) `Array` The values of the property. Related types: [Values](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#detailpagepropertylistitem-values). Related types: [DetailPageModulePropertyListItemValue](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#detailpagemodulepropertylistitemvalue). | | `description` | (Optional) `string | undefined` The description of the property. | ### DetailPagePropertyListItem Values | Property | Type | | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `label` | (Optional) `DetailPageModulePropertyListItemValue | undefined` The label of the value. Related types: [DetailPageModulePropertyListItemValue](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#detailpagemodulepropertylistitemvalue). | | `value` | (Optional) `DetailPageModulePropertyListItemValue | undefined` The sub-value of the value. Related types: [DetailPageModulePropertyListItemValue](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#detailpagemodulepropertylistitemvalue). | ### DetailPageModulePropertyListItemValue | Property | Type | | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `action` | (Optional) `Action | undefined` An action to display in the value. Related types: [Action](https://docs.stripe.com/stripe-apps/components/detailpagemodule.md#detailpagemodulepropertylistitemvalue-action). | | `text` | (Optional) `string | undefined` The label of the value. | ### DetailPageModulePropertyListItemValue Action | Property | Type | | --------- | ---------------------------------------------------------------------------------- | | `onPress` | (Required) `() => void` An event handler for when the user clicks the action. | | `title` | (Required) `string` The title of the action. | ## See also - [Design patterns to follow](https://docs.stripe.com/stripe-apps/patterns.md) - [Style your app](https://docs.stripe.com/stripe-apps/style.md) - [UI testing](https://docs.stripe.com/stripe-apps/ui-testing.md)