fix(modal-checkout): style improvements to single-gateway

[miguelpeixe]

All Submissions:

• Have you followed the Newspack Contributing guideline?
• Does your code follow the WordPress' coding standards and VIP Go coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

NPPD-485

Related: Automattic/newspack-plugin#4220

Remove the box from single-gateway checkouts:

How to test the changes in this Pull Request:

1. Checkout this branch and fix(my-account): new payment method style tweaks newspack-plugin#4220
2. Make sure you have only Stripe as your payment gateway
3. Go through the modal checkout flow via a checkout button block
4. Confirm the card input is now borderless and the gateway title is hidden
5. Confirm you are able to fill the payment information and complete the checkout
6. Change your Woo setup to enable Woo Payments in sandbox mode so you have 2 gateways
7. Go through the checkout flow again and confirm the bordered style is preserved, you can select the different gateways and complete the checkout flow without issues
8. Deactivate the Stripe gateway and go through the checkout again
9. Confirm the Woo Payments gateway renders well in the new borderless stytle

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your changes, as applicable?
• Have you successfully ran tests with your changes locally?

[thomasguillot]

@miguelpeixe Thank you for the PR. I made some tiny tweaks here and there, mainly regarding font-size/line-height and margins.

Couple of questions:

• Is it possible to add a "Cancel" ghost button for the change payment method modal?
• The "Back" buttons flow are strange.
  • For the Change Subscription, I'd expect to go back to the Subscription selection screen, not my Billing details.
  • For the Renew now, it doesn't make sense to be able to go back as well. Why would anyone change their billing details like this? I'd expect a Close button instead.

Screenshot.2025-10-06.at.17.04.06.mp4

[miguelpeixe]

Is it possible to add a "Cancel" ghost button for the change payment method modal?

Added in e255b67. Because the page refreshes on modal close, the most straightforward way to implement this is to link it back to the subscription page.

The "Back" buttons flow are strange.
For the Change Subscription, I'd expect to go back to the Subscription selection screen, not my Billing details.
For the Renew now, it doesn't make sense to be able to go back as well. Why would anyone change their billing details like this? I'd expect a Close button instead.

That's inheriting the standard 2-step modal checkout behavior. Would it be better if we changed the button label to "Edit billing information" rather than back? Perhaps accompanied by a "Cancel" or"Close" as well?

[thomasguillot]

That's inheriting the standard 2-step modal checkout behavior. Would it be better if we changed the button label to "Edit billing information" rather than back? Perhaps accompanied by a "Cancel" or"Close" as well?

Yes, wfm, thank you @miguelpeixe (cancel for consistency)

[miguelpeixe]

Implemented in 5010817. I changed the Edit billing information button to secondary instead of ghost. Let me know if both Edit billing and Cancel should be ghost:

[thomasguillot]

This is perfect @miguelpeixe

[thomasguillot]

2 more small issues I noticed:

This is if I edit my billing details, the "Cancel" button shouldn't have a margin-bottom.

And there's a similar issue here.

[miguelpeixe]

Good catch! Fixed in eddf6de

[thomasguillot]

Thank you @miguelpeixe!

[github-actions]

Hey @miguelpeixe, good job getting this PR merged! 🎉

Now, the needs-changelog label has been added to it.

Please check if this PR needs to be included in the "Upcoming Changes" and "Release Notes" doc. If it doesn't, simply remove the label.

If it does, please add an entry to our shared document, with screenshots and testing instructions if applicable, then remove the label.

Thank you! ❤️

[matticbot]

🎉 This PR is included in version 4.17.0-alpha.1 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[matticbot]

🎉 This PR is included in version 4.17.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