Fix errors caused by demo payment methods

assets/js/payment-methods-demo/express-payment/index.js

@@ -4,6 +4,6 @@
 import { applePayImage } from './apple-pay';
 import { paypalImage } from './paypal';
 
-export const expressApplePay = <img src={ applePayImage } alt="" />;
+export const ExpressApplePay = () => <img src={ applePayImage } alt="" />;
 
-export const expressPaypal = <img src={ paypalImage } alt="" />;
+export const ExpressPaypal = () => <img src={ paypalImage } alt="" />;

assets/js/payment-methods-demo/index.js

@@ -9,22 +9,22 @@ import {
 /**
  * Internal dependencies
  */
-import { expressApplePay, expressPaypal } from './express-payment';
+import { ExpressApplePay, ExpressPaypal } from './express-payment';
 import { paypalPaymentMethod, ccPaymentMethod } from './payment-methods';
 
 registerExpressPaymentMethod(
 	( Config ) =>
 		new Config( {
 			id: 'applepay',
-			activeContent: expressApplePay,
+			activeContent: <ExpressApplePay />,
 			canMakePayment: Promise.resolve( true ),
 		} )
 );
 registerExpressPaymentMethod(
 	( Config ) =>
 		new Config( {
 			id: 'paypal',
-			activeContent: expressPaypal,
+			activeContent: <ExpressPaypal />,
 			canMakePayment: Promise.resolve( true ),
 		} )
 );

assets/js/payment-methods-demo/payment-methods/index.js

@@ -4,15 +4,27 @@
 import { paypalSvg } from './paypal';
 import { ccSvg } from './cc';
 
+const PaypalActivePaymentMethod = () => {
+	return (
+		<div>
+			<p>This is where paypal payment method stuff would be.</p>
+		</div>
+	);
+};
+
+const CreditCardActivePaymentMethod = () => {
+	return (
+		<div>
+			<p>This is where cc payment method stuff would be.</p>
+		</div>
+	);
+};
+
 export const paypalPaymentMethod = {
 	id: 'paypal',
 	label: <img src={ paypalSvg } alt="" />,
 	stepContent: <div>Billing steps</div>,
-	activeContent: (
-		<div>
-			<p>This is where paypal payment method stuff would be.</p>
-		</div>
-	),
+	activeContent: <PaypalActivePaymentMethod />,
 	canMakePayment: Promise.resolve( true ),
 	ariaLabel: 'paypal payment method',
 };
@@ -21,11 +33,7 @@ export const ccPaymentMethod = {
 	id: 'cc',
 	label: <img src={ ccSvg } alt="" />,
 	stepContent: null,
-	activeContent: (
-		<div>
-			<p>This is where cc payment method stuff would be.</p>
-		</div>
-	),
+	activeContent: <CreditCardActivePaymentMethod />,
 	canMakePayment: Promise.resolve( true ),
 	ariaLabel: 'credit-card-payment-method',
 };