diff --git a/packages/app-elements/src/ui/resources/ResourcePaymentMethod.test.tsx b/packages/app-elements/src/ui/resources/ResourcePaymentMethod.test.tsx
index 373d655a..3d734e4e 100644
--- a/packages/app-elements/src/ui/resources/ResourcePaymentMethod.test.tsx
+++ b/packages/app-elements/src/ui/resources/ResourcePaymentMethod.test.tsx
@@ -13,7 +13,7 @@ describe('ResourcePaymentMethod', () => {
     expect(getByText('Adyen Payment')).toBeVisible()
   })
 
-  it('should show the expandable show more button', async () => {
+  it('should not show expandable content if payment_source is available but `showPaymentResponse` is falsy', async () => {
     const { getByText, queryByText } = render(
       <ResourcePaymentMethod resource={orderWithPaymentSourceResponse} />
     )
@@ -21,6 +21,22 @@ describe('ResourcePaymentMethod', () => {
     expect(getByText('Amex credit card')).toBeVisible()
     expect(getByText('··4242')).toBeVisible()
 
+    // expandable content is not enabled
+    expect(queryByText('Show more')).not.toBeInTheDocument()
+    expect(queryByText('Show less')).not.toBeInTheDocument()
+  })
+
+  it('should show the expandable content (payment_source) when `showPaymentResponse` is set', async () => {
+    const { getByText, queryByText } = render(
+      <ResourcePaymentMethod
+        resource={orderWithPaymentSourceResponse}
+        showPaymentResponse
+      />
+    )
+    expect(getByText('Adyen Payment')).toBeVisible()
+    expect(getByText('Amex credit card')).toBeVisible()
+    expect(getByText('··4242')).toBeVisible()
+
     // expandable content is enabled
     expect(getByText('Show more')).toBeVisible()
 
diff --git a/packages/app-elements/src/ui/resources/ResourcePaymentMethod.tsx b/packages/app-elements/src/ui/resources/ResourcePaymentMethod.tsx
index 15e8b761..ea9e659e 100644
--- a/packages/app-elements/src/ui/resources/ResourcePaymentMethod.tsx
+++ b/packages/app-elements/src/ui/resources/ResourcePaymentMethod.tsx
@@ -6,6 +6,7 @@ import {
   type Order,
   type PaymentMethod
 } from '@commercelayer/sdk'
+import cn from 'classnames'
 import { useState, type FC } from 'react'
 import type { SetNonNullable, SetRequired } from 'type-fest'
 import { z } from 'zod'
@@ -24,13 +25,23 @@ export interface ResourcePaymentMethodProps {
         SetNonNullable<CustomerPaymentSource, 'payment_source'>,
         'payment_source'
       >
+  /**
+   * When true and if `payment_source.payment_response` is present, enables the expandable content to show more details on the transaction.
+   */
+  showPaymentResponse?: boolean
+  /**
+   * Defines the style of the component. Default is `boxed`, with a light gray background and rounded corners.
+   */
+  variant?: 'plain' | 'boxed'
 }
 
 /**
  * Show info about the payment method from the given Order or CustomerPaymentSource.
  */
 export const ResourcePaymentMethod: FC<ResourcePaymentMethodProps> = ({
-  resource
+  resource,
+  showPaymentResponse = false,
+  variant = 'boxed'
 }) => {
   const [showMore, setShowMore] = useState(false)
   const paymentInstrument = paymentInstrumentType.safeParse(
@@ -60,7 +71,11 @@ export const ResourcePaymentMethod: FC<ResourcePaymentMethodProps> = ({
   }
 
   return (
-    <div className='bg-gray-50 px-4 rounded'>
+    <div
+      className={cn({
+        'bg-gray-50 rounded px-4': variant === 'boxed'
+      })}
+    >
       <div className='flex gap-4 py-4'>
         <img src={avatarSrc} alt={paymentMethodName} className='h-8' />
         <div className='flex gap-4 items-center justify-between w-full'>
@@ -89,7 +104,7 @@ export const ResourcePaymentMethod: FC<ResourcePaymentMethodProps> = ({
               {paymentMethodName}
             </Text>
           )}
-          {paymentResponse != null && (
+          {paymentResponse != null && showPaymentResponse && (
             <Button
               onClick={() => {
                 setShowMore(!showMore)
@@ -97,6 +112,7 @@ export const ResourcePaymentMethod: FC<ResourcePaymentMethodProps> = ({
               variant='link'
               size='mini'
               className='text-sm font-bold'
+              type='button'
             >
               {showMore ? 'Show less' : 'Show more'}
             </Button>
@@ -104,7 +120,7 @@ export const ResourcePaymentMethod: FC<ResourcePaymentMethodProps> = ({
         </div>
       </div>
 
-      {showMore && paymentResponse != null ? (
+      {showMore && paymentResponse != null && showPaymentResponse ? (
         <div className='flex gap-4 pt-4 pb-2 overflow-hidden border-t border-dashed border-gray-200'>
           <img
             src={avatarSrc}
diff --git a/packages/docs/src/stories/resources/ResourcePaymentMethod.stories.tsx b/packages/docs/src/stories/resources/ResourcePaymentMethod.stories.tsx
index 84e3a485..cf1db20a 100644
--- a/packages/docs/src/stories/resources/ResourcePaymentMethod.stories.tsx
+++ b/packages/docs/src/stories/resources/ResourcePaymentMethod.stories.tsx
@@ -32,11 +32,13 @@ Default.args = {
 }
 
 /**
- * If the order includes the `payment_source` the component will show more details (expandable) on the transaction.
+ * The component can show more details on the transaction (`payment_source.payment_response`) by enabling `showPaymentResponse` prop.
+ * If the `payment_response` is not available, the show more button will not be present.
  */
 export const WithOrder = Template.bind({})
 WithOrder.args = {
-  resource: orderWithPaymentSourceResponse
+  resource: orderWithPaymentSourceResponse,
+  showPaymentResponse: true
 }
 
 /**
@@ -46,3 +48,12 @@ export const WithCustomerPaymentSource = Template.bind({})
 WithCustomerPaymentSource.args = {
   resource: customerPaymentSource
 }
+
+/**
+ * When used in lists or other components, boxed style can be removed using `variant: plain`.
+ */
+export const WithoutSideGap = Template.bind({})
+WithoutSideGap.args = {
+  resource: customerPaymentSource,
+  variant: 'plain'
+}