diff --git a/assets/js/base/components/cart-checkout/order-summary/index.tsx b/assets/js/base/components/cart-checkout/order-summary/index.tsx
index d4c22c684cc..435bf0adc14 100644
--- a/assets/js/base/components/cart-checkout/order-summary/index.tsx
+++ b/assets/js/base/components/cart-checkout/order-summary/index.tsx
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
 import { useContainerWidthContext } from '@woocommerce/base-context';
 import { Panel } from '@woocommerce/blocks-checkout';
 import type { CartItem } from '@woocommerce/types';
@@ -14,12 +13,10 @@ import OrderSummaryItem from './order-summary-item';
 import './style.scss';
 
 interface OrderSummaryProps {
-	className: string;
 	cartItems: CartItem[];
 }
 
 const OrderSummary = ( {
-	className = '',
 	cartItems = [],
 }: OrderSummaryProps ): null | JSX.Element => {
 	const { isLarge, hasContainerWidth } = useContainerWidthContext();
@@ -30,10 +27,7 @@ const OrderSummary = ( {
 
 	return (
 		<Panel
-			className={ classnames(
-				'wc-block-components-order-summary',
-				className
-			) }
+			className="wc-block-components-order-summary"
 			initialOpen={ isLarge }
 			hasBorder={ false }
 			title={
diff --git a/assets/js/base/components/cart-checkout/totals/coupon/index.tsx b/assets/js/base/components/cart-checkout/totals/coupon/index.tsx
index 8bd0d78dd6e..87b6d29ed41 100644
--- a/assets/js/base/components/cart-checkout/totals/coupon/index.tsx
+++ b/assets/js/base/components/cart-checkout/totals/coupon/index.tsx
@@ -13,7 +13,6 @@ import {
 	useValidationContext,
 } from '@woocommerce/base-context';
 import { Panel } from '@woocommerce/blocks-checkout';
-import classnames from 'classnames';
 
 /**
  * Internal dependencies
@@ -37,10 +36,6 @@ export interface TotalsCouponProps {
 	 * Submit handler
 	 */
 	onSubmit?: ( couponValue: string ) => void;
-	/**
-	 * User defined classname in the block settings
-	 */
-	className?: string;
 }
 
 export const TotalsCoupon = ( {
@@ -48,7 +43,6 @@ export const TotalsCoupon = ( {
 	isLoading = false,
 	initialOpen = false,
 	onSubmit = () => void 0,
-	className = '',
 }: TotalsCouponProps ): JSX.Element => {
 	const [ couponValue, setCouponValue ] = useState( '' );
 	const currentIsLoading = useRef( false );
@@ -68,10 +62,7 @@ export const TotalsCoupon = ( {
 
 	return (
 		<Panel
-			className={ classnames(
-				className,
-				'wc-block-components-totals-coupon'
-			) }
+			className="wc-block-components-totals-coupon"
 			hasBorder={ false }
 			initialOpen={ initialOpen }
 			title={
diff --git a/assets/js/base/components/cart-checkout/totals/discount/index.tsx b/assets/js/base/components/cart-checkout/totals/discount/index.tsx
index cae398784a4..3e87e766462 100644
--- a/assets/js/base/components/cart-checkout/totals/discount/index.tsx
+++ b/assets/js/base/components/cart-checkout/totals/discount/index.tsx
@@ -15,7 +15,6 @@ import {
 	Currency,
 } from '@woocommerce/types';
 import { LooselyMustHave } from '@woocommerce/type-defs/utils';
-import classNames from 'classnames';
 
 /**
  * Internal dependencies
@@ -34,7 +33,6 @@ export interface TotalsDiscountProps {
 		CartTotalsItem,
 		'total_discount' | 'total_discount_tax'
 	>;
-	className?: string;
 }
 
 const filteredCartCouponsFilterArg = {
@@ -47,7 +45,6 @@ const TotalsDiscount = ( {
 	isRemovingCoupon,
 	removeCoupon,
 	values,
-	className,
 }: TotalsDiscountProps ): JSX.Element | null => {
 	const {
 		total_discount: totalDiscount,
@@ -75,10 +72,7 @@ const TotalsDiscount = ( {
 
 	return (
 		<TotalsItem
-			className={ classNames(
-				className,
-				'wc-block-components-totals-discount'
-			) }
+			className="wc-block-components-totals-discount"
 			currency={ currency }
 			description={
 				filteredCartCoupons.length !== 0 && (
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/block.tsx
index 6b0b51852ef..a10f3555699 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/block.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/block.tsx
@@ -4,6 +4,7 @@
 import { TotalsCoupon } from '@woocommerce/base-components/cart-checkout';
 import { useStoreCartCoupons } from '@woocommerce/base-context/hooks';
 import { getSetting } from '@woocommerce/settings';
+import { TotalsWrapper } from '@woocommerce/blocks-checkout';
 
 const Block = ( { className }: { className: string } ): JSX.Element | null => {
 	const couponsEnabled = getSetting( 'couponsEnabled', true );
@@ -15,11 +16,12 @@ const Block = ( { className }: { className: string } ): JSX.Element | null => {
 	}
 
 	return (
-		<TotalsCoupon
-			className={ `${ className } wc-block-components-totals-wrapper` }
-			onSubmit={ applyCoupon }
-			isLoading={ isApplyingCoupon }
-		/>
+		<TotalsWrapper className={ className }>
+			<TotalsCoupon
+				onSubmit={ applyCoupon }
+				isLoading={ isApplyingCoupon }
+			/>
+		</TotalsWrapper>
 	);
 };
 
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-discount/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-discount/block.tsx
index edc3eeba563..3ae0a3f11ad 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary-discount/block.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-discount/block.tsx
@@ -7,7 +7,10 @@ import {
 	useStoreCartCoupons,
 	useStoreCart,
 } from '@woocommerce/base-context/hooks';
-import { ExperimentalDiscountsMeta } from '@woocommerce/blocks-checkout';
+import {
+	ExperimentalDiscountsMeta,
+	TotalsWrapper,
+} from '@woocommerce/blocks-checkout';
 
 const DiscountSlotFill = (): JSX.Element => {
 	// Prepare props to pass to the ExperimentalOrderMeta slot fill. We need to pluck out receiveCart.
@@ -24,20 +27,20 @@ const DiscountSlotFill = (): JSX.Element => {
 
 const Block = ( { className }: { className: string } ): JSX.Element => {
 	const { cartTotals, cartCoupons } = useStoreCart();
-
 	const { removeCoupon, isRemovingCoupon } = useStoreCartCoupons();
 	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
 
 	return (
 		<>
-			<TotalsDiscount
-				className={ `${ className } wc-block-components-totals-wrapper` }
-				cartCoupons={ cartCoupons }
-				currency={ totalsCurrency }
-				isRemovingCoupon={ isRemovingCoupon }
-				removeCoupon={ removeCoupon }
-				values={ cartTotals }
-			/>
+			<TotalsWrapper className={ className }>
+				<TotalsDiscount
+					cartCoupons={ cartCoupons }
+					currency={ totalsCurrency }
+					isRemovingCoupon={ isRemovingCoupon }
+					removeCoupon={ removeCoupon }
+					values={ cartTotals }
+				/>
+			</TotalsWrapper>
 			<DiscountSlotFill />
 		</>
 	);
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-fee/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-fee/block.tsx
index 629934ebbb6..1a118225ff3 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary-fee/block.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-fee/block.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { TotalsFees } from '@woocommerce/blocks-checkout';
+import { TotalsFees, TotalsWrapper } from '@woocommerce/blocks-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 
@@ -10,11 +10,9 @@ const Block = ( { className }: { className: string } ): JSX.Element => {
 	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
 
 	return (
-		<TotalsFees
-			className={ `${ className } wc-block-components-totals-wrapper` }
-			currency={ totalsCurrency }
-			cartFees={ cartFees }
-		/>
+		<TotalsWrapper className={ className }>
+			<TotalsFees currency={ totalsCurrency } cartFees={ cartFees } />
+		</TotalsWrapper>
 	);
 };
 
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/block.tsx
index 53ea456436c..dacbbc32938 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/block.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/block.tsx
@@ -4,6 +4,7 @@
 import { TotalsShipping } from '@woocommerce/base-components/cart-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
+import { TotalsWrapper } from '@woocommerce/blocks-checkout';
 
 const Block = ( {
 	className,
@@ -21,13 +22,14 @@ const Block = ( {
 	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
 
 	return (
-		<TotalsShipping
-			className={ `${ className } wc-block-components-totals-wrapper` }
-			showCalculator={ isShippingCalculatorEnabled }
-			showRateSelector={ true }
-			values={ cartTotals }
-			currency={ totalsCurrency }
-		/>
+		<TotalsWrapper className={ className }>
+			<TotalsShipping
+				showCalculator={ isShippingCalculatorEnabled }
+				showRateSelector={ true }
+				values={ cartTotals }
+				currency={ totalsCurrency }
+			/>
+		</TotalsWrapper>
 	);
 };
 
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-subtotal/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-subtotal/block.tsx
index 6afd6e09904..1fbed502bf0 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary-subtotal/block.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-subtotal/block.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Subtotal } from '@woocommerce/blocks-checkout';
+import { Subtotal, TotalsWrapper } from '@woocommerce/blocks-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 
@@ -10,11 +10,9 @@ const Block = ( { className = '' }: { className?: string } ): JSX.Element => {
 	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
 
 	return (
-		<Subtotal
-			className={ `${ className } wc-block-components-totals-wrapper` }
-			currency={ totalsCurrency }
-			values={ cartTotals }
-		/>
+		<TotalsWrapper className={ className }>
+			<Subtotal currency={ totalsCurrency } values={ cartTotals } />
+		</TotalsWrapper>
 	);
 };
 
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/block.tsx
index a77aadb960e..6c8c124641e 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/block.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/block.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { TotalsTaxes } from '@woocommerce/blocks-checkout';
+import { TotalsTaxes, TotalsWrapper } from '@woocommerce/blocks-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 import { getSetting } from '@woocommerce/settings';
@@ -30,12 +30,13 @@ const Block = ( {
 	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
 
 	return (
-		<TotalsTaxes
-			className={ `${ className } wc-block-components-totals-wrapper` }
-			showRateAfterTaxName={ showRateAfterTaxName }
-			currency={ totalsCurrency }
-			values={ cartTotals }
-		/>
+		<TotalsWrapper className={ className }>
+			<TotalsTaxes
+				showRateAfterTaxName={ showRateAfterTaxName }
+				currency={ totalsCurrency }
+				values={ cartTotals }
+			/>
+		</TotalsWrapper>
 	);
 };
 
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-cart-items/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-cart-items/block.tsx
index 5028fecc09a..e84596ecad5 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-cart-items/block.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-cart-items/block.tsx
@@ -3,15 +3,15 @@
  */
 import { OrderSummary } from '@woocommerce/base-components/cart-checkout';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
+import { TotalsWrapper } from '@woocommerce/blocks-checkout';
 
 const Block = ( { className }: { className: string } ): JSX.Element => {
 	const { cartItems } = useStoreCart();
 
 	return (
-		<OrderSummary
-			className={ `${ className } wc-block-components-totals-wrapper` }
-			cartItems={ cartItems }
-		/>
+		<TotalsWrapper className={ className }>
+			<OrderSummary cartItems={ cartItems } />
+		</TotalsWrapper>
 	);
 };
 
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/block.tsx
index f9bc8d0da49..a54e57047dc 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/block.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/block.tsx
@@ -4,6 +4,7 @@
 import { TotalsCoupon } from '@woocommerce/base-components/cart-checkout';
 import { useStoreCartCoupons } from '@woocommerce/base-context/hooks';
 import { getSetting } from '@woocommerce/settings';
+import { TotalsWrapper } from '@woocommerce/blocks-checkout';
 
 const Block = ( {
 	className = '',
@@ -19,11 +20,12 @@ const Block = ( {
 	}
 
 	return (
-		<TotalsCoupon
-			className={ `${ className } wc-block-components-totals-wrapper` }
-			onSubmit={ applyCoupon }
-			isLoading={ isApplyingCoupon }
-		/>
+		<TotalsWrapper className={ className }>
+			<TotalsCoupon
+				onSubmit={ applyCoupon }
+				isLoading={ isApplyingCoupon }
+			/>
+		</TotalsWrapper>
 	);
 };
 
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/block.tsx
index 6c18a9f22a6..db257982cf4 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/block.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/block.tsx
@@ -7,7 +7,10 @@ import {
 	useStoreCartCoupons,
 	useStoreCart,
 } from '@woocommerce/base-context/hooks';
-import { ExperimentalDiscountsMeta } from '@woocommerce/blocks-checkout';
+import {
+	ExperimentalDiscountsMeta,
+	TotalsWrapper,
+} from '@woocommerce/blocks-checkout';
 
 const DiscountSlotFill = (): JSX.Element => {
 	// Prepare props to pass to the ExperimentalOrderMeta slot fill. We need to pluck out receiveCart.
@@ -24,20 +27,20 @@ const DiscountSlotFill = (): JSX.Element => {
 
 const Block = ( { className = '' }: { className?: string } ): JSX.Element => {
 	const { cartTotals, cartCoupons } = useStoreCart();
-
 	const { removeCoupon, isRemovingCoupon } = useStoreCartCoupons();
 	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
 
 	return (
 		<>
-			<TotalsDiscount
-				className={ `${ className } wc-block-components-totals-wrapper` }
-				cartCoupons={ cartCoupons }
-				currency={ totalsCurrency }
-				isRemovingCoupon={ isRemovingCoupon }
-				removeCoupon={ removeCoupon }
-				values={ cartTotals }
-			/>
+			<TotalsWrapper className={ className }>
+				<TotalsDiscount
+					cartCoupons={ cartCoupons }
+					currency={ totalsCurrency }
+					isRemovingCoupon={ isRemovingCoupon }
+					removeCoupon={ removeCoupon }
+					values={ cartTotals }
+				/>
+			</TotalsWrapper>
 			<DiscountSlotFill />
 		</>
 	);
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-fee/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-fee/block.tsx
index 5391b531df4..6520d697bfa 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-fee/block.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-fee/block.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { TotalsFees } from '@woocommerce/blocks-checkout';
+import { TotalsFees, TotalsWrapper } from '@woocommerce/blocks-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 
@@ -10,11 +10,9 @@ const Block = ( { className = '' }: { className?: string } ): JSX.Element => {
 	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
 
 	return (
-		<TotalsFees
-			className={ `${ className } wc-block-components-totals-wrapper` }
-			currency={ totalsCurrency }
-			cartFees={ cartFees }
-		/>
+		<TotalsWrapper className={ className }>
+			<TotalsFees currency={ totalsCurrency } cartFees={ cartFees } />
+		</TotalsWrapper>
 	);
 };
 
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/block.tsx
index 2e2fa8d4361..84fd6e36b67 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/block.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/block.tsx
@@ -4,6 +4,7 @@
 import { TotalsShipping } from '@woocommerce/base-components/cart-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
+import { TotalsWrapper } from '@woocommerce/blocks-checkout';
 
 const Block = ( {
 	className = '',
@@ -19,13 +20,14 @@ const Block = ( {
 	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
 
 	return (
-		<TotalsShipping
-			className={ `${ className } wc-block-components-totals-wrapper` }
-			showCalculator={ false }
-			showRateSelector={ false }
-			values={ cartTotals }
-			currency={ totalsCurrency }
-		/>
+		<TotalsWrapper className={ className }>
+			<TotalsShipping
+				showCalculator={ false }
+				showRateSelector={ false }
+				values={ cartTotals }
+				currency={ totalsCurrency }
+			/>
+		</TotalsWrapper>
 	);
 };
 
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-subtotal/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-subtotal/block.tsx
index 6afd6e09904..1fbed502bf0 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-subtotal/block.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-subtotal/block.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Subtotal } from '@woocommerce/blocks-checkout';
+import { Subtotal, TotalsWrapper } from '@woocommerce/blocks-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 
@@ -10,11 +10,9 @@ const Block = ( { className = '' }: { className?: string } ): JSX.Element => {
 	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
 
 	return (
-		<Subtotal
-			className={ `${ className } wc-block-components-totals-wrapper` }
-			currency={ totalsCurrency }
-			values={ cartTotals }
-		/>
+		<TotalsWrapper className={ className }>
+			<Subtotal currency={ totalsCurrency } values={ cartTotals } />
+		</TotalsWrapper>
 	);
 };
 
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/block.tsx
index 0982de3c111..2df7bd68a4e 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/block.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/block.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { TotalsTaxes } from '@woocommerce/blocks-checkout';
+import { TotalsTaxes, TotalsWrapper } from '@woocommerce/blocks-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 import { getSetting } from '@woocommerce/settings';
@@ -29,12 +29,13 @@ const Block = ( {
 	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
 
 	return (
-		<TotalsTaxes
-			className={ `${ className } wc-block-components-totals-wrapper` }
-			showRateAfterTaxName={ showRateAfterTaxName }
-			currency={ totalsCurrency }
-			values={ cartTotals }
-		/>
+		<TotalsWrapper className={ className }>
+			<TotalsTaxes
+				showRateAfterTaxName={ showRateAfterTaxName }
+				currency={ totalsCurrency }
+				values={ cartTotals }
+			/>
+		</TotalsWrapper>
 	);
 };
 
diff --git a/packages/checkout/components/totals-wrapper/index.tsx b/packages/checkout/components/totals-wrapper/index.tsx
index a2e01ba17e4..c196c3aa353 100644
--- a/packages/checkout/components/totals-wrapper/index.tsx
+++ b/packages/checkout/components/totals-wrapper/index.tsx
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import classnames from 'classnames';
 import { Children, ReactNode } from 'react';
 
 /**
@@ -12,17 +13,23 @@ interface TotalsWrapperProps {
 	children: ReactNode;
 	/* If this TotalsWrapper is being used to wrap a Slot */
 	slotWrapper?: boolean;
+	className?: string;
 }
 
 const TotalsWrapper = ( {
 	children,
 	slotWrapper = false,
+	className,
 }: TotalsWrapperProps ): JSX.Element | null => {
 	return Children.count( children ) ? (
 		<div
-			className={ `wc-block-components-totals-wrapper${
-				slotWrapper ? ' slot-wrapper' : ''
-			}` }
+			className={ classnames(
+				className,
+				'wc-block-components-totals-wrapper',
+				{
+					'slot-wrapper': slotWrapper,
+				}
+			) }
 		>
 			{ children }
 		</div>
diff --git a/packages/checkout/components/totals-wrapper/style.scss b/packages/checkout/components/totals-wrapper/style.scss
index 32bbf8f9f17..6b2efde86da 100644
--- a/packages/checkout/components/totals-wrapper/style.scss
+++ b/packages/checkout/components/totals-wrapper/style.scss
@@ -7,6 +7,14 @@
 			border-bottom-width: 1px;
 		}
 	}
+	// TotalWrappers like Discount and Fee are sometimes empty
+	// this prevents displaying the empty areas in Order Summary
+	&:empty {
+		padding: 0;
+		&::after {
+			content: none;
+		}
+	}
 
 	&.slot-wrapper {
 		padding: 0;
@@ -15,6 +23,8 @@
 			@include with-translucent-border(0 0 1px);
 			padding: $gap 0;
 
+
+			// removes the border bottom for the last slot inserted
 			&:last-child::after {
 				border-bottom-width: 0;
 			}