feat(modal-checkout): checkout from "My Account" dashboard #2121

miguelpeixe · 2025-05-13T20:10:36Z

All Submissions:

Have you followed the Newspack Contributing guideline?
Does your code follow the WordPress' coding standards and VIP Go coding standards?
Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

Introduces the newspackOpenModalCheckout( options ); function so the modal checkout can be initiated programmatically by 3rd parties.

options.title will determine the checkout title, not overriding other modal titles the modal checkout may require (thank you/newsletters).

options.actionType will set a custom action_type for the checkout_completed activity, which currently is either checkout_button or donation.

options.afterSuccess sets the after success url, behavior, and buttonLabel for the checkout.

options.onCheckoutComplete is a callback to be called on the checkout_complete RAS activity with the activity data

options.onClose is a callback to be called on the newly introduced checkout-closed custom event

This required a few changes to the modal checkout structure, which I commented inline.

How to test the changes in this Pull Request:

Follow instructions at Automattic/newspack-plugin#3973, but also make sure this introduces no regressions to regular modal checkout flows by donating and purchasing a subscription as a reader.

Other information:

Have you added an explanation of what your changes do and why you'd like us to include them?
Have you written new tests for your changes, as applicable?
Have you successfully ran tests with your changes locally?

…ids` param; `checkout-close` ev

includes/class-modal-checkout.php

includes/tracking/class-data-events.php

src/modal-checkout/utils.js

dkoo

Very nice refactor! I really like the addition of a global newspackOpenModalCheckout function that allows other plugin code to trigger modal checkouts. I noticed some differences in the data events activity payload for checkouts that we may want to examine more closely to avoid discontinuity in analytics, but other than that this is testing well.

src/modal-checkout/utils.js

dkoo

@miguelpeixe thank you for these revisions and for starting the standardization of checkout data! In general I like the consolidation of the transaction details into the new Checkout_Data class. I think this will be much more readable and easier to follow in the future compared with how it was handled before.

I'm running into a handful of issues that I think are related to these changes. No big surprise since this is an unexpectedly big refactor of a feature that touches many different areas.

When doing checkouts from a paywall/content gate, the np_modal_checkout_interaction events don't always seem to have gate_post_id params attached. I think this might be due to changes in how URL params are handled/passed from screen to screen within the modal iframe? In particular, the action=open event did have the param, but action=loaded and action=continue when transitioning between checkout screens did not. I tested against trunk and there, all np_modal_checkout_interaction events did have a gate_post_id param.
[NON-BLOCKING, but mentioning here because it's related to the next item] This is not related to these changes, but noting in case we want to handle this edge case in the future. Variable, non-subscription products are not handled by our Checkout Button block. Attaching a variable non-subscription product to a Checkout Button and clicking the button as a reader will always result in a checkout error: Please choose product options by visiting <a href="[product page URL] title="Product Name">Product Name</a>.
Related to the above, on trunk if as a reader I click a Checkout Button with a variable non-subscription product, I'll see the error message in the modal checkout window with a "Go back" button to close. On this branch, the modal checkout window will get stuck in a loading state and the error is logged to Logstash, but never shown to the reader. This is also replicable if you set a product to be limited to one per customer. On trunk, I see the error message below if I try to purchase a subscription product that I already own, but on this branch the modal checkout window hangs in a loading state.

Other feedback inline.

src/modal-checkout/modal.js

dkoo · 2025-05-27T21:08:45Z

includes/modal-checkout/class-checkout-data.php

+			'product_id'       => strval( $product_id ? $product_id : '' ),
+			'product_type'     => $product_type,
+			'price_summary'    => self::get_price_summary( $name, $amount, $recurrence ),
+			'summary_template' => self::get_price_summary( $name, '{{PRICE}}', $recurrence ),


This is a neat way to build the price summary, but it's superfluous to send to GA or any other integrations using this data. Can we strip it once price_summary has been set in the data object?

We need to keep the price_summary because it'll be reused every time a modal is rendered on the same page.

How about controlling the keys that are sent instead? Implemented in e74c77c

I like this approach! Makes it much easier to see and control which keys ultimately get sent where

includes/modal-checkout/class-checkout-data.php

miguelpeixe · 2025-05-29T14:34:14Z

The gate_post_id param has been fixed in 5b08f3d. Because we're now fetching that information from the cart item data, we no longer need to worry about passing it via URL, so this has been removed in d734a65.

I also identified an issue with newspack_popup_id that was also present in trunk. A hotfix is proposed in #2134 and Automattic/newspack-popups#1441. The fix is also implemented here (0a00a46) so it should work in this branch as well.

dkoo

This is all working well now! We're just missing a handful of GA event params in our whitelist—details below. After that this should be good to merge.

dkoo · 2025-05-29T18:57:08Z

src/modal-checkout/analytics/ga4/utils/index.js

+ *
+ * @type {string[]}
+ */
+const eventKeys = [


We also need action for the action parameter, e.g. seen, loaded, continue, etc. as well as all custom event params that we add in the main plugin.

as well as all custom event params that we add in the main plugin.

Were these part of the payload before? I've never seen them here

Added action in 8372718

Were these part of the payload before? I've never seen them here

They're only enabled if you add a NEWSPACK_GA_ENABLE_CUSTOM_FE_PARAMS environment constant. Originally we sent them with every event, but because some publishers have custom dimensions and events in their own GA setups, they sometimes caused our GA events to exceed the parameter limit per event. They're now opt-in only via this constant.

Ah, gotcha! We don't need to worry about it, then. That's hooked into googlesitekit_gtag_opt, which adds the custom parameters some other way. We don't manually send these via window.gtag( 'event' ).

Seems to work fine for me after enabling the flag.

Aha, you're right! I thought I wasn't seeing them, but it's just because I was testing on a page without categories. Thanks for looking into this.

dkoo

Looking good, thanks for the extensive refactoring here!

github-actions · 2025-05-29T20:59:47Z

Hey @miguelpeixe, good job getting this PR merged! 🎉

Now, the needs-changelog label has been added to it.

Please check if this PR needs to be included in the "Upcoming Changes" and "Release Notes" doc. If it doesn't, simply remove the label.

If it does, please add an entry to our shared document, with screenshots and testing instructions if applicable, then remove the label.

Thank you! ❤️

# [4.13.0-alpha.1](v4.12.3...v4.13.0-alpha.1) (2025-06-05) ### Bug Fixes * donate block formatting ([#2133](#2133)) ([f27cb76](f27cb76)) * update stripe express checkout divider ([#2131](#2131)) ([b907452](b907452)) ### Features * **modal-checkout:** checkout from "My Account" dashboard ([#2121](#2121)) ([0c5301b](0c5301b))

matticbot · 2025-06-05T19:04:39Z

🎉 This PR is included in version 4.13.0-alpha.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

# [4.13.0](v4.12.3...v4.13.0) (2025-06-16) ### Bug Fixes * donate block formatting ([#2133](#2133)) ([f27cb76](f27cb76)) * update stripe express checkout divider ([#2131](#2131)) ([b907452](b907452)) ### Features * **modal-checkout:** checkout from "My Account" dashboard ([#2121](#2121)) ([0c5301b](0c5301b))

matticbot · 2025-06-16T14:42:01Z

🎉 This PR is included in version 4.13.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

miguelpeixe added 9 commits May 13, 2025 17:09

feat(modal-checkout): support "My Account"

c1017f4

fix: change open checkout api approach

63077fa

chore: organize utility

0b6932d

fix: docblock

4a66e9f

feat: move getOrderDetails(); dynamic action_type; `subscription_…

