Commit 9f98336df85 for woocommerce
commit 9f98336df854770d4efb4a8d7b0fc7e20b4d9d64
Author: Oleksandr Aratovskyi <79862886+oaratovskyi@users.noreply.github.com>
Date: Tue Oct 27 16:31:14 2026 +0200
Add missing WooPayments payment method logos in Payments settings (#70295)
* Add missing WooPayments payment method logos to the NOX list
* Add changelog entries for WooPayments payment method logos
diff --git a/packages/js/onboarding/changelog/fix-woopayments-missing-payment-method-logos b/packages/js/onboarding/changelog/fix-woopayments-missing-payment-method-logos
new file mode 100644
index 00000000000..17c7ea07a0a
--- /dev/null
+++ b/packages/js/onboarding/changelog/fix-woopayments-missing-payment-method-logos
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Add Alipay, WeChat Pay, and Multibanco to the WooPayments payment method logos, and derive the "+N" count from the logo list.
diff --git a/packages/js/onboarding/src/components/WooPaymentsMethodsLogos/index.tsx b/packages/js/onboarding/src/components/WooPaymentsMethodsLogos/index.tsx
index 46057314728..3cf7c85baea 100644
--- a/packages/js/onboarding/src/components/WooPaymentsMethodsLogos/index.tsx
+++ b/packages/js/onboarding/src/components/WooPaymentsMethodsLogos/index.tsx
@@ -29,6 +29,9 @@ import eps from '../../images/payment-methods/eps.svg';
import becs from '../../images/payment-methods/becs.svg';
import przelewy24 from '../../images/payment-methods/przelewy24.svg';
import grabpay from '../../images/payment-methods/grabpay.svg';
+import alipay from '../../images/payment-methods/alipay.svg';
+import wechatpay from '../../images/payment-methods/wechatpay.svg';
+import multibanco from '../../images/payment-methods/multibanco.svg';
interface PaymentMethod {
name: string;
@@ -73,6 +76,9 @@ const PaymentMethods: PaymentMethod[] = [
{ name: 'ideal', src: ideal },
{ name: 'przelewy24', src: przelewy24 },
{ name: 'grabpay', src: grabpay },
+ { name: 'alipay', src: alipay },
+ { name: 'wechatpay', src: wechatpay },
+ { name: 'multibanco', src: multibanco },
];
// Logos are decorative: the surrounding copy and the "+N" affordance convey
@@ -118,10 +124,10 @@ export const WooPaymentsMethodsLogos = ( {
maxElementsMobile = 5,
/**
* Total number of payment methods that WooPayments supports.
- * The default is set according to https://woocommerce.com/document/woopayments/payment-methods.
+ * Defaults to the number of logos in the list, so adding a logo keeps the "+N" count in sync.
* If not eligible for WooPay, the total number of payment methods is reduced by one.
*/
- totalPaymentMethods = 21,
+ totalPaymentMethods = PaymentMethods.length,
}: {
isWooPayEligible: boolean;
maxElements: number;
diff --git a/packages/js/onboarding/src/components/WooPaymentsMethodsLogos/test/index.test.tsx b/packages/js/onboarding/src/components/WooPaymentsMethodsLogos/test/index.test.tsx
new file mode 100644
index 00000000000..17894240e4e
--- /dev/null
+++ b/packages/js/onboarding/src/components/WooPaymentsMethodsLogos/test/index.test.tsx
@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import { createElement } from '@wordpress/element';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { WooPaymentsMethodsLogos } from '../';
+
+describe( 'WooPaymentsMethodsLogos', () => {
+ it.each( [ true, false ] )(
+ 'shows as many logos in the popover as the "+N" count (WooPay eligible: %s)',
+ async ( isWooPayEligible ) => {
+ const { container } = render(
+ <WooPaymentsMethodsLogos
+ isWooPayEligible={ isWooPayEligible }
+ maxElements={ 10 }
+ />
+ );
+
+ const count = screen.getByRole( 'button' );
+ const hiddenCount = Number(
+ count.textContent?.replace( /\D/g, '' )
+ );
+ expect( container.querySelectorAll( 'img' ) ).toHaveLength( 10 );
+
+ fireEvent.click( count );
+
+ await waitFor( () =>
+ expect(
+ document.querySelectorAll(
+ '.woocommerce-woopayments-payment-methods-logos-popover img'
+ )
+ ).toHaveLength( hiddenCount )
+ );
+ }
+ );
+} );
diff --git a/packages/js/onboarding/src/images/payment-methods/alipay.svg b/packages/js/onboarding/src/images/payment-methods/alipay.svg
new file mode 100644
index 00000000000..222c2684bc2
--- /dev/null
+++ b/packages/js/onboarding/src/images/payment-methods/alipay.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="40" fill="none" viewBox="0 0 64 40"><rect width="64" height="40" fill="#00A1E9" rx="3"/><path fill="#fff" d="M21.658 6C19.083 6 17 8.008 17 10.486v19.028C17 31.991 19.083 34 21.658 34H41.42c2.573 0 4.657-2.009 4.657-4.486v-.194c-.087-.035-7.557-3.035-11.354-4.794-2.562 3.036-5.865 4.878-9.296 4.878-5.8 0-7.77-4.89-5.024-8.107.599-.702 1.618-1.372 3.199-1.747 2.473-.586 6.41.365 10.1 1.537a19 19 0 0 0 1.637-3.854H23.97v-1.109h5.863v-1.988h-7.1v-1.11h7.1V10.19s0-.478.503-.478H33.2v3.314h7.02v1.11H33.2v1.988h5.73a22 22 0 0 1-2.426 5.902c1.74.606 3.3 1.18 4.463 1.556 3.881 1.25 4.968 1.403 5.109 1.419V10.486C46.077 8.009 43.993 6 41.42 6zm3.188 15.17q-.373.004-.75.04c-.727.07-2.09.38-2.837 1.014-2.234 1.877-.897 5.308 3.626 5.308 2.63 0 5.257-1.618 7.32-4.21-2.66-1.25-4.952-2.178-7.359-2.151"/></svg>
\ No newline at end of file
diff --git a/packages/js/onboarding/src/images/payment-methods/multibanco.svg b/packages/js/onboarding/src/images/payment-methods/multibanco.svg
new file mode 100644
index 00000000000..02020cbcebf
--- /dev/null
+++ b/packages/js/onboarding/src/images/payment-methods/multibanco.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="40" fill="none" viewBox="0 0 64 40"><rect width="64" height="40" fill="#fff" rx="3"/><path fill="#3D73B9" fill-rule="evenodd" d="M14.07 27.5h6.498c1.482 0 1.498-1.566 1.346-2.338-.082-.52-.971-.512-1.07 0v.602a.5.5 0 0 1-.504.502H7.886a.51.51 0 0 1-.504-.502v-.602c-.098-.512-.987-.52-1.07 0-.151.772-.136 2.338 1.347 2.338zm-4.59-15h10.015c.704 0 1.28.606 1.28 1.346v.642a.62.62 0 0 1-1.237.007v-.35a.41.41 0 0 0-.412-.41H9.09a.413.413 0 0 0-.412.41v.343c0 .904-1.181.898-1.181.02v-.661c.003-.74.578-1.347 1.282-1.347z" clip-rule="evenodd"/><path fill="#1D1D1B" fill-rule="evenodd" d="M20.522 19.89a1.96 1.96 0 0 1 1.172 1.762c0 1.082-.951 1.968-2.114 1.968h-3.263a.54.54 0 0 1-.554-.511V16.94a.54.54 0 0 1 .545-.54h2.716a2.08 2.08 0 0 1 1.913 1.252 2.05 2.05 0 0 1-.415 2.238m-2.434-.502h1.035v-.011a1 1 0 0 0 .598-.33.98.98 0 0 0 .239-.637.98.98 0 0 0-.29-.691 1 1 0 0 0-.695-.288h-2.086v5.117h2.644a1.025 1.025 0 0 0 .97-.616 1.006 1.006 0 0 0-.57-1.337 1 1 0 0 0-.4-.068h-1.445a.58.58 0 0 1-.528-.35.564.564 0 0 1 .309-.743.6.6 0 0 1 .219-.043" clip-rule="evenodd"/><path fill="#1D1D1B" d="M15.244 23.006a.645.645 0 0 1-.33.661.657.657 0 0 1-.972-.524l-.539-4.903-1.896 4.794v.059a.6.6 0 0 1-.164.186l-.01.008a.6.6 0 0 1-.114.08l-.012.006-.011.006h-.065a.6.6 0 0 1-.192.036h-.047a.6.6 0 0 1-.215-.044h-.053l-.012-.006-.01-.006h-.006a.6.6 0 0 1-.103-.069l-.022-.02-.016-.015-.04-.01-.019-.021a.6.6 0 0 1-.069-.103v-.006l-.006-.01-.006-.011v-.049L8.383 18.24l-.537 4.903a.65.65 0 0 1-.24.437.66.66 0 0 1-.92-.097.65.65 0 0 1-.14-.477l.632-5.78a1.07 1.07 0 0 1 .46-.767 1.1 1.1 0 0 1 .475-.183h.035q.082-.006.166 0a1.07 1.07 0 0 1 .66.26c.133.113.235.257.3.42l1.62 4.07 1.62-4.084a1.07 1.07 0 0 1 .958-.68q.084-.005.166 0h.035a1.09 1.09 0 0 1 .893.75q.031.1.043.205zm15.628-4.704a.38.38 0 0 1 .386-.383.387.387 0 0 1 .387.383v2.071a1.72 1.72 0 0 1-.507 1.215 1.74 1.74 0 0 1-1.222.505 1.74 1.74 0 0 1-1.223-.504 1.72 1.72 0 0 1-.508-1.213v-2.072a.38.38 0 0 1 .23-.38.39.39 0 0 1 .52.225.4.4 0 0 1 .02.155v2.072a.96.96 0 0 0 .285.673c.18.178.424.28.678.281a.97.97 0 0 0 .68-.282.96.96 0 0 0 .281-.675zm3.653 3.026a.387.387 0 0 1 .386.383.38.38 0 0 1-.386.384h-1.072c-.384 0-.752-.151-1.024-.421a1.43 1.43 0 0 1-.423-1.016v-2.356a.38.38 0 0 1 .383-.381.385.385 0 0 1 .384.381v2.351a.684.684 0 0 0 .681.677h1.07zm-6.49.341a.38.38 0 0 1-.186.4.387.387 0 0 1-.58-.31l-.329-2.76-1.178 2.708a.385.385 0 0 1-.707 0l-1.179-2.708-.331 2.76a.38.38 0 0 1-.276.345.39.39 0 0 1-.42-.14.38.38 0 0 1-.07-.295l.389-3.204a.61.61 0 0 1 .338-.476l.075-.034h.03a.66.66 0 0 1 .73.232.6.6 0 0 1 .067.115l1 2.302.999-2.32a.63.63 0 0 1 .454-.363 1 1 0 0 1 .113-.016h.119a.65.65 0 0 1 .533.415q.015.037.02.075v.05zm8.171.042a.38.38 0 0 1-.387.384.39.39 0 0 1-.386-.384v-3.025h-1.097a.387.387 0 0 1-.386-.384.38.38 0 0 1 .386-.383h2.967a.39.39 0 0 1 .386.383.38.38 0 0 1-.386.384h-1.097zm2.407 0a.38.38 0 0 1-.386.384.39.39 0 0 1-.386-.384v-3.409a.38.38 0 0 1 .386-.383.387.387 0 0 1 .386.383zm7.907-.042a.38.38 0 0 1-.339.406.39.39 0 0 1-.426-.314l-.137-1.083h-1.326a.39.39 0 0 1-.384-.229.38.38 0 0 1 .227-.516.4.4 0 0 1 .157-.02h1.24l-.036-.282v-.027a1.3 1.3 0 0 0-.123-.397.87.87 0 0 0-.977-.494.8.8 0 0 0-.172.065 1.08 1.08 0 0 0-.536.853l-.241 2.13a.38.38 0 0 1-.275.325.39.39 0 0 1-.406-.128.38.38 0 0 1-.082-.28l.24-2.13a1.82 1.82 0 0 1 .952-1.453 1.6 1.6 0 0 1 1.588.09c.26.167.466.404.595.684q.08.157.132.325.044.154.066.313a.1.1 0 0 1 0 .034zm1.179.042a.38.38 0 0 1-.23.381.388.388 0 0 1-.54-.38v-3.16a.3.3 0 0 1 0-.065.6.6 0 0 1 .03-.124l.031-.068a.55.55 0 0 1 .302-.25l.053-.014h.143a.55.55 0 0 1 .406.208l2.045 2.601v-2.538a.38.38 0 0 1 .386-.383.39.39 0 0 1 .386.383v3.159a.54.54 0 0 1-.33.494l-.031.014a.55.55 0 0 1-.414-.023l-.05-.025a.5.5 0 0 1-.075-.059l-.05-.05-.013-.015-2.05-2.61zm6.024-.383a.387.387 0 0 1 .386.383.38.38 0 0 1-.386.384h-1.136c-.403 0-.79-.16-1.075-.442a1.5 1.5 0 0 1-.444-1.067v-1.153c0-.4.161-.784.446-1.066a1.53 1.53 0 0 1 1.073-.444h1.136a.387.387 0 0 1 .386.384.38.38 0 0 1-.386.383h-1.136a.76.76 0 0 0-.532.226.74.74 0 0 0-.227.526v1.153a.75.75 0 0 0 .222.526.76.76 0 0 0 .53.22h1.136zm2.233-2.645a1.05 1.05 0 0 0-.73.29.94.94 0 0 0-.297.676v.715a.93.93 0 0 0 .295.677c.197.186.458.29.73.289.27.001.532-.102.728-.289a.94.94 0 0 0 .298-.677v-.715a.94.94 0 0 0-.295-.677 1.07 1.07 0 0 0-.732-.289m0-.764c.47-.002.923.177 1.263.5a1.7 1.7 0 0 1 .534 1.228v.715a1.7 1.7 0 0 1-.534 1.227c-.34.324-.792.503-1.263.501a1.82 1.82 0 0 1-1.263-.5 1.7 1.7 0 0 1-.531-1.228v-.715a1.7 1.7 0 0 1 .531-1.227 1.82 1.82 0 0 1 1.263-.501m-16.247.767v2.642h1.49a.49.49 0 0 0 .448-.299.48.48 0 0 0-.092-.509l-.016-.014a.48.48 0 0 0-.34-.144h-.514a.39.39 0 0 1-.386-.383.38.38 0 0 1 .386-.384h.175a.48.48 0 0 0 .392-.28.45.45 0 0 0-.098-.495.46.46 0 0 0-.32-.132h-1.125zm-.773 1.297v-1.665q0-.08.032-.151a.5.5 0 0 1 .089-.133.4.4 0 0 1 .254-.109h1.51c.327 0 .64.129.87.358a1.22 1.22 0 0 1 .171 1.513q.123.073.227.171l.025.027a1.236 1.236 0 0 1-.025 1.736 1.26 1.26 0 0 1-.886.365h-1.88a.387.387 0 0 1-.386-.384z"/></svg>
\ No newline at end of file
diff --git a/packages/js/onboarding/src/images/payment-methods/wechatpay.svg b/packages/js/onboarding/src/images/payment-methods/wechatpay.svg
new file mode 100644
index 00000000000..fbf9f247228
--- /dev/null
+++ b/packages/js/onboarding/src/images/payment-methods/wechatpay.svg
@@ -0,0 +1 @@
+<svg width="64" height="40" viewBox="0 0 64 40" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="64" height="40" fill="white"/><path d="M27.1,24.12c-.17.08-.35.12-.54.12-.43,0-.83-.23-1.04-.61l-.08-.16-3.29-7.01c-.03-.08-.05-.16-.04-.24,0-.15.06-.3.17-.41.11-.11.26-.17.42-.16.13,0,.27.05.38.12l3.88,2.69c.3.18.65.28,1,.29.21,0,.43-.04.63-.12l18.17-7.91c-3.3-3.79-8.67-6.24-14.71-6.24-9.96,0-18.01,6.56-18.01,14.67,0,4.4,2.42,8.4,6.21,11.09.44.27.62.83.42,1.31-.29,1.1-.79,2.9-.79,2.97-.05.14-.08.3-.08.45,0,.15.06.3.17.41.11.11.26.17.42.16.12,0,.24-.04.33-.12l3.92-2.24c.29-.17.62-.27.96-.29.18,0,.37.03.54.08,1.91.55,3.89.82,5.88.82,9.92,0,18-6.56,18-14.67-.02-2.42-.73-4.78-2.04-6.81l-20.71,11.74-.13.08h0Z" fill="#1aad19"/></svg>
\ No newline at end of file
diff --git a/plugins/woocommerce/changelog/fix-woopayments-missing-payment-method-logos b/plugins/woocommerce/changelog/fix-woopayments-missing-payment-method-logos
new file mode 100644
index 00000000000..5202097931e
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-woopayments-missing-payment-method-logos
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Show the Alipay, WeChat Pay, and Multibanco logos for WooPayments in Payments settings.