From 2f7b0ba3b4b31b87c42bdc71841aec956ffd01c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= <contact@albertjuhe.com>
Date: Mon, 5 Oct 2020 15:25:40 +0200
Subject: [PATCH] Don't load contents of payment method hidden tabs
 (https://github.com/woocommerce/woocommerce-blocks/pull/3227)

---
 .../assets/js/base/components/tabs/index.js                | 3 ++-
 .../payment-methods/stripe/credit-card/payment-method.js   | 7 +++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/plugins/woocommerce-blocks/assets/js/base/components/tabs/index.js b/plugins/woocommerce-blocks/assets/js/base/components/tabs/index.js
index 755d1f42e78..91a154be402 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/tabs/index.js
+++ b/plugins/woocommerce-blocks/assets/js/base/components/tabs/index.js
@@ -69,7 +69,8 @@ const Tabs = ( {
 					tabId={ `${ instanceId }-${ name }` }
 					className="wc-block-components-tabs__content"
 				>
-					{ content }
+					{ tabState.selectedId === `${ instanceId }-${ name }` &&
+						content }
 				</TabPanel>
 			) ) }
 		</div>
diff --git a/plugins/woocommerce-blocks/assets/js/payment-method-extensions/payment-methods/stripe/credit-card/payment-method.js b/plugins/woocommerce-blocks/assets/js/payment-method-extensions/payment-methods/stripe/credit-card/payment-method.js
index dc87c1f93c4..0a0c5b7ec53 100644
--- a/plugins/woocommerce-blocks/assets/js/payment-method-extensions/payment-methods/stripe/credit-card/payment-method.js
+++ b/plugins/woocommerce-blocks/assets/js/payment-method-extensions/payment-methods/stripe/credit-card/payment-method.js
@@ -7,7 +7,6 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { PAYMENT_METHOD_NAME } from './constants';
 import { getStripeServerData } from '../stripe-utils';
 import { useCheckoutSubscriptions } from './use-checkout-subscriptions';
 import { InlineCard, CardElements } from './elements';
@@ -83,11 +82,11 @@ const CreditCardComponent = ( {
 
 export const StripeCreditCard = ( props ) => {
 	const { locale } = getStripeServerData().button;
-	const { activePaymentMethod, stripe } = props;
+	const { stripe } = props;
 
-	return activePaymentMethod === PAYMENT_METHOD_NAME ? (
+	return (
 		<Elements stripe={ stripe } locale={ locale }>
 			<CreditCardComponent { ...props } />
 		</Elements>
-	) : null;
+	);
 };