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

Add BNPL to cart summary #8427

Merged
merged 14 commits into from
Mar 28, 2024
Merged

Add BNPL to cart summary #8427

merged 14 commits into from
Mar 28, 2024

Conversation

mdmoore
Copy link
Member

@mdmoore mdmoore commented Mar 20, 2024

Fixes #8144

Changes proposed in this Pull Request

This adds the Stripe BNPL Payment Method Messaging Element to the cart summary on cart pages. For for classic cart, the PMME is mounted to a div that's added to the page. For the cart block, the Stripe <PaymentMethodMessagingElement /> component is used. Using this element required updating the stripe/react-stripe-js package. I've used the latest version of the package, so one thing to consider is whether this update will cause any issues and if an earlier package should be used.

This also integrates the Appearance API based on #8421.

Testing instructions

  1. Enable BNPL methods, i.e. Affirm, After Pay, Klarna
  2. Add a product to the cart
  3. Ensure that the shopper currency, country, and total amounts align with the requirements for BNPL payment methods. Each set of requirements can be found in the payment methods class. For example, the Klarna requirements can be found here.
  4. Check that the BNPL message is rendered on the following pages/scenarios and that the displayed amount updates when cart totals change(quantity change or coupons):
  • Classic theme using cart shortcode and cart block
  • Block based theme using cart shortcode(cart block will be displayed) and cart block
  • Product page

Testing the Appearance API
For classic themes, add some custom CSS to change fonts and background colors, such as:

body { 
    background: #000; 
    color: #fff;
}

Closing the Customizer will clear the transient.

For block based themes, change to a dark style. In Twenty Twenty-Four, easy to go Appearance > Editor > Styles > Onyx. Saving this style doesn't clear the transient, unfortunately. It will have to be cleared manually. npm run wp transient delete wcpay_upe_bnpl_cart_block_appearance and npm run wp transient delete wcpay_upe_bnpl_cart_block_appearance_theme should do the trick.


  • 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

@botwoo
Copy link
Collaborator

botwoo commented Mar 20, 2024

Test the build

Option 1. Jetpack Beta

  • Install and activate Jetpack Beta.
  • Use this build by searching for PR number 8427 or branch name add/8144-bnpl-cart-summary 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: 1779c07
  • Build time: 2024-03-28 15:10:16 UTC

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

Copy link
Contributor

github-actions bot commented Mar 20, 2024

Size Change: +26.2 kB (+2%)

Total Size: 1.22 MB

Filename Size Change
release/woocommerce-payments/dist/blocks-checkout.js 56.4 kB +2.29 kB (+4%)
release/woocommerce-payments/dist/checkout.js 37.3 kB +208 B (+1%)
release/woocommerce-payments/dist/index.css 40 kB +5 B (0%)
release/woocommerce-payments/dist/index.js 290 kB -209 B (0%)
release/woocommerce-payments/dist/product-details-rtl.css 236 B +81 B (+52%) 🆘
release/woocommerce-payments/dist/product-details.css 236 B +81 B (+52%) 🆘
release/woocommerce-payments/dist/product-details.js 17 kB +367 B (+2%)
release/woocommerce-payments/dist/settings.js 201 kB +2 kB (+1%)
release/woocommerce-payments/dist/cart-block.js 21.4 kB +21.4 kB (new file) 🆕
ℹ️ View Unchanged
Filename Size
release/woocommerce-payments/assets/css/admin.css 1.06 kB
release/woocommerce-payments/assets/css/admin.rtl.css 1.06 kB
release/woocommerce-payments/assets/css/success.css 158 B
release/woocommerce-payments/assets/css/success.rtl.css 158 B
release/woocommerce-payments/dist/blocks-checkout-rtl.css 1.92 kB
release/woocommerce-payments/dist/blocks-checkout.css 1.91 kB
release/woocommerce-payments/dist/cart.js 4.45 kB
release/woocommerce-payments/dist/checkout-rtl.css 405 B
release/woocommerce-payments/dist/checkout.css 406 B
release/woocommerce-payments/dist/index-rtl.css 40.1 kB
release/woocommerce-payments/dist/multi-currency-analytics.js 1.05 kB
release/woocommerce-payments/dist/multi-currency-rtl.css 3.28 kB
release/woocommerce-payments/dist/multi-currency-switcher-block.js 59.4 kB
release/woocommerce-payments/dist/multi-currency.css 3.29 kB
release/woocommerce-payments/dist/multi-currency.js 54.5 kB
release/woocommerce-payments/dist/order-rtl.css 733 B
release/woocommerce-payments/dist/order.css 735 B
release/woocommerce-payments/dist/order.js 41.7 kB
release/woocommerce-payments/dist/payment-gateways-rtl.css 1.21 kB
release/woocommerce-payments/dist/payment-gateways.css 1.21 kB
release/woocommerce-payments/dist/payment-gateways.js 38.5 kB
release/woocommerce-payments/dist/payment-request-rtl.css 155 B
release/woocommerce-payments/dist/payment-request.css 155 B
release/woocommerce-payments/dist/payment-request.js 12.4 kB
release/woocommerce-payments/dist/settings-rtl.css 11 kB
release/woocommerce-payments/dist/settings.css 10.8 kB
release/woocommerce-payments/dist/subscription-edit-page.js 669 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal-rtl.css 527 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.css 527 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.js 19.4 kB
release/woocommerce-payments/dist/subscription-product-onboarding-toast.js 710 B
release/woocommerce-payments/dist/subscriptions-empty-state-rtl.css 120 B
release/woocommerce-payments/dist/subscriptions-empty-state.css 120 B
release/woocommerce-payments/dist/subscriptions-empty-state.js 18.5 kB
release/woocommerce-payments/dist/tos-rtl.css 235 B
release/woocommerce-payments/dist/tos.css 236 B
release/woocommerce-payments/dist/tos.js 21 kB
release/woocommerce-payments/dist/woopay-direct-checkout.js 4.58 kB
release/woocommerce-payments/dist/woopay-express-button-rtl.css 155 B
release/woocommerce-payments/dist/woopay-express-button.css 155 B
release/woocommerce-payments/dist/woopay-express-button.js 21.1 kB
release/woocommerce-payments/dist/woopay-rtl.css 4.44 kB
release/woocommerce-payments/dist/woopay.css 4.41 kB
release/woocommerce-payments/dist/woopay.js 71 kB
release/woocommerce-payments/includes/subscriptions/assets/css/plugin-page.css 622 B
release/woocommerce-payments/includes/subscriptions/assets/js/plugin-page.js 812 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.37 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.js 13.5 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.rtl.css 2.37 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/about.css 1.03 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.6 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.4 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.52 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

@mdmoore mdmoore marked this pull request as ready for review March 27, 2024 13:49
@mdmoore mdmoore requested a review from gpressutto5 March 27, 2024 13:50
Copy link
Contributor

@gpressutto5 gpressutto5 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's an issue with the price when updating the cart in the cart page.

  1. Add some items to the cart.
  2. Change the quantity of one of them and hit Updated Cart.

image

image

@mdmoore
Copy link
Member Author

mdmoore commented Mar 27, 2024

There's an issue with the price when updating the cart in the cart page.

@gpressutto5 Looks like this is due decimals being set to 0. The updated value is coming from the store API and isn't prepared like the initial amount is via prepare_amount(). I'll need to think on it. If there's not a way handle this the conversion on the front-end, I might need to use an ajax request and pass the value through prepare_amount(). That's how I was originally handling this request but I switched to using the Store API last minute.

@mdmoore
Copy link
Member Author

mdmoore commented Mar 28, 2024

@gpressutto5 The updated amount is correct now. It was also an issue on the cart block when decimal precision was not 2. It's resolved now when you have time for another look.

@mdmoore mdmoore requested a review from gpressutto5 March 28, 2024 15:12
Copy link
Contributor

@gpressutto5 gpressutto5 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Everything looks great!

image

@mdmoore mdmoore added this pull request to the merge queue Mar 28, 2024
Merged via the queue into develop with commit 87c6cc6 Mar 28, 2024
22 checks passed
@mdmoore mdmoore deleted the add/8144-bnpl-cart-summary branch March 28, 2024 19:15
@mdmoore mdmoore mentioned this pull request Apr 5, 2024
6 tasks
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.

Add BNPL Payment Method Messaging below the Cart summary total
3 participants