update: tokenized ECE update on price change #10388
Merged
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
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. |
|
Size Change: +38 B (0%) Total Size: 1.29 MB
ℹ️ View Unchanged
|
frosso
commented
Feb 20, 2025
| } else { | ||
| expressCheckoutButtonUi.hideContainer(); | ||
| expressCheckoutButtonUi.getButtonSeparator().hide(); | ||
| } | ||
|
|
||
| addAction( |
There was a problem hiding this comment.
This has been moved from the wcpayECE.startExpressCheckoutElement() method to out here, so that we can only update the elements with the new total, in case it's needed.
| @@ -394,9 +392,7 @@ jQuery( ( $ ) => { | |||
| if ( ! getExpressCheckoutData( 'product' ) && ! cachedCartData ) { | |||
| try { | |||
| cachedCartData = await fetchNewCartData(); | |||
| } catch ( e ) { | |||
| // if something fails here, we can likely fall back on `getExpressCheckoutData( 'product' )`. | |||
There was a problem hiding this comment.
I removed this comment because it wasn't accurate anymore. The if block above checks if ( ! getExpressCheckoutData( 'product' ) && ! cachedCartData ).
So if we reach this point, getExpressCheckoutData( 'product' ) is empty - making the comment not valid.
| */ | ||
| startExpressCheckoutElement: async ( options ) => { |
There was a problem hiding this comment.
What was confusing to me, is that some of these options were needed to initialize the Stripe Elements.
Another subset of them were needed by the click handler.
So, if we wanted to update the ones in the click handler, we would have needed to override the values of this options argument.
I "solved" this by:
- Separating the options needed for the creation of the Stripe Elements (renaming them
creationOptions) - Having a new
getOnClickOptions()function, which will return the options needed by theclickhandler
| @@ -19,6 +20,10 @@ jQuery( ( $ ) => { | |||
| // Block the payment request button as soon as an "input" event is fired, to avoid sync issues | |||
| // when the customer clicks on the button before the debounced event is processed. | |||
| jQuery( ( $ ) => { | |||
| if ( getExpressCheckoutData( 'button_context' ) !== 'product' ) { | |||
There was a problem hiding this comment.
I noticed that the change on the $( '.quantity' ) element was also triggered on the shortcode cart page. It didn't look right.
frosso
requested review from
a team and
gpressutto5
and removed request for
a team
|
EDIT: NVM, there's already the |
6 tasks
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 #
Changes proposed in this Pull Request
I noticed that there are some optimization opportunities for the tokenized ECE and non-tokenized ECE.
We fully re-initialize the buttons on product changes - which can happen for a variety of reasons, including but not limited to:
Through these changes, I am keeping a reference to the Stripe element, so its
amountcan be updated without having to re-initialize the whole container.This approach reduces layout shifts due to the re-initialization of the button(s).
Before:
After:
Testing instructions
S | M | Lnpm 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