Conversation
Contributor
Test the buildOption 1. Jetpack Beta
Option 2. Jurassic Ninja - available for logged-in A12s🚀 Launch a JN site with this branch 🚀 ℹ️ Install this Tampermonkey script to get more options. Build info:
Note: the build is updated when a new commit is pushed to this PR. |
Contributor
|
Size Change: -230 B (0%) Total Size: 950 kB
ℹ️ View Unchanged
|
…roach-in-payment-method
Contributor
There was a problem hiding this comment.
Pull request overview
This PR refactors the payment method label component to use WooCommerce Blocks' standard PaymentMethodLabel component instead of a custom implementation. The changes simplify the code by removing Stripe loading logic and appearance generation, while maintaining the same visual output through updated CSS that uses flexbox instead of grid layout.
Changes:
- Replaced custom PaymentMethodLabel component with WooCommerce Blocks' PaymentMethodLabel
- Refactored CSS from grid layout to flexbox for icon and badge positioning
- Removed unnecessary Stripe loading hooks and appearance generation logic
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| client/checkout/blocks/payment-method-label.js | Simplified component to use WooCommerce Blocks' PaymentMethodLabel with custom icon rendering |
| client/checkout/blocks/style.scss | Converted from grid layout to flexbox for better compatibility |
| client/checkout/blocks/index.js | Updated Label component creation to pass props through spread operator |
| changelog/woopmnt-5540-improve-icon-positioning-approach-in-payment-method | Added changelog entry |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
…roach-in-payment-method
…roach-in-payment-method
…roach-in-payment-method
htdat
approved these changes
Feb 4, 2026
Member
htdat
left a comment
htdat
left a comment
There was a problem hiding this comment.
LGTM! Tested with both the current latest version of Woo 10.4.3 and the bleeding edge (dev) version of Woo. I have only a minor comment regarding the CSS class name, which is not a blocker to merge this this PR.
| justify-self: end; | ||
| } | ||
| // Card brand logos - move to the end (right side) | ||
| .payment-methods--logos { |
Member
There was a problem hiding this comment.
Nitpick: I would like to have the prefix for this CSS class, as well as specific card rather than the generic payment method term.
Suggested change
| .payment-methods--logos { | |
| .wcpay-card--logos { |
Contributor
Author
There was a problem hiding this comment.
Good point, but this style name is shared with the classic checkout, so I'll leave it for the separate change.
frosso
reviewed
Feb 4, 2026
Contributor
frosso
left a comment
frosso
left a comment
There was a problem hiding this comment.
given the frequency of the re-renders for each customer interaction, I think it'd be best to apply some performance tweaks
…roach-in-payment-method
…roach-in-payment-method
frosso
approved these changes
Feb 5, 2026
Contributor
frosso
left a comment
frosso
left a comment
There was a problem hiding this comment.
Thank you for entertaining my changes, it's working well!
dmvrtx
deleted the
woopmnt-5540-improve-icon-positioning-approach-in-payment-method
branch
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes WOOPMNT-5540
Changes proposed in this Pull Request
Replaced custom
PaymentMethodLabelcomponent with a component available from WooCommerce Blocks.Visually nothing should change on the checkout page. But it will make our checkout view better compatible with WooCommerce expectations.
Before:
After:
Testing instructions
npm run changelogto add a changelog file, choosepatchto leave it empty if the change is not significant. You can add multiple changelog files in one PR by running this command a few times.Post merge