Commit 93bbb7802f8 for woocommerce
commit 93bbb7802f8899d0f5ed25524f21dcc0b4b5fc97
Author: Ahmed <ahmed.el.azzabi@automattic.com>
Date: Tue Mar 31 10:18:21 2026 +0100
Improve payments onboarding screen with clearer messaging and layout (#63919)
* fix: Improve payments onboarding screen with clearer messaging and layout
Split the single-card layout into two separate cards: one for activating
real payments and one for test mode. Update copy to better explain what's
required ("Answer a few questions and verify your business details with
our payments partner, including owner, address, and bank information")
and move the "Learn more" link below the CTA button. Remove the OR
divider in favor of separate, visually distinct cards.
Co-Authored-By: Claude <noreply@anthropic.com>
* Add changefile(s) from automation for the following project(s): woocommerce, woocommerce/client/admin
* Remove subtitle
* Add changefile(s) from automation for the following project(s): woocommerce, woocommerce/client/admin
* Remove unnecessary css styles
* Add aria-label to Learn more link for screen reader accessibility
Adds descriptive aria-label to the standalone "Learn more" link so
screen readers announce the link destination and that it opens in a
new tab (WCAG 2.4.4, G200).
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---------
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: woocommercebot <woocommercebot@users.noreply.github.com>
diff --git a/plugins/woocommerce/changelog/63919-fix-woopmnt-5477-payments-onboarding-messaging b/plugins/woocommerce/changelog/63919-fix-woopmnt-5477-payments-onboarding-messaging
new file mode 100644
index 00000000000..46508ff032a
--- /dev/null
+++ b/plugins/woocommerce/changelog/63919-fix-woopmnt-5477-payments-onboarding-messaging
@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Update copy on the activate payments step in NOX
\ No newline at end of file
diff --git a/plugins/woocommerce/client/admin/client/settings-payments/onboarding/providers/woopayments/steps/test-or-live-account/index.tsx b/plugins/woocommerce/client/admin/client/settings-payments/onboarding/providers/woopayments/steps/test-or-live-account/index.tsx
index d718700d83b..bf36a006565 100644
--- a/plugins/woocommerce/client/admin/client/settings-payments/onboarding/providers/woopayments/steps/test-or-live-account/index.tsx
+++ b/plugins/woocommerce/client/admin/client/settings-payments/onboarding/providers/woopayments/steps/test-or-live-account/index.tsx
@@ -50,16 +50,6 @@ const TestOrLiveAccountStep = () => {
'woocommerce'
) }
</h1>
- <div className="woocommerce-woopayments-modal__content__item">
- <div className="woocommerce-woopayments-modal__content__item__description">
- <p>
- { __(
- 'Activate payments to accept real orders and process transactions.',
- 'woocommerce'
- ) }
- </p>
- </div>
- </div>
{ currentStep?.errors &&
currentStep.errors.length > 0 && (
<Notice
@@ -92,27 +82,15 @@ const TestOrLiveAccountStep = () => {
<div className="woocommerce-woopayments-modal__content__item-flex__description">
<h3>
{ __(
- 'Activate real payments',
+ 'Activate payments in two easy steps',
'woocommerce'
) }
</h3>
<div>
- { interpolateComponents( {
- mixedString: __(
- 'Provide some additional details about your business to process real transactions. {{link}}Learn more{{/link}}',
- 'woocommerce'
- ),
- components: {
- link: (
- <Link
- href="https://woocommerce.com/document/woopayments/startup-guide/#sign-up-process"
- target="_blank"
- rel="noreferrer"
- type="external"
- />
- ),
- },
- } ) }
+ { __(
+ 'Answer a few questions and verify your business details with our payments partner, including owner, address, and bank information.',
+ 'woocommerce'
+ ) }
</div>
</div>
</div>
@@ -190,70 +168,74 @@ const TestOrLiveAccountStep = () => {
isBusy={ isContinueButtonLoading }
disabled={ isContinueButtonLoading }
>
- { __(
- 'Start accepting payments',
+ { __( 'Activate payments', 'woocommerce' ) }
+ </Button>
+ <Link
+ className="woocommerce-payments-test-or-live-account-step__learn-more"
+ href="https://woocommerce.com/document/woopayments/startup-guide/#sign-up-process"
+ target="_blank"
+ rel="noreferrer"
+ type="external"
+ aria-label={ __(
+ 'Learn more about the WooPayments sign-up process (opens in a new tab)',
'woocommerce'
) }
- </Button>
-
- { canCreateTestAccount && (
- <>
- <div className="woocommerce-payments-test-or-live-account-step__success_content_or-divider">
- <hr />
- { __( 'OR', 'woocommerce' ) }
- <hr />
- </div>
+ >
+ { __( 'Learn more', 'woocommerce' ) }
+ </Link>
+ </div>
- <div className="woocommerce-woopayments-modal__content__item-flex">
- <img
- src={
- WC_ASSET_URL +
- 'images/icons/post-list.svg'
- }
- alt=""
- role="presentation"
- />
- <div className="woocommerce-woopayments-modal__content__item-flex__description">
- <h3>
- { __(
- 'Test payments first, activate later',
- 'woocommerce'
- ) }
- </h3>
- <div>
- <p>
- { interpolateComponents( {
- mixedString: __(
- "A test account will be created for you to {{link}}test payments on your store{{/link}}. You'll need to activate payments later to process real transactions.",
- 'woocommerce'
+ { canCreateTestAccount && (
+ <div className="woocommerce-payments-test-or-live-account-step__success-whats-next">
+ <div className="woocommerce-woopayments-modal__content__item-flex">
+ <img
+ src={
+ WC_ASSET_URL +
+ 'images/icons/post-list.svg'
+ }
+ alt=""
+ role="presentation"
+ />
+ <div className="woocommerce-woopayments-modal__content__item-flex__description">
+ <h3>
+ { __(
+ 'Test payments first, activate later',
+ 'woocommerce'
+ ) }
+ </h3>
+ <div>
+ <p>
+ { interpolateComponents( {
+ mixedString: __(
+ "A test account will be created for you to {{link}}test payments on your store{{/link}}. You'll still need to activate payments later to process real transactions.",
+ 'woocommerce'
+ ),
+ components: {
+ link: (
+ <Link
+ href="https://woocommerce.com/document/woopayments/testing-and-troubleshooting/test-accounts/"
+ target="_blank"
+ rel="noreferrer"
+ type="external"
+ />
),
- components: {
- link: (
- <Link
- href="https://woocommerce.com/document/woopayments/testing-and-troubleshooting/test-accounts/"
- target="_blank"
- rel="noreferrer"
- type="external"
- />
- ),
- },
- } ) }
- </p>
- </div>
+ },
+ } ) }
+ </p>
</div>
</div>
- <Button
- variant="secondary"
- disabled={ isContinueButtonLoading }
- onClick={ () => {
- navigateToNextStep();
- } }
- >
- { __( 'Test payments', 'woocommerce' ) }
- </Button>
- </>
- ) }
- </div>
+ </div>
+ <Button
+ variant="secondary"
+ disabled={ isContinueButtonLoading }
+ onClick={ () => {
+ navigateToNextStep();
+ } }
+ >
+ { __( 'Test payments', 'woocommerce' ) }
+ </Button>
+ </div>
+ ) }
</div>
</div>
</div>
diff --git a/plugins/woocommerce/client/admin/client/settings-payments/onboarding/providers/woopayments/steps/test-or-live-account/style.scss b/plugins/woocommerce/client/admin/client/settings-payments/onboarding/providers/woopayments/steps/test-or-live-account/style.scss
index b5777f8eb40..aeb6380c303 100644
--- a/plugins/woocommerce/client/admin/client/settings-payments/onboarding/providers/woopayments/steps/test-or-live-account/style.scss
+++ b/plugins/woocommerce/client/admin/client/settings-payments/onboarding/providers/woopayments/steps/test-or-live-account/style.scss
@@ -10,7 +10,7 @@
&__success_content {
display: flex;
flex-direction: column;
- gap: $gap-small;
+ gap: $gap-large;
align-items: center;
&_title {
@@ -33,29 +33,27 @@
width: 100%;
justify-content: center;
}
+ }
- &_or-divider {
- text-align: center;
- display: flex;
- width: 100%;
- align-items: center;
- color: $gray-700;
- gap: $gap-small;
-
- hr {
- width: 100%;
- border-top: 1px solid $gray-200;
- }
- }
+ &__learn-more {
+ align-self: center;
}
&__success-whats-next {
display: flex;
flex-direction: column;
- gap: $gap-smaller * 2;
+ gap: $gap;
border: 1px solid $gray-200;
border-radius: 2px;
- padding: $gap-large;
+ padding: $gap-large $gap-large ($gap-large + $gap-smaller);
+
+ .woocommerce-woopayments-modal__content__item-flex {
+ gap: $gap-smaller - 2;
+
+ &__description {
+ gap: $gap-small;
+ }
+ }
.woocommerce-woopayments-modal__content__item h2 {
font-size: 15px;