Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

misc: align deferred intent UPE checkout script with previous UPE versions #7528

Merged
merged 5 commits into from
Oct 25, 2023

Conversation

timur27
Copy link
Contributor

@timur27 timur27 commented Oct 20, 2023

Not urgent, miscellaneous changes to align with the split UPE & legacy UPE.

Changes proposed in this Pull Request

The deferred intent creation UPE checkout script doesn't apply font rules from page to the Stripe Payment Element, while it does so in previous legacy UPE and split UPE checkouts. This PR aligns with this setting.

On top of it, we now stop loading the script if there's no publishableKey just as a measure to prevent the script from loading on the wrong page. I couldn't find a way to test it because if we're on non-checkout page, the script is simply not enqueued. This is also just a tiny alignment of dUPE to follow split UPE/legacy UPE/non-UPE approach.

Testing instructions

To test fonts, start by checking out develop, building the code.

  1. Activate Deli theme
  2. Navigate to shortcode checkout and confirm the font within the Stripe Payment Element is not in line with the page fonts

At this point, checkout misc/checkout-scipt-alignment and

  • Refresh the page and confirm, that fonts are aligned now
Legacy UPE (as an example) Deferred intent UPE before this PR Deferred intent UPE after this PR
image image image

Although, like I mentioned earlier, I have no use-case to test the script loading prevention after the publishableKey check, this change is the alignment with split UPE, legacy UPE & legacy card. The only thing as part of testing, perform a test purchase on the shortcode page and e.g., add payment method page and confirm that everything works as expected.


  • Run npm run changelog to add a changelog file, choose patch to 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.
  • Covered with tests (or have a good reason not to test in description ☝️)
  • Tested on mobile (or does not apply)

Post merge

@timur27 timur27 changed the title Align deferred intent UPE checkout script with previous UPE versions misc: align deferred intent UPE checkout script with previous UPE versions Oct 20, 2023
@timur27 timur27 force-pushed the misc/checkout-scipt-alignment branch from 45653e2 to 6f956d3 Compare October 20, 2023 15:32
@botwoo
Copy link
Collaborator

botwoo commented Oct 20, 2023

Test the build

Option 1. Jetpack Beta

  • Install and activate Jetpack Beta.
  • Use this build by searching for PR number 7528 or branch name misc/checkout-scipt-alignment in your-test.site/wp-admin/admin.php?page=jetpack-beta&plugin=woocommerce-payments

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:

  • Latest commit: 6cf481f
  • Build time: 2023-10-25 07:36:13 UTC

Note: the build is updated when a new commit is pushed to this PR.

@github-actions
Copy link
Contributor

github-actions bot commented Oct 20, 2023

Size Change: +133 B (0%)

Total Size: 1.43 MB

