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 subscription variation support to WooPay button #7884

Merged
merged 5 commits into from
Dec 18, 2023

Conversation

mdmoore
Copy link
Member

@mdmoore mdmoore commented Dec 12, 2023

Fixes #7588

Changes proposed in this Pull Request

This adds support for the subscription_variation product type to the WooPay button, similar to what's done for payment request buttons.

Testing instructions

This covers an edge case and is a bit awkward to test. Variable Subscription products have the type, variable-subscription and the actual variations have the type,subscription_variation. When navigating to a variable subscription product and purchasing a variation, the the express checkout buttons will see variable-subscription as the product type. There is some case in which a subscription variation can be purchased while not attached to it's parent product, at which point the product type will be subscription_variation. Myself and others haven't been able to find a way to purchase a subscription variation via normal core flows.

Instructions

  1. Install WooCommerce Subscriptions and create a variable subscription with a few variations
  2. Find the ID of one variation in the Variations tab within the product settings
  3. Set the $product_id to the ID of the variation here. This will result in that subscription_variation being added to the cart any time the WooPay or payment request button is used.
  4. Navigate to any product and purchase via the WooPay button. You must be logged in to purchase subscriptions via WooPay
  5. Verify the subscription variation was added to the cart and can be purchased in WooPay and that the total is correct
  6. Repeat steps 4 and 5 using Google Pay, paying particular attention that the total is correct and not $0.

  • 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

@mdmoore mdmoore requested review from a team and gpressutto5 and removed request for a team December 12, 2023 04:28
@botwoo
Copy link
Collaborator

botwoo commented Dec 12, 2023

Test the build

Option 1. Jetpack Beta

  • Install and activate Jetpack Beta.
  • Use this build by searching for PR number 7884 or branch name fix/7588-woopay-subscription-variation 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: 9f789ab
  • Build time: 2023-12-18 22:13:19 UTC

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

Copy link
Contributor

github-actions bot commented Dec 12, 2023

Size Change: 0 B

Total Size: 1.26 MB

ℹ️ View Unchanged
Filename Size
release/woocommerce-payments/assets/css/admin.css 1.06 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 85.5 kB
release/woocommerce-payments/dist/checkout-rtl.css 318 B
release/woocommerce-payments/dist/checkout.css 319 B
release/woocommerce-payments/dist/checkout.js 37.1 kB
release/woocommerce-payments/dist/index-rtl.css 36.8 kB
release/woocommerce-payments/dist/index.css 36.8 kB
release/woocommerce-payments/dist/index.js 287 kB
release/woocommerce-payments/dist/multi-currency-analytics.js 1.05 kB
release/woocommerce-payments/dist/multi-currency-rtl.css 3.4 kB
release/woocommerce-payments/dist/multi-currency-switcher-block.js 60.5 kB
release/woocommerce-payments/dist/multi-currency.css 3.4 kB
release/woocommerce-payments/dist/multi-currency.js 55.7 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.7 kB
release/woocommerce-payments/dist/payment-gateways-rtl.css 1.31 kB
release/woocommerce-payments/dist/payment-gateways.css 1.31 kB
release/woocommerce-payments/dist/payment-gateways.js 39.3 kB
release/woocommerce-payments/dist/payment-request-rtl.css 153 B
release/woocommerce-payments/dist/payment-request.css 153 B
release/woocommerce-payments/dist/payment-request.js 13.6 kB
release/woocommerce-payments/dist/product-details.js 919 B
release/woocommerce-payments/dist/settings-rtl.css 10.4 kB
release/woocommerce-payments/dist/settings.css 10.4 kB
release/woocommerce-payments/dist/settings.js 233 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 710 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.5 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/woopay-express-button-rtl.css 153 B
release/woocommerce-payments/dist/woopay-express-button.css 153 B
release/woocommerce-payments/dist/woopay-express-button.js 52.6 kB
release/woocommerce-payments/dist/woopay-rtl.css 4.18 kB
release/woocommerce-payments/dist/woopay.css 4.19 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 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.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.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.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

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.

While testing this I noticed it already works in trunk, how can I simulate the case where this is broken?

image

I also noticed the Apple Pay / Google Pay button is never displayed in the product page of Variable Subscriptions. Is this expected?

@mdmoore
Copy link
Member Author

mdmoore commented Dec 15, 2023

I also noticed the Apple Pay / Google Pay button is never displayed in the product page of Variable Subscriptions. Is this expected?

I don't think this is expected. I'm seeing the buttons on variable subscription products on develop. I can't think of what might prevent the buttons from appearing on variable subscriptions. Maybe try some refreshes 🤔.

image

While testing this I noticed it already works in trunk, how can I simulate the case where this is broken?

This is where the weirdness comes in. It will work fine with a normal variable subscription product. To reproduce, you'll need to grab the ID of the subscription variation and hardcode it here. This will simulate purchasing a subscription_variation product. You could dump the product type here to be sure the product is a subscription_variation. Just keep in mind that dumping or throwing an exception here might prevent the error from appearing since it happens after the cart is emptied here.

Find the variation ID here:

image

The product is initially added to the cart and the GPay modal might show the correct total, but then will update to 0 after.

Reproducing the error will look like this:

image

Let me know if you're still unable to reproduce it and I'll try my best to help. It's a strange thing.

@mdmoore mdmoore requested a review from gpressutto5 December 18, 2023 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.

After some time debugging I discovered the button was not appearing because my subscription offered a 1-month trial 😓

I can confirm this PR fixes the issue.

Before After
image image
image image

@mdmoore
Copy link
Member Author

mdmoore commented Dec 18, 2023

After some time debugging I discovered the button was not appearing because my subscription offered a 1-month trial 😓

Ah, nice catch! Sorry I didn't notice that in your screenshot.

There's one JS test failing, but that's due to a different PR. I'll proceed with merging this one.

@mdmoore mdmoore enabled auto-merge December 18, 2023 22:27
@mdmoore mdmoore disabled auto-merge December 18, 2023 22:28
@mdmoore mdmoore merged commit b891eee into develop Dec 18, 2023
23 of 28 checks passed
@mdmoore mdmoore deleted the fix/7588-woopay-subscription-variation branch December 18, 2023 22:28
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.

Google/Apple pay buttons: Conflict between WooPay and payment button handlers.
3 participants