Commit f50bdb03e67 for woocommerce
commit f50bdb03e677546bb5fc46fb81a7dbfbb1930850
Author: Ann <annchichi@users.noreply.github.com>
Date: Wed May 13 14:35:47 2026 +0800
Improve payment provider setup error message (#64799)
* Improve payment provider setup error message
* Add fallback setup message coverage
diff --git a/plugins/woocommerce/changelog/fix-payment-provider-needs-setup-message b/plugins/woocommerce/changelog/fix-payment-provider-needs-setup-message
new file mode 100644
index 00000000000..cc07a0e17fc
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-payment-provider-needs-setup-message
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Make the payment provider setup-required error message more actionable.
diff --git a/plugins/woocommerce/client/admin/client/settings-payments/components/buttons/enable-gateway-button.tsx b/plugins/woocommerce/client/admin/client/settings-payments/components/buttons/enable-gateway-button.tsx
index fc15783ade3..0cf27e59a51 100644
--- a/plugins/woocommerce/client/admin/client/settings-payments/components/buttons/enable-gateway-button.tsx
+++ b/plugins/woocommerce/client/admin/client/settings-payments/components/buttons/enable-gateway-button.tsx
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
import { Button } from '@wordpress/components';
import { useState } from '@wordpress/element';
import { dispatch, useDispatch } from '@wordpress/data';
@@ -171,9 +171,14 @@ export const EnableGatewayButton = ( {
}
} else {
createErrorNotice(
- __(
- 'The provider could not be enabled. Check the Manage page for details.',
- 'woocommerce'
+ sprintf(
+ /* translators: %s: payment gateway title. */
+ __(
+ 'Finish setting up %s before enabling it.',
+ 'woocommerce'
+ ),
+ gatewayProvider.title ||
+ __( 'this payment method', 'woocommerce' )
),
{
type: 'snackbar',
diff --git a/plugins/woocommerce/client/admin/client/settings-payments/components/buttons/test/enable-gateway-button.test.tsx b/plugins/woocommerce/client/admin/client/settings-payments/components/buttons/test/enable-gateway-button.test.tsx
new file mode 100644
index 00000000000..d0905e719c6
--- /dev/null
+++ b/plugins/woocommerce/client/admin/client/settings-payments/components/buttons/test/enable-gateway-button.test.tsx
@@ -0,0 +1,144 @@
+/**
+ * External dependencies
+ */
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import type {
+ PaymentGatewayProvider,
+ PaymentsProviderState,
+} from '@woocommerce/data';
+
+/**
+ * Internal dependencies
+ */
+import { EnableGatewayButton } from '../enable-gateway-button';
+
+const mockCreateErrorNotice = jest.fn();
+const mockTogglePaymentGateway = jest.fn();
+const mockInvalidateResolutionForStoreSelector = jest.fn();
+
+jest.mock( '@woocommerce/data', () => ( {
+ paymentSettingsStore: {},
+} ) );
+
+jest.mock( '@wordpress/data', () => ( {
+ dispatch: jest.fn( () => ( {
+ createErrorNotice: mockCreateErrorNotice,
+ } ) ),
+ useDispatch: jest.fn( () => ( {
+ togglePaymentGateway: mockTogglePaymentGateway,
+ invalidateResolutionForStoreSelector:
+ mockInvalidateResolutionForStoreSelector,
+ } ) ),
+} ) );
+
+jest.mock( '~/settings-payments/utils', () => ( {
+ recordPaymentsOnboardingEvent: jest.fn(),
+ recordPaymentsProviderEvent: jest.fn(),
+} ) );
+
+jest.mock( '~/settings-payments/constants', () => ( {
+ wooPaymentsOnboardingSessionEntrySettings: 'settings',
+} ) );
+
+const gatewayProvider = {
+ id: 'test-gateway',
+ title: 'Test Gateway',
+ state: {
+ enabled: false,
+ account_connected: true,
+ needs_setup: true,
+ test_mode: false,
+ dev_mode: false,
+ } as PaymentsProviderState,
+ _suggestion_id: 'test-suggestion',
+ _type: 'gateway',
+} as PaymentGatewayProvider;
+
+describe( 'EnableGatewayButton', () => {
+ beforeEach( () => {
+ mockTogglePaymentGateway.mockResolvedValue( {
+ data: 'needs_setup',
+ } );
+
+ Object.defineProperty( window, 'woocommerce_admin', {
+ value: {
+ ajax_url: '/wp-admin/admin-ajax.php',
+ nonces: {
+ gateway_toggle: 'test-nonce',
+ },
+ },
+ writable: true,
+ } );
+ } );
+
+ afterEach( () => {
+ jest.clearAllMocks();
+ } );
+
+ it( 'shows an actionable setup message when a connected gateway still needs setup', async () => {
+ const { getByRole } = render(
+ <EnableGatewayButton
+ gatewayProvider={ gatewayProvider }
+ settingsHref="/settings/test-gateway"
+ onboardingHref="/onboard/test-gateway"
+ isOffline={ false }
+ gatewayHasRecommendedPaymentMethods={ false }
+ installingPlugin={ null }
+ />
+ );
+
+ fireEvent.click( getByRole( 'link', { name: 'Enable' } ) );
+
+ await waitFor( () => {
+ expect( mockCreateErrorNotice ).toHaveBeenCalledWith(
+ expect.stringContaining( 'Test Gateway' ),
+ expect.objectContaining( {
+ type: 'snackbar',
+ explicitDismiss: true,
+ actions: expect.arrayContaining( [
+ expect.objectContaining( {
+ label: 'Manage',
+ url: '/settings/test-gateway',
+ } ),
+ ] ),
+ } )
+ );
+ } );
+ } );
+
+ it( 'falls back to a generic setup message when the gateway title is empty', async () => {
+ const gatewayProviderWithoutTitle = {
+ ...gatewayProvider,
+ title: '',
+ } as PaymentGatewayProvider;
+
+ const { getByRole } = render(
+ <EnableGatewayButton
+ gatewayProvider={ gatewayProviderWithoutTitle }
+ settingsHref="/settings/test-gateway"
+ onboardingHref="/onboard/test-gateway"
+ isOffline={ false }
+ gatewayHasRecommendedPaymentMethods={ false }
+ installingPlugin={ null }
+ />
+ );
+
+ fireEvent.click( getByRole( 'link', { name: 'Enable' } ) );
+
+ await waitFor( () => {
+ expect( mockCreateErrorNotice ).toHaveBeenCalledWith(
+ 'Finish setting up this payment method before enabling it.',
+ expect.objectContaining( {
+ type: 'snackbar',
+ explicitDismiss: true,
+ actions: expect.arrayContaining( [
+ expect.objectContaining( {
+ label: 'Manage',
+ url: '/settings/test-gateway',
+ } ),
+ ] ),
+ } )
+ );
+ } );
+ } );
+} );