Filename Size Change
release/woocommerce-payments/dist/upe_with_deferred_intent_creation_checkout.js 37.1 kB +133 B (0%)
ℹ️ View Unchanged
Filename Size
release/woocommerce-payments/assets/css/admin.css 1.04 kB
release/woocommerce-payments/assets/css/success.css 158 B
release/woocommerce-payments/dist/blocks-checkout-rtl.css 1.8 kB
release/woocommerce-payments/dist/blocks-checkout.css 1.8 kB
release/woocommerce-payments/dist/blocks-checkout.js 75.2 kB
release/woocommerce-payments/dist/checkout-rtl.css 440 B
release/woocommerce-payments/dist/checkout.css 441 B
release/woocommerce-payments/dist/checkout.js 29 kB
release/woocommerce-payments/dist/index-rtl.css 36.4 kB
release/woocommerce-payments/dist/index.css 36.5 kB
release/woocommerce-payments/dist/index.js 284 kB
release/woocommerce-payments/dist/multi-currency-analytics.js 1.05 kB
release/woocommerce-payments/dist/multi-currency-rtl.css 2.88 kB
release/woocommerce-payments/dist/multi-currency-switcher-block.js 60.3 kB
release/woocommerce-payments/dist/multi-currency.css 2.88 kB
release/woocommerce-payments/dist/multi-currency.js 55 kB
release/woocommerce-payments/dist/order-rtl.css 676 B
release/woocommerce-payments/dist/order.css 679 B
release/woocommerce-payments/dist/order.js 41.1 kB
release/woocommerce-payments/dist/payment-gateways-rtl.css 690 B
release/woocommerce-payments/dist/payment-gateways.css 692 B
release/woocommerce-payments/dist/payment-gateways.js 38.6 kB
release/woocommerce-payments/dist/payment-request-rtl.css 146 B
release/woocommerce-payments/dist/payment-request.css 146 B
release/woocommerce-payments/dist/payment-request.js 13.2 kB
release/woocommerce-payments/dist/product-details.js 898 B
release/woocommerce-payments/dist/settings-rtl.css 9.09 kB
release/woocommerce-payments/dist/settings.css 9.09 kB
release/woocommerce-payments/dist/settings.js 234 kB
release/woocommerce-payments/dist/subscription-edit-page.js 669 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal-rtl.css 519 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.css 519 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.js 20.4 kB
release/woocommerce-payments/dist/subscription-product-onboarding-toast.js 693 B
release/woocommerce-payments/dist/subscriptions-empty-state-rtl.css 117 B
release/woocommerce-payments/dist/subscriptions-empty-state.css 117 B
release/woocommerce-payments/dist/subscriptions-empty-state.js 19.6 kB
release/woocommerce-payments/dist/tos-rtl.css 230 B
release/woocommerce-payments/dist/tos.css 231 B
release/woocommerce-payments/dist/tos.js 22 kB
release/woocommerce-payments/dist/upe_checkout-rtl.css 440 B
release/woocommerce-payments/dist/upe_checkout.css 441 B
release/woocommerce-payments/dist/upe_checkout.js 34.1 kB
release/woocommerce-payments/dist/upe_split_checkout-rtl.css 440 B
release/woocommerce-payments/dist/upe_split_checkout.css 441 B
release/woocommerce-payments/dist/upe_split_checkout.js 34.7 kB
release/woocommerce-payments/dist/upe-blocks-checkout-rtl.css 1.8 kB
release/woocommerce-payments/dist/upe-blocks-checkout.css 1.8 kB
release/woocommerce-payments/dist/upe-blocks-checkout.js 41 kB
release/woocommerce-payments/dist/upe-split-blocks-checkout-rtl.css 1.8 kB
release/woocommerce-payments/dist/upe-split-blocks-checkout.css 1.8 kB
release/woocommerce-payments/dist/upe-split-blocks-checkout.js 42.5 kB
release/woocommerce-payments/dist/woopay-express-button-rtl.css 146 B
release/woocommerce-payments/dist/woopay-express-button.css 146 B
release/woocommerce-payments/dist/woopay-express-button.js 52.1 kB
release/woocommerce-payments/dist/woopay-rtl.css 3.91 kB
release/woocommerce-payments/dist/woopay.css 3.91 kB
release/woocommerce-payments/dist/woopay.js 71.8 kB
release/woocommerce-payments/includes/subscriptions/assets/css/plugin-page.css 622 B
release/woocommerce-payments/includes/subscriptions/assets/js/plugin-page.js 814 B
release/woocommerce-payments/vendor/automattic/jetpack-assets/build/i18n-loader.js 2.43 kB
release/woocommerce-payments/vendor/automattic/jetpack-assets/src/js/i18n-loader.js 1.01 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-ajax.js 522 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-callables.js 581 B
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/babel.config.js 160 B
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.css 2.32 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.js 13.8 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.rtl.css 2.32 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/about.css 1.2 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-empty-state.css 291 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-order-statuses.css 403 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin.css 3.56 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/checkout.css 299 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/modal.css 742 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/view-subscription.css 572 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/wcs-upgrade.css 411 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin-pointers.js 544 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin.js 9.63 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.js 6.8 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.min.js 3.83 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-coupon.js 544 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-subscription.js 2.38 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.js 22.1 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.min.js 11.6 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/payment-method-restrictions.js 1.29 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/wcs-meta-boxes-order.js 502 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/payment-methods.js 355 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/single-product.js 429 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/view-subscription.js 1.38 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/wcs-cart.js 781 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/modal.js 1.1 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/wcs-upgrade.js 1.27 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.css 392 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.js 3.05 kB

compressed-size-action

@timur27 timur27 requested review from a team and gpressutto5 and removed request for a team October 20, 2023 15:52
@timur27 timur27 added this pull request to the merge queue Oct 25, 2023
Merged via the queue into develop with commit 6ba3d6d Oct 25, 2023
27 checks passed
@timur27 timur27 deleted the misc/checkout-scipt-alignment branch October 25, 2023 08:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants