Fix fraud prevention token not showing up on checkout pages created via the site editor

changelog/fix-8141-fraud-prevention-token-site-editor-problem

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix fraud prevention token not showing up on site editor checkout page

client/checkout/blocks/generate-payment-method.js

@@ -39,9 +39,7 @@ const generatePaymentMethod = async (
 			paymentMethod: { id },
 		} = await request.send();
 
-		const fraudPreventionToken = document
-			.querySelector( '#wcpay-fraud-prevention-token' )
-			?.getAttribute( 'value' );
+		const fraudPreventionToken = window.wcpayFraudPreventionToken ?? null;
 
 		return {
 			type: 'success',

client/checkout/blocks/payment-processor.js

@@ -46,9 +46,7 @@ const getBillingDetails = ( billingData ) => {
 };
 
 const getFraudPreventionToken = () => {
-	return document
-		.querySelector( '#wcpay-fraud-prevention-token' )
-		?.getAttribute( 'value' );
+	return window.wcpayFraudPreventionToken ?? null;
 };
 
 const PaymentProcessor = ( {

client/checkout/blocks/saved-token-handler.js

@@ -20,9 +20,8 @@ export const SavedTokenHandler = ( {
 
 	useEffect( () => {
 		return onPaymentSetup( () => {
-			const fraudPreventionToken = document
-				.querySelector( '#wcpay-fraud-prevention-token' )
-				?.getAttribute( 'value' );
+			const fraudPreventionToken =
+				window.wcpayFraudPreventionToken ?? null;
 
 			return {
 				type: 'success',

client/payment-request/utils/normalize.js

@@ -35,9 +35,7 @@ export const normalizeOrderData = ( paymentData ) => {
 	const phone = paymentData?.paymentMethod?.billing_details?.phone ?? '';
 	const billing = paymentData?.paymentMethod?.billing_details?.address ?? {};
 	const shipping = paymentData?.shippingAddress ?? {};
-	const fraudPreventionTokenInput = document.querySelector(
-		'input[name="wcpay-fraud-prevention-token"]'
-	);
+	const fraudPreventionTokenValue = window.wcpayFraudPreventionToken ?? '';
 
 	let paymentRequestType = 'payment_request_api';
 	if ( paymentData?.walletName === 'applePay' ) {
@@ -78,7 +76,7 @@ export const normalizeOrderData = ( paymentData ) => {
 		terms: 1,
 		'wcpay-payment-method': paymentData?.paymentMethod?.id,
 		payment_request_type: paymentRequestType,
-		'wcpay-fraud-prevention-token': fraudPreventionTokenInput?.value ?? '',
+		'wcpay-fraud-prevention-token': fraudPreventionTokenValue,
 	};
 };
 

includes/class-wc-payments-blocks-payment-method.php

@@ -35,8 +35,6 @@ public function initialize() {
 		$this->name                 = WC_Payment_Gateway_WCPay::GATEWAY_ID;
 		$this->gateway              = WC_Payments::get_gateway();
 		$this->wc_payments_checkout = WC_Payments::get_wc_payments_checkout();
-
-		add_filter( 'the_content', [ $this, 'maybe_add_card_testing_token' ] );
 	}
 
 	/**
@@ -72,6 +70,8 @@ public function get_payment_method_script_handles() {
 		WC_Payments::register_script_with_dependencies( 'WCPAY_BLOCKS_CHECKOUT', 'dist/blocks-checkout', [ 'stripe' ] );
 		wp_set_script_translations( 'WCPAY_BLOCKS_CHECKOUT', 'woocommerce-payments' );
 
+		Fraud_Prevention_Service::maybe_append_fraud_prevention_token();
+
 		return [ 'WCPAY_BLOCKS_CHECKOUT' ];
 	}
 
@@ -101,24 +101,4 @@ public function get_payment_method_data() {
 			$this->wc_payments_checkout->get_payment_fields_js_config()
 		);
 	}
-
-	/**
-	 * Adds the hidden input containing the card testing prevention token to the blocks checkout page.
-	 *
-	 * @param   string $content  The content that's going to be flushed to the browser.
-	 *
-	 * @return  string
-	 */
-	public function maybe_add_card_testing_token( $content ) {
-		if ( ! wp_script_is( 'WCPAY_BLOCKS_CHECKOUT' ) || ! WC()->session ) {
-			return $content;
-		}
-
-		$fraud_prevention_service = Fraud_Prevention_Service::get_instance();
-		// phpcs:ignore WordPress.Security.NonceVerification.Missing,WordPress.Security.ValidatedSanitizedInput.MissingUnslash,WordPress.Security.ValidatedSanitizedInput.InputNotSanitized
-		if ( $fraud_prevention_service->is_enabled() ) {
-			$content .= '<input type="hidden" name="wcpay-fraud-prevention-token" id="wcpay-fraud-prevention-token" value="' . esc_attr( Fraud_Prevention_Service::get_instance()->get_token() ) . '">';
-		}
-		return $content;
-	}
 }

includes/class-wc-payments-checkout.php

@@ -129,6 +129,8 @@ public function register_scripts() {
 			$script_dependencies[] = 'woocommerce-tokenization-form';
 		}
 
+		Fraud_Prevention_Service::maybe_append_fraud_prevention_token();
+
 		$script = 'dist/checkout';
 
 		WC_Payments::register_script_with_dependencies( 'wcpay-upe-checkout', $script, $script_dependencies );
@@ -414,10 +416,6 @@ function() use ( $payment_fields ) {
 
 			</fieldset>
 
-			<?php if ( WC()->session && Fraud_Prevention_Service::get_instance()->is_enabled() ) : ?>
-				<input type="hidden" name="wcpay-fraud-prevention-token" value="<?php echo esc_attr( Fraud_Prevention_Service::get_instance()->get_token() ); ?>">
-			<?php endif; ?>
-
 			<?php
 
 			do_action( 'wcpay_payment_fields_upe', $this->gateway->id );

includes/class-wc-payments-payment-request-button-handler.php

@@ -722,6 +722,8 @@ public function scripts() {
 
 		wp_enqueue_script( 'WCPAY_PAYMENT_REQUEST' );
 
+		Fraud_Prevention_Service::maybe_append_fraud_prevention_token();
+
 		$gateways = WC()->payment_gateways->get_available_payment_gateways();
 		if ( isset( $gateways['woocommerce_payments'] ) ) {
 			WC_Payments::get_wc_payments_checkout()->register_scripts();
@@ -735,9 +737,7 @@ public function display_payment_request_button_html() {
 		if ( ! $this->should_show_payment_request_button() ) {
 			return;
 		}
-		if ( WC()->session && Fraud_Prevention_Service::get_instance()->is_enabled() ) : ?>
-			<input type="hidden" name="wcpay-fraud-prevention-token" value="<?php echo esc_attr( Fraud_Prevention_Service::get_instance()->get_token() ); ?>">
-		<?php endif; ?>
+		?>
 		<div id="wcpay-payment-request-button">
 			<!-- A Stripe Element will be inserted here. -->
 		</div>

includes/fraud-prevention/class-fraud-prevention-service.php

@@ -64,6 +64,40 @@ public static function get_instance( $session = null, $gateway = null ): self {
 		return self::$instance;
 	}
 
+	/**
+	 * Appends the fraud prevention token to the JS context if the protection is enabled, and a session exists.
+	 *
+	 * @return  void
+	 */
+	public static function maybe_append_fraud_prevention_token() {
+		// Check session first before trying to append the token.
+		if ( ! WC()->session ) {
+			return;
+		}
+
+		$instance = self::get_instance();
+
+		// Don't add the token if the prevention is not enabled.
+		if ( ! $instance->is_enabled() ) {
+			return;
+		}
+
+		// Don't add the token if the user isn't on the cart or checkout page.
+		// Checking the cart page too because the user can pay quickly via the payment buttons on that page.
+		if ( ! is_checkout() && ! is_cart() ) {
+			return;
+		}
+
+		wp_register_script( self::TOKEN_NAME, '', [], time(), true );
+		wp_enqueue_script( self::TOKEN_NAME );
+		// Add the fraud prevention token to the checkout configuration.
+		wp_add_inline_script(
+			self::TOKEN_NAME,
+			"window.wcpayFraudPreventionToken = '" . esc_js( $instance->get_token() ) . "';",
+			'after'
+		);
+	}
+
 	/**
 	 * Sets a instance to be used in request cycle.
 	 * Introduced primarily for supporting unit tests.

tests/unit/test-class-wc-payments-checkout.php

@@ -139,71 +139,6 @@ public function tear_down() {
 		WC_Payments::set_gateway( $this->default_gateway );
 	}
 
-	public function test_fraud_prevention_token_added_when_prevention_service_enabled() {
-		$token_value                   = 'test-token';
-		$fraud_prevention_service_mock = $this->getMockBuilder( Fraud_Prevention_Service::class )
-			->disableOriginalConstructor()
-			->getMock();
-
-		$fraud_prevention_service_mock
-			->expects( $this->once() )
-			->method( 'is_enabled' )
-			->willReturn( true );
-
-		$fraud_prevention_service_mock
-			->expects( $this->once() )
-			->method( 'get_token' )
-			->willReturn( $token_value );
-
-		Fraud_Prevention_Service::set_instance( $fraud_prevention_service_mock );
-
-		$this->mock_wcpay_gateway
-			->expects( $this->any() )
-			->method( 'get_payment_method_ids_enabled_at_checkout' )
-			->willReturn( [] );
-
-		// Use a callback to get and test the output (also suppresses the output buffering being printed to the CLI).
-		$this->setOutputCallback(
-			function ( $output ) use ( $token_value ) {
-				$result = preg_match_all( '/<input[^>]*type="hidden"[^>]*name="wcpay-fraud-prevention-token"[^>]*value="' . preg_quote( $token_value, '/' ) . '"[^>]*>/', $output );
-
-				$this->assertSame( 1, $result );
-			}
-		);
-
-		$this->system_under_test->payment_fields();
-	}
-
-	public function test_fraud_prevention_token_not_added_when_prevention_service_disabled() {
-		$token_value                   = 'test-token';
-		$fraud_prevention_service_mock = $this->getMockBuilder( Fraud_Prevention_Service::class )
-			->disableOriginalConstructor()
-			->getMock();
-
-		$fraud_prevention_service_mock
-			->expects( $this->once() )
-			->method( 'is_enabled' )
-			->willReturn( true );
-
-		Fraud_Prevention_Service::set_instance( $fraud_prevention_service_mock );
-
-		$this->mock_wcpay_gateway
-			->expects( $this->any() )
-			->method( 'get_payment_method_ids_enabled_at_checkout' )
-			->willReturn( [] );
-
-		// Use a callback to get and test the output (also suppresses the output buffering being printed to the CLI).
-		$this->setOutputCallback(
-			function ( $output ) use ( $token_value ) {
-				$result = preg_match_all( '/<input[^>]*type="hidden"[^>]*name="wcpay-fraud-prevention-token"[^>]*value="' . preg_quote( $token_value, '/' ) . '"[^>]*>/', $output );
-
-				$this->assertSame( 0, $result );
-			}
-		);
-
-		$this->system_under_test->payment_fields();
-	}
-
 	public function test_save_payment_method_checkbox_not_called_when_saved_cards_disabled() {
 		// given: prepare the dependencies.
 		wp_set_current_user( 1 );