diff --git a/packages/core/src/scss/components/checkout/checklist/_checklist.scss b/packages/core/src/scss/components/checkout/checklist/_checklist.scss
index 9f1c3cae08..500c1e7e05 100644
--- a/packages/core/src/scss/components/checkout/checklist/_checklist.scss
+++ b/packages/core/src/scss/components/checkout/checklist/_checklist.scss
@@ -212,3 +212,14 @@
         will-change: $loading-skeleton-will-change;
     }
 }
+
+.custom-checklist-item {
+    margin: 0;
+    overflow: hidden;
+    border-bottom: 0;
+
+    .paymentMethod--hosted,
+    .widget {
+        padding: 0;
+    }
+}
diff --git a/packages/stripe-integration/src/stripe-upe/StripeUPEPaymentMethod.tsx b/packages/stripe-integration/src/stripe-upe/StripeUPEPaymentMethod.tsx
index 04c8ba1ea8..fcd80dbca1 100644
--- a/packages/stripe-integration/src/stripe-upe/StripeUPEPaymentMethod.tsx
+++ b/packages/stripe-integration/src/stripe-upe/StripeUPEPaymentMethod.tsx
@@ -1,6 +1,13 @@
 import { PaymentInitializeOptions } from '@bigcommerce/checkout-sdk';
 import { noop, some } from 'lodash';
-import React, { FunctionComponent, useCallback, useMemo } from 'react';
+import React, {
+    FunctionComponent,
+    useCallback,
+    useContext,
+    useEffect,
+    useMemo,
+    useRef,
+} from 'react';
 
 import { getAppliedStyles } from '@bigcommerce/checkout/dom-utils';
 import { HostedWidgetPaymentComponent } from '@bigcommerce/checkout/hosted-widget-integration';
@@ -13,6 +20,7 @@ import {
     PaymentMethodResolveId,
     toResolvableComponent,
 } from '@bigcommerce/checkout/payment-integration-api';
+import { AccordionContext } from '@bigcommerce/checkout/ui';
 
 const StripeUPEPaymentMethod: FunctionComponent<PaymentMethodProps> = ({
     paymentForm,
@@ -22,9 +30,19 @@ const StripeUPEPaymentMethod: FunctionComponent<PaymentMethodProps> = ({
     onUnhandledError = noop,
     ...rest
 }) => {
+    const collapseStripeElement = useRef<() => void>();
+    const { onToggle, selectedItemId } = useContext(AccordionContext);
     const containerId = `stripe-${method.id}-component-field`;
     const paymentContext = paymentForm;
 
+    useEffect(() => {
+        if (selectedItemId?.includes('stripeupe-')) {
+            return;
+        }
+
+        collapseStripeElement.current?.();
+    }, [selectedItemId]);
+
     const renderSubmitButton = useCallback(() => {
         paymentContext.hidePaymentSubmitButton(method, false);
     }, [paymentContext, method]);
@@ -97,6 +115,10 @@ const StripeUPEPaymentMethod: FunctionComponent<PaymentMethodProps> = ({
                     },
                     onError: onUnhandledError,
                     render: renderSubmitButton,
+                    paymentMethodSelect: onToggle,
+                    handleClosePaymentMethod: (collapseElement: () => void) => {
+                        collapseStripeElement.current = collapseElement;
+                    },
                 },
             });
         },
@@ -107,6 +129,7 @@ const StripeUPEPaymentMethod: FunctionComponent<PaymentMethodProps> = ({
             method,
             paymentContext,
             renderSubmitButton,
+            onToggle,
         ],
     );