Display credit card brand icons on order received page

assets/css/success.css

@@ -13,3 +13,7 @@
 .wc-payment-gateway-method-logo-wrapper.wc-payment-lpm-logo img {
 	max-height: 26px;
 }
+
+.wc-payment-gateway-method-logo-wrapper.wc-payment-card-logo img {
+	max-height: 1em;
+}

changelog/8897-add-card-brands-order-received

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Display credit card brand icons on order received page.

includes/class-wc-payment-gateway-wcpay.php

@@ -1890,8 +1890,11 @@ public function process_payment_for_order( $cart, $payment_information, $schedul
 			$payment_method_details = $charge ? $charge->get_payment_method_details() : [];
 			$payment_method_type    = $payment_method_details ? $payment_method_details['type'] : null;
 
-			if ( $order->get_meta( 'is_woopay' ) && 'card' === $payment_method_type && isset( $payment_method_details['card']['last4'] ) ) {
+			if ( 'card' === $payment_method_type && isset( $payment_method_details['card']['last4'] ) ) {
 				$order->add_meta_data( 'last4', $payment_method_details['card']['last4'], true );
+				if ( isset( $payment_method_details['card']['brand'] ) ) {
+					$order->add_meta_data( '_card_brand', $payment_method_details['card']['brand'], true );
+				}
 				$order->save_meta_data();
 			}
 		} else {

includes/class-wc-payments-order-success-page.php

@@ -81,7 +81,7 @@ public function show_woocommerce_payments_payment_method_name( $payment_method_t
 		$payment_method = $gateway->get_payment_method( $order );
 		// GooglePay/ApplePay/Link/Card to be supported later.
 		if ( $payment_method->get_id() === Payment_Method::CARD ) {
-			return $payment_method_title;
+			return $this->show_card_payment_method_name( $order, $payment_method );
 		}
 
 		// If this is an LPM (BNPL or local payment method) order, return the html for the payment method name.
@@ -94,6 +94,37 @@ public function show_woocommerce_payments_payment_method_name( $payment_method_t
 		return $payment_method_title;
 	}
 
+	/**
+	 * Returns the HTML to add the card brand logo and the last 4 digits of the card used to the
+	 * payment method name on the order received page.
+	 *
+	 * @param WC_Order                                 $order the order being shown.
+	 * @param WCPay\Payment_Methods\UPE_Payment_Method $payment_method the payment method being shown.
+	 *
+	 * @return string
+	 */
+	public function show_card_payment_method_name( $order, $payment_method ) {
+		$card_brand = $order->get_meta( '_card_brand' );
+
+		if ( ! $card_brand ) {
+			return $payment_method->get_title();
+		}
+
+		ob_start();
+		?>
+		<div class="wc-payment-gateway-method-logo-wrapper wc-payment-card-logo">
+			<img alt="<?php echo esc_attr( $payment_method->get_title() ); ?>" src="<?php echo esc_url_raw( plugins_url( "assets/images/cards/{$card_brand}.svg", WCPAY_PLUGIN_FILE ) ); ?>">
+			<?php
+			if ( $order->get_meta( 'last4' ) ) {
+				echo esc_html_e( '•••', 'woocommerce-payments' ) . ' ';
+				echo esc_html( $order->get_meta( 'last4' ) );
+			}
+			?>
+		</div>
+		<?php
+		return ob_get_clean();
+	}
+
 	/**
 	 * Returns the HTML to add the WooPay logo and the last 4 digits of the card used to the
 	 * payment method name on the order received page.

tests/unit/test-class-wc-payments-order-success-page.php

@@ -22,6 +22,60 @@ public function set_up() {
 		$this->payments_order_success_page = new WC_Payments_Order_Success_Page();
 	}
 
+	public function test_show_card_payment_method_name_without_card_brand() {
+		$order = WC_Helper_Order::create_order();
+		$order->set_payment_method( 'woocommerce_payments' );
+		$order->save();
+
+		$payment_method = $this->getMockBuilder( '\WCPay\Payment_Methods\UPE_Payment_Method' )
+			->disableOriginalConstructor()
+			->getMock();
+		$payment_method->method( 'get_title' )->willReturn( 'Credit Card' );
+
+		$result = $this->payments_order_success_page->show_card_payment_method_name( $order, $payment_method );
+
+		$this->assertEquals( 'Credit Card', $result );
+	}
+
+	public function test_show_card_payment_method_name_with_brand_and_last4() {
+		$order = WC_Helper_Order::create_order();
+		$order->add_meta_data( '_card_brand', 'visa' );
+		$order->add_meta_data( 'last4', '4242' );
+		$order->set_payment_method( 'woocommerce_payments' );
+		$order->save();
+
+		$payment_method = $this->getMockBuilder( '\WCPay\Payment_Methods\UPE_Payment_Method' )
+			->disableOriginalConstructor()
+			->getMock();
+		$payment_method->method( 'get_title' )->willReturn( 'Credit Card' );
+
+		$result = $this->payments_order_success_page->show_card_payment_method_name( $order, $payment_method );
+
+		$this->assertStringContainsString( 'wc-payment-gateway-method-logo-wrapper wc-payment-card-logo', $result );
+		$this->assertStringContainsString( 'img alt="Credit Card"', $result );
+		$this->assertStringContainsString( 'visa.svg', $result );
+		$this->assertStringContainsString( '4242', $result );
+	}
+
+	public function test_show_card_payment_method_name_with_brand_only() {
+		$order = WC_Helper_Order::create_order();
+		$order->add_meta_data( '_card_brand', 'mastercard' );
+		$order->set_payment_method( 'woocommerce_payments' );
+		$order->save();
+
+		$payment_method = $this->getMockBuilder( '\WCPay\Payment_Methods\UPE_Payment_Method' )
+			->disableOriginalConstructor()
+			->getMock();
+		$payment_method->method( 'get_title' )->willReturn( 'Credit Card' );
+
+		$result = $this->payments_order_success_page->show_card_payment_method_name( $order, $payment_method );
+
+		$this->assertStringContainsString( 'wc-payment-gateway-method-logo-wrapper wc-payment-card-logo', $result );
+		$this->assertStringContainsString( 'img alt="Credit Card"', $result );
+		$this->assertStringContainsString( 'mastercard.svg', $result );
+		$this->assertStringNotContainsString( '•••', $result );
+	}
+
 	public function test_show_woopay_payment_method_name_empty_order() {
 		$method_name = 'Credit card';
 		$result      = $this->payments_order_success_page->show_woocommerce_payments_payment_method_name( $method_name, null );