43c3315

…ids` param; `checkout-close` ev

Merge branch 'trunk' into feat/modal-checkout-my-account

b200baf

fix: set modal title early

edd0696

fix: prevent emptyCart() from crashing js

94d8631

fix: properly catch fetch error

3e7ea64

miguelpeixe mentioned this pull request May 21, 2025

feat(my-account): resubscribe and renew early via modal checkout Automattic/newspack-plugin#3973

Merged

6 tasks

miguelpeixe commented May 21, 2025

View reviewed changes

includes/class-modal-checkout.php Show resolved Hide resolved

miguelpeixe commented May 21, 2025

View reviewed changes

includes/tracking/class-data-events.php Outdated Show resolved Hide resolved

miguelpeixe commented May 21, 2025

View reviewed changes

src/modal-checkout/utils.js Outdated Show resolved Hide resolved

miguelpeixe self-assigned this May 21, 2025

miguelpeixe marked this pull request as ready for review May 21, 2025 15:16

miguelpeixe requested a review from a team as a code owner May 21, 2025 15:16

miguelpeixe added 7 commits May 21, 2025 14:03

feat: improve options

6e14ecb

fix: detach onClose after close

31d84ba

chore: inline comment

bc49dea

chore: fix docblock

8b6dcd5

feat: include order id

87b20f6

fix: typo

e711857

feat: support subscription renewal id

4f5da8b

miguelpeixe mentioned this pull request May 22, 2025

feat: modal checkout for My Account's reorders Automattic/newspack-plugin#3988

Merged

6 tasks

dkoo requested changes May 22, 2025

View reviewed changes

src/modal-checkout/utils.js Outdated Show resolved Hide resolved

miguelpeixe added 5 commits May 23, 2025 12:16

fix: consolidate tracking checkout data

a13264a

fix: consolidate modal checkout data

5f85c5e

Merge branch 'trunk' into feat/modal-checkout-my-account

d0da095

fix: price summary method

78527dc

fix: apply price summary

7d64661

fix: account for membership product type

33f6b22

dkoo requested changes May 27, 2025

View reviewed changes

miguelpeixe added 7 commits May 28, 2025 14:07

Merge branch 'trunk' into feat/modal-checkout-my-account

8f11487

fix: ensure container and summary text node exists

a435ca4

fix: fetch gate and popup data from cart too

5b08f3d

fix: remove superfluous params

d734a65

Merge branch 'trunk' into feat/modal-checkout-my-account

0990e6e

fix(checkout-button): action hook for hidden fields

0a00a46

fix: control GA event keys

e74c77c

miguelpeixe requested a review from dkoo May 29, 2025 14:35

dkoo requested changes May 29, 2025

View reviewed changes

fix: add action event key

8372718

miguelpeixe requested a review from dkoo May 29, 2025 20:07

Merge branch 'trunk' into feat/modal-checkout-my-account

f2f2466

dkoo approved these changes May 29, 2025

View reviewed changes

github-actions bot added the [Status] Approved label May 29, 2025

miguelpeixe merged commit 0c5301b into trunk May 29, 2025
9 checks passed

miguelpeixe deleted the feat/modal-checkout-my-account branch May 29, 2025 20:59

github-actions bot added the needs-changelog label May 29, 2025

matticbot added the released on @alpha label Jun 5, 2025

miguelpeixe removed the needs-changelog label Jun 11, 2025

matticbot added the released label Jun 16, 2025

miguelpeixe mentioned this pull request Jun 25, 2025

fix(modal-checkout): price summary recurrence [NPPM-2084] #2152

Merged

6 tasks

dkoo mentioned this pull request Nov 12, 2025

fix: content gate metadata methods and params Automattic/newspack-plugin#4306

Merged

6 tasks

feat(modal-checkout): checkout from "My Account" dashboard #2121

feat(modal-checkout): checkout from "My Account" dashboard #2121

Uh oh!

Conversation

miguelpeixe commented May 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

All Submissions:

Changes proposed in this Pull Request:

How to test the changes in this Pull Request:

Other information:

Uh oh!

Uh oh!

Uh oh!

Uh oh!

dkoo left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

dkoo left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

miguelpeixe commented May 29, 2025

Uh oh!

dkoo left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dkoo left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions bot commented May 29, 2025

Uh oh!

matticbot commented Jun 5, 2025

Uh oh!

matticbot commented Jun 16, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

miguelpeixe commented May 13, 2025 •

edited

Loading

dkoo left a comment •

edited

Loading