Add bnpl logos to thank you page.

assets/css/success.css

@@ -1,11 +1,15 @@
-.wc-payment-gateway-method-name-woopay-wrapper {
+.wc-payment-gateway-method-logo-wrapper {
 	display: flex;
 	align-items: center;
 	flex-wrap: wrap;
 	line-height: 1;
 }
 
-.wc-payment-gateway-method-name-woopay-wrapper img {
+.wc-payment-gateway-method-logo-wrapper img {
 	margin-right: 0.5rem;
 	padding-top: 4px;
 }
+
+.wc-payment-gateway-method-logo-wrapper.wc-payment-bnpl-logo img {
+	max-height: 30px;
+}

changelog/8249-add-bnpl-icons-to-thank-you-page

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Display BNPL payment method logos on the thank you page.

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

@@ -127,6 +127,24 @@ class WC_Payment_Gateway_WCPay extends WC_Payment_Gateway_CC {
 	const UPE_BNPL_CLASSIC_CART_APPEARANCE_THEME_TRANSIENT = 'wcpay_upe_bnpl_classic_cart_appearance_theme';
 	const UPE_BNPL_CART_BLOCK_APPEARANCE_THEME_TRANSIENT   = 'wcpay_upe_bnpl_cart_block_appearance_theme';
 
+	/**
+	 * The locations of appearance transients.
+	 */
+	const APPEARANCE_THEME_TRANSIENTS = [
+		'checkout'     => [
+			'blocks'  => self::WC_BLOCKS_UPE_APPEARANCE_THEME_TRANSIENT,
+			'classic' => self::UPE_APPEARANCE_THEME_TRANSIENT,
+		],
+		'product_page' => [
+			'blocks'  => self::UPE_BNPL_PRODUCT_PAGE_APPEARANCE_THEME_TRANSIENT,
+			'classic' => self::UPE_BNPL_PRODUCT_PAGE_APPEARANCE_THEME_TRANSIENT,
+		],
+		'cart'         => [
+			'blocks'  => self::UPE_BNPL_CART_BLOCK_APPEARANCE_THEME_TRANSIENT,
+			'classic' => self::UPE_BNPL_CLASSIC_CART_APPEARANCE_THEME_TRANSIENT,
+		],
+	];
+
 	/**
 	 * Client for making requests to the WooCommerce Payments API
 	 *

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

@@ -28,39 +28,80 @@ public function __construct() {
 	 */
 	public function register_payment_method_override() {
 		// Override the payment method title on the order received page.
-		add_filter( 'woocommerce_order_get_payment_method_title', [ $this, 'show_woopay_payment_method_name' ], 10, 2 );
+		add_filter( 'woocommerce_order_get_payment_method_title', [ $this, 'show_woocommerce_payments_payment_method_name' ], 10, 2 );
 	}
 
 	/**
 	 * Remove the hook to override the payment method name on the order received page before the order summary.
 	 */
 	public function unregister_payment_method_override() {
-		remove_filter( 'woocommerce_order_get_payment_method_title', [ $this, 'show_woopay_payment_method_name' ], 10 );
+		remove_filter( 'woocommerce_order_get_payment_method_title', [ $this, 'show_woocommerce_payments_payment_method_name' ], 10 );
 	}
 
 	/**
-	 * Add the WooPay logo and the last 4 digits of the card used to the payment method name
-	 * on the order received page.
+	 * Hooked into `woocommerce_order_get_payment_method_title` to change the payment method title on the
+	 * order received page for WooPay and BNPL orders.
 	 *
-	 * @param string            $payment_method_title the default payment method title.
-	 * @param WC_Abstract_Order $abstract_order the order being shown.
+	 * @param string $payment_method_title Original payment method title.
+	 * @param WC_Abstract_Order $abstract_order Successful received order being shown.
+	 * @return string
 	 */
-	public function show_woopay_payment_method_name( $payment_method_title, $abstract_order ) {
-
+	public function show_woocommerce_payments_payment_method_name( $payment_method_title, $abstract_order ) {
 		// Only change the payment method title on the order received page.
 		if ( ! is_order_received_page() ) {
 			return $payment_method_title;
 		}
 
 		$order_id = $abstract_order->get_id();
 		$order    = wc_get_order( $order_id );
-		if ( ! $order || ! $order->get_meta( 'is_woopay' ) ) {
+
+		if ( ! $order ) {
+			return $payment_method_title;
+		}
+
+		$payment_method_id = $order->get_payment_method();
+
+		if ( stripos( $payment_method_id, 'woocommerce_payments' ) !== 0 ) {
+			return $payment_method_title;
+		}
+
+		// If this is a WooPay order, return the html for the WooPay payment method name.
+		if ( $order->get_meta( 'is_woopay' ) ) {
+			return $this->show_woopay_payment_method_name( $order );
+		}
+
+		$gateway = WC()->payment_gateways()->payment_gateways()[ $payment_method_id ];
+
+		if ( ! is_object( $gateway ) || ! method_exists( $gateway, 'get_payment_method' ) ) {
 			return $payment_method_title;
 		}
 
+		$payment_method = $gateway->get_payment_method( $order );
+
+		// If this is a BNPL order, return the html for the BNPL payment method name.
+		if ( $payment_method->is_bnpl() ) {
+			$bnpl_output = $this->show_bnpl_payment_method_name( $gateway, $payment_method );
+
+			if ( $bnpl_output !== false ) {
+				return $bnpl_output;
+			}
+		}
+
+		return $payment_method_title;
+	}
+
+	/**
+	 * 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.
+	 *
+	 * @param WC_Order $order the order being shown.
+	 *
+	 * @return string
+	 */
+	public function show_woopay_payment_method_name( $order ) {
 		ob_start();
 		?>
-		<div class="wc-payment-gateway-method-name-woopay-wrapper">
+		<div class="wc-payment-gateway-method-logo-wrapper woopay">
 			<img alt="WooPay" src="<?php echo esc_url_raw( plugins_url( 'assets/images/woopay.svg', WCPAY_PLUGIN_FILE ) ); ?>">
 			<?php
 			if ( $order->get_meta( 'last4' ) ) {
@@ -73,6 +114,35 @@ public function show_woopay_payment_method_name( $payment_method_title, $abstrac
 		return ob_get_clean();
 	}
 
+	/**
+	 * Add the BNPL logo to the payment method name on the order received page.
+	 *
+	 * @param WC_Payment_Gateway_WCPay $gateway the gateway being shown.
+	 * @param WCPay\Payment_Methods\UPE_Payment_Method $payment_method the payment method being shown.
+	 *
+	 * @return string|false
+	 */
+	public function show_bnpl_payment_method_name( $gateway, $payment_method ) {
+		$method_logo_url = apply_filters(
+			'wc_payments_thank_you_page_bnpl_payment_method_logo_url',
+			$payment_method->get_payment_method_icon_for_location( 'checkout', false, $gateway->get_account_country() ),
+			$payment_method->get_id()
+		);
+
+		// If we don't have a logo URL here for some reason, bail.
+		if ( ! $method_logo_url ) {
+			return false;
+		}
+
+		ob_start();
+		?>
+		<div class="wc-payment-gateway-method-logo-wrapper wc-payment-bnpl-logo <?php echo $payment_method->get_id(); ?>">
+			<img alt="<?php echo $payment_method->get_title(); ?>" src="<?php echo esc_url_raw( $method_logo_url ); ?>">
+		</div>
+		<?php
+		return ob_get_clean();
+	}
+
 	/**
 	 * Add the notice to the thank you page in case a recent order with the same content has already paid.
 	 *

includes/class-wc-payments-utils.php

@@ -1098,4 +1098,57 @@ public static function is_cart_page(): bool {
 	public static function is_cart_block(): bool {
 		return has_block( 'woocommerce/cart' ) || ( wp_is_block_theme() && is_cart() );
 	}
+
+	/**
+	 * Gets the current active theme transient for a given location
+	 * Falls back to 'stripe' if no transients are set.
+	 *
+	 * @param string $location The theme location.
+	 * @param string $context The theme location to fall back to if both transients are set.
+	 * @return string
+	 */
+	public static function get_active_upe_theme_transient_for_location( string $location = 'checkout', string $context = 'blocks' ) {
+		$themes       = \WC_Payment_Gateway_WCPay::APPEARANCE_THEME_TRANSIENTS;
+		$active_theme = false;
+
+		// If an invalid location is sent, we fallback to trying $themes[ 'checkout' ][ 'block' ].
+		if ( ! isset( $themes[ $location ] ) ) {
+			$active_theme = get_transient( $themes['checkout']['blocks'] );
+		} elseif ( ! isset( $themes[ $location ][ $context ] ) ) {
+			// If the location is valid but the context is invalid, we fallback to trying $themes[ $location ][ 'block' ].
+			$active_theme = get_transient( $themes[ $location ]['blocks'] );
+		} else {
+			$active_theme = get_transient( $themes[ $location ][ $context ] );
+		}
+
+		// If $active_theme is still false here, that means that $themes[ $location ][ $context ] is not set, so we try $themes[ $location ][ 'classic' ].
+		if ( ! $active_theme ) {
+			$active_theme = get_transient( $themes[ $location ][ 'blocks' === $context ? 'classic' : 'blocks' ] );
+		}
+
+		// If $active_theme is still false here, nothing at the location is set so we'll try all locations.
+		if ( ! $active_theme ) {
+			foreach ( $themes as $location_const => $contexts ) {
+				// We don't need to check the same location again.
+				if ( $location_const === $location ) {
+					continue;
+				}
+
+				foreach ( $contexts as $context => $transient ) {
+					$active_theme = get_transient( $transient );
+					if ( $active_theme ) {
+						break 2; // This will break both loops.
+					}
+				}
+			}
+		}
+
+		// If $active_theme is still false, we don't have any theme set in the transients, so we fallback to 'stripe'.
+		if ( $active_theme ) {
+			return $active_theme;
+		}
+
+		// Fallback to 'stripe' if no transients are set.
+		return 'stripe';
+	}
 }

includes/payment-methods/class-affirm-payment-method.php

@@ -30,6 +30,7 @@ public function __construct( $token_service ) {
 		$this->stripe_id                    = self::PAYMENT_METHOD_STRIPE_ID;
 		$this->title                        = __( 'Affirm', 'woocommerce-payments' );
 		$this->is_reusable                  = false;
+		$this->is_bnpl                      = true;
 		$this->icon_url                     = plugins_url( 'assets/images/payment-methods/affirm-logo.svg', WCPAY_PLUGIN_FILE );
 		$this->dark_icon_url                = plugins_url( 'assets/images/payment-methods/affirm-logo-dark.svg', WCPAY_PLUGIN_FILE );
 		$this->currencies                   = [ Currency_Code::UNITED_STATES_DOLLAR, Currency_Code::CANADIAN_DOLLAR ];

includes/payment-methods/class-afterpay-payment-method.php

@@ -29,6 +29,7 @@ public function __construct( $token_service ) {
 		$this->stripe_id                    = self::PAYMENT_METHOD_STRIPE_ID;
 		$this->title                        = __( 'Afterpay', 'woocommerce-payments' );
 		$this->is_reusable                  = false;
+		$this->is_bnpl                      = true;
 		$this->icon_url                     = plugins_url( 'assets/images/payment-methods/afterpay-logo.svg', WCPAY_PLUGIN_FILE );
 		$this->currencies                   = [ Currency_Code::UNITED_STATES_DOLLAR, Currency_Code::CANADIAN_DOLLAR, Currency_Code::AUSTRALIAN_DOLLAR, Currency_Code::NEW_ZEALAND_DOLLAR, Currency_Code::POUND_STERLING ];
 		$this->countries                    = [ Country_Code::UNITED_STATES, Country_Code::CANADA, Country_Code::AUSTRALIA, Country_Code::NEW_ZEALAND, Country_Code::UNITED_KINGDOM ];

includes/payment-methods/class-klarna-payment-method.php

@@ -30,6 +30,7 @@ public function __construct( $token_service ) {
 		$this->stripe_id                    = self::PAYMENT_METHOD_STRIPE_ID;
 		$this->title                        = __( 'Klarna', 'woocommerce-payments' );
 		$this->is_reusable                  = false;
+		$this->is_bnpl                      = true;
 		$this->icon_url                     = plugins_url( 'assets/images/payment-methods/klarna-pill.svg', WCPAY_PLUGIN_FILE );
 		$this->currencies                   = [ Currency_Code::UNITED_STATES_DOLLAR, Currency_Code::POUND_STERLING, Currency_Code::EURO, Currency_Code::DANISH_KRONE, Currency_Code::NORWEGIAN_KRONE, Currency_Code::SWEDISH_KRONA ];
 		$this->accept_only_domestic_payment = true;

includes/payment-methods/class-upe-payment-method.php

@@ -90,6 +90,13 @@ abstract class UPE_Payment_Method {
 	 */
 	protected $dark_icon_url;
 
+	/**
+	 * Is the payment method a BNPL (Buy Now Pay Later) method?
+	 *
+	 * @var boolean
+	 */
+	protected $is_bnpl = false;
+
 	/**
 	 * Supported customer locations for which charges for a payment method can be processed
 	 * Empty if all customer locations are supported
@@ -198,6 +205,16 @@ public function is_reusable() {
 		return $this->is_reusable;
 	}
 
+	/**
+	 * Returns boolean dependent on whether payment method
+	 * will support BNPL (Buy Now Pay Later) payments
+	 *
+	 * @return bool
+	 */
+	public function is_bnpl() {
+		return $this->is_bnpl;
+	}
+
 	/**
 	 * Returns boolean dependent on whether payment method will accept charges
 	 * with chosen currency
@@ -258,6 +275,24 @@ public function get_dark_icon( string $account_country = null ) {
 		return isset( $this->dark_icon_url ) ? $this->dark_icon_url : $this->get_icon( $account_country );
 	}
 
+	/**
+	 * Gets the theme appropriate icon for the payment method for a given location and context.
+	 *
+	 * @param string  $location The location to get the icon for.
+	 * @param boolean $is_blocks Whether the icon is for blocks.
+	 * @param string  $account_country Optional account country.
+	 * @return string
+	 */
+	public function get_payment_method_icon_for_location( string $location = 'checkout', bool $is_blocks = true, string $account_country = null ) {
+		$appearance_theme = WC_Payments_Utils::get_active_upe_theme_transient_for_location( $location, $is_blocks ? 'blocks' : 'classic' );
+
+		if ( 'night' === $appearance_theme ) {
+			return $this->get_dark_icon( $account_country );
+		}
+
+		return $this->get_icon( $account_country );
+	}
+
 	/**
 	 * Returns payment method supported countries
 	 *

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

@@ -24,7 +24,7 @@ public function set_up() {
 
 	public function test_show_woopay_payment_method_name_empty_order() {
 		$method_name = 'Credit card';
-		$result      = $this->payments_order_success_page->show_woopay_payment_method_name( $method_name, null );
+		$result      = $this->payments_order_success_page->show_woocommerce_payments_payment_method_name( $method_name, null );
 
 		$this->assertSame( $method_name, $result );
 	}
@@ -34,7 +34,7 @@ public function test_show_woopay_payment_method_name_without_woopay_meta() {
 		$order->save();
 
 		$method_name = 'Credit card';
-		$result      = $this->payments_order_success_page->show_woopay_payment_method_name( $method_name, $order );
+		$result      = $this->payments_order_success_page->show_woocommerce_payments_payment_method_name( $method_name, $order );
 
 		$this->assertSame( $method_name, $result );
 	}
@@ -43,13 +43,14 @@ public function test_show_woopay_payment_method_name_order_with_woopay_meta() {
 		$order = WC_Helper_Order::create_order();
 		$order->add_meta_data( 'is_woopay', true );
 		$order->add_meta_data( 'last4', '1234' );
+		$order->set_payment_method( 'woocommerce_payments' );
 		$order->save();
 
 		add_filter( 'woocommerce_is_order_received_page', '__return_true' );
-		$result = $this->payments_order_success_page->show_woopay_payment_method_name( 'Credit card', $order );
+		$result = $this->payments_order_success_page->show_woocommerce_payments_payment_method_name( 'Credit card', $order );
 		remove_filter( 'woocommerce_is_order_received_page', '__return_true' );
 
-		$this->assertStringContainsString( 'wc-payment-gateway-method-name-woopay-wrapper', $result );
+		$this->assertStringContainsString( 'wc-payment-gateway-method-logo-wrapper woopay', $result );
 		$this->assertStringContainsString( 'img alt="WooPay"', $result );
 		$this->assertStringContainsString( sprintf( 'Card ending in %s', $order->get_meta( 'last4' ) ), $result );
 	}