Uniform Smart Button Display for PayPal, Google Pay, and Apple Pay (2177) #1900
Conversation
This file contains 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
pedrosilva-pt
requested review from
Dinamiko,
AlexP11223,
Narek13 and
mmaymo
AlexP11223
reviewed
Dec 12, 2023
| add_action( | ||
| 'wp_enqueue_scripts', | ||
| static function () use ( $c ) { | ||
| if ( ! has_block( 'woocommerce/checkout' ) && ! has_block( 'woocommerce/cart' ) ) { |
There was a problem hiding this comment.
This may not load in editor (if block not added yet).
If we want to fix that, here is how I check it in the messaging branch 4e34332
There was a problem hiding this comment.
I don't think we should load in the block editor right now as the preview there currently isn't working, maybe address it in the context of that fix:
| } | ||
|
|
||
| jQuery(wrapper).append(appleContainer); | ||
| jQuery(wrapper).append(appleContainer); // ToDo: this selector doesnt seem valid. |
There was a problem hiding this comment.
Yes, it seems to be doing nothing. <apple-pay-button> is already added because we set innerHTML above.
AlexP11223
approved these changes
Dec 13, 2023
Dinamiko
approved these changes
Dec 13, 2023
Dinamiko
deleted the
PCP-2177-uniform-smart-button-display-for-pay-pal-google-pay-and-apple-pay
branch
Merged
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.
This PR also resolves:
Do not render empty Apple Pay button div in frontend when buyer is not eligible (2411)
PR Description
This PR refactors Google Pay and Apple Pay so that they follow the PayPal button layout, namely button
heights(responsive and fixed) andmarginsbetween buttons.PayPal takes advantage of it's buttons being rendered inside an
iframeto add responsive behaviour via media queries.To emulate this behaviour and add responsiveness to Google Pay and Apple Pay this PR adds
ApmButtonshelper class.The helper calculates button margins and adds
CSSclasses to the button containers to allow for responsiveness.This PR also ensures that Apple Pay is only rendered on eligible devices.
It also adds
apm-button.scssmixin to share CSS rules between modules (buttons,blocks,admin) and between APM buttons (googlepay,applepay).Issue Description
As a website owner,
I want the PayPal, Google Pay, and Apple Pay smart buttons to have a consistent appearance,
So that my website provides a cohesive and visually appealing payment experience to users.
Acceptance Criteria:
1. PayPal Smart Button:
2. Google Pay Smart Button:
3. Apple Pay Smart Button: