Supply the Card Element instead of the Card from Stripe Payment Elements

Automattic · Oct 16, 2022 · 54e5ed2 · 54e5ed2
1 parent 2b40054
commit 54e5ed2
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 30 deletions.
diff --git a/client/checkout/blocks/fields.js b/client/checkout/blocks/fields.js
@@ -7,6 +7,7 @@ import {
 	CardElement,
 } from '@stripe/react-stripe-js';
 import { useEffect, useState } from '@wordpress/element';
+import { getConfig } from 'utils/checkout';
 
 /**
  * Internal dependencies
@@ -30,6 +31,17 @@ const WCPayFields = ( {
 	shouldSavePayment,
 } ) => {
 	const [ errorMessage, setErrorMessage ] = useState( null );
+	const testMode = getConfig( 'testMode' );
+	const testCopy = (
+		<p>
+			<strong>Test mode:</strong> use the test VISA card 4242424242424242
+			with any expiry date and CVC, or any test card numbers listed{ ' ' }
+			<a href="https://woocommerce.com/document/payments/testing/#test-cards">
+				here
+			</a>
+			.
+		</p>
+	);
 
 	// When it's time to process the payment, generate a Stripe payment method object.
 	useEffect(
@@ -86,12 +98,15 @@ const WCPayFields = ( {
 	};
 
 	return (
-		<div className="wc-block-gateway-container wc-inline-card-element">
-			<CardElement
-				options={ elementOptions }
-				onChange={ checkForErrors }
-			/>
-		</div>
+		<>
+			{ testMode ? testCopy : '' }
+			<div className="wc-block-gateway-container wc-inline-card-element">
+				<CardElement
+					options={ elementOptions }
+					onChange={ checkForErrors }
+				/>
+			</div>
+		</>
 	);
 };
 

diff --git a/includes/class-wc-payments-blocks-payment-method.php b/includes/class-wc-payments-blocks-payment-method.php
@@ -83,19 +83,7 @@ public function get_payment_method_data() {
 			];
 		}
 
-		// return array_merge(
-		// 	[
-		// 		'title'       => $this->gateway->get_option( 'title', '' ),
-		// 		'description' => $this->gateway->get_option( 'description', '' ),
-		// 		'is_admin'    => is_admin(), // Used to display payment method preview in wp-admin.
-		// 	],
-		// 	$platform_checkout_config,
-		// 	$this->gateway->get_payment_fields_js_config()
-		// );
-//harris TODO: revert this change after debugging
-		$config = $this->gateway->get_payment_fields_js_config();
-
-		$result = array_merge(
+		return array_merge(
 			[
 				'title'       => $this->gateway->get_option( 'title', '' ),
 				'description' => $this->gateway->get_option( 'description', '' ),
@@ -104,6 +92,5 @@ public function get_payment_method_data() {
 			$platform_checkout_config,
 			$this->gateway->get_payment_fields_js_config()
 		);
-		return $result;
 	}
 }
diff --git a/includes/class-wc-payments-upe-blocks-payment-method.php b/includes/class-wc-payments-upe-blocks-payment-method.php
@@ -15,6 +15,7 @@ class WC_Payments_UPE_Blocks_Payment_Method extends WC_Payments_Blocks_Payment_M
 	 * @return string[] A list of script handles.
 	 */
 	public function get_payment_method_script_handles() {
+		$classic_blocks_scripts = parent::get_payment_method_script_handles();
 		wp_enqueue_style(
 			'wc-blocks-checkout-style',
 			plugins_url( 'dist/upe-blocks-checkout.css', WCPAY_PLUGIN_FILE ),
@@ -31,14 +32,14 @@ public function get_payment_method_script_handles() {
 		);
 
 		wp_register_script(
-			'WCPAY_BLOCKS_CHECKOUT',
+			'WCPAY_BLOCKS_UPE_CHECKOUT',
 			plugins_url( 'dist/upe-blocks-checkout.js', WCPAY_PLUGIN_FILE ),
 			[ 'stripe' ],
 			'1.0.1',
 			true
 		);
 		wp_set_script_translations( 'WCPAY_BLOCKS_CHECKOUT', 'woocommerce-payments' );
 
-		return [ 'WCPAY_BLOCKS_CHECKOUT' ];
+		return array_merge( $classic_blocks_scripts, [ 'WCPAY_BLOCKS_UPE_CHECKOUT' ] );
 	}
 }
diff --git a/includes/class-wc-payments.php b/includes/class-wc-payments.php
@@ -948,14 +948,7 @@ public static function register_checkout_gateway( $payment_method_registry ) {
 		require_once __DIR__ . '/class-wc-payments-blocks-payment-method.php';
 		if ( WC_Payments_Features::is_upe_enabled() ) {
 			require_once __DIR__ . '/class-wc-payments-upe-blocks-payment-method.php';
-			require_once __DIR__ . '/class-wc-payments-upe-blocks-card-payment-method.php';
-			require_once __DIR__ . '/class-wc-payments-upe-blocks-bancontact-payment-method.php';
-			require_once __DIR__ . '/class-wc-payments-upe-blocks-sepa-payment-method.php';
-			require_once __DIR__ . '/class-wc-payments-upe-blocks-giropay-payment-method.php';
-			$payment_method_registry->register( new WC_Payments_UPE_Blocks_Card_Payment_Method() );
-			$payment_method_registry->register( new WC_Payments_UPE_Blocks_Bancontact_Payment_Method() );
-			$payment_method_registry->register( new WC_Payments_UPE_Blocks_Sepa_Payment_Method() );
-			$payment_method_registry->register( new WC_Payments_UPE_Blocks_Giropay_Payment_Method() );
+			$payment_method_registry->register( new WC_Payments_UPE_Blocks_Payment_Method() );
 		} else {
 			$payment_method_registry->register( new WC_Payments_Blocks_Payment_Method() );
 		}

diff --git a/includes/payment-methods/class-upe-payment-gateway.php b/includes/payment-methods/class-upe-payment-gateway.php
@@ -1068,6 +1068,9 @@ private function get_enabled_payment_method_config() {
 		$enabled_payment_methods = $this->get_payment_method_ids_enabled_at_checkout();
 
 		foreach ( $enabled_payment_methods as $payment_method_id ) {
+			if ( 'card' === $payment_method_id ) {
+				continue;
+			}
 			$payment_method                 = $this->wc_payments_get_payment_method_by_id( $payment_method_id );
 			$settings[ $payment_method_id ] = [
 				'isReusable'           => $payment_method->is_reusable(),