diff --git a/assets/css/success.css b/assets/css/success.css index f11e45dd18a..b07595fda5d 100644 --- a/assets/css/success.css +++ b/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; +} diff --git a/assets/images/cards/jcb.svg b/assets/images/cards/jcb.svg index ae366edf606..697c616c071 100644 --- a/assets/images/cards/jcb.svg +++ b/assets/images/cards/jcb.svg @@ -1,11 +1 @@ - - - - - - - - - - - + diff --git a/changelog/8897-add-card-brands-order-received b/changelog/8897-add-card-brands-order-received new file mode 100644 index 00000000000..3ce97c272d4 --- /dev/null +++ b/changelog/8897-add-card-brands-order-received @@ -0,0 +1,4 @@ +Significance: minor +Type: add + +Display credit card brand icons on order received page. diff --git a/includes/class-wc-payment-gateway-wcpay.php b/includes/class-wc-payment-gateway-wcpay.php index 84d30c82821..8eefa3e5d9d 100644 --- a/includes/class-wc-payment-gateway-wcpay.php +++ b/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 { diff --git a/includes/class-wc-payments-order-success-page.php b/includes/class-wc-payments-order-success-page.php index 78b9d6fc12a..26f3791dda6 100644 --- a/includes/class-wc-payments-order-success-page.php +++ b/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(); + ?> + + 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 );