Registrationless checkout: Create account, new site, and process transaction

[niranjan-uma-shankar]

Changes proposed in this Pull Request

This is one among a set of stacked PRs that implements userless checkout A/B test. For more reading on the userless
checkout project, read pau2Xa-1hW-p2.

This PR implements the following:

• When the pay button is clicked on the logged out checkout page, it first creates a passwordless user account using the email address in the Billing Info or Contact Info section. Next, it creates a new site for the user using the saved site parameters from localStorage.
• Displays appropriate error messages should anything fail during account or site creation.
• Completes payment transaction for both CC and PayPal payment types.

Testing instructions

NOTE: Depends on D45659-code, so please apply this first.

Scenario 1 - Verify transaction is successful with a credit card

1. Navigate to http://calypso.localhost:3000/, set your locale/geo to EN-US, and assign yourself to variantUserless of userlessCheckout test.
2. Begin at /start, select a paid plan and proceed to checkout. Enter an email address in the Billing Info section, and then use a credit card to process transaction.
3. Verify that the transaction completes, and you are taken to either customer home or Quick Start upsell offer(depending on the A/B test you fall under).
4. Repeat steps above with domain and plan in cart, and verify transaction is successful (we want to verify that account gets created with the email field in both Billing Info and Contact Info formats).
5. In Customer Home, check localstorage.shoppingCart and localstorage.siteParams in your browser consle and confirm that it's deleted.

NOTE - Buying an eCommerce plan will need take to the Thank You page after transaction - this will be fixed in #44238

Scenario 2 - Verify transaction is successful with PayPal

1. Repeat all the steps in Scenario 1, with the only difference being that the payment type should be PayPal.

NOTE - Canceling transaction from the paypal.com page will not work correctly with this PR, and it will be fixed in #44238

Scenario 3 - Verify recaptcha response is sent to account endpoint

1. While on the checkout page, click the Pay button. Check network requests and verify that a call to /users/new endpoint is made with g-recaptcha-response prop having the recaptcha token value.

Scenario 4 - Verify that after credit card payment error, account or site creation is not duplicated

1. In the userless checkout flow, add a paid plan to cart and proceed to the checkout page.
2. Use this tool to generate a dummy credit card number, and attempt to purchase with the dummy card.
3. Verify that you get a "transaction declined" error. At this point, if you open a new tab you will see that a new account and site has already been created.
4. In your main tab, replace the dummy card with a working card (like your store sandbox card number). Clicking the pay button should now complete transaction and take you to customer home. Verify that only one site was created.

Scenario 5 - Verify that after payment error, email ID change gives an appropriate behaviour

1. In the userless checkout flow, add a paid plan to cart and proceed to the checkout page.
2. Use this tool to generate a dummy credit card number, and attempt to purchase with the dummy card.
3. Verify that you get a "transaction declined" error. At this point, a user account is already created for you.
4. Now in the Billing Info or Contact Info section of checkout, change the email address to an existing wpcom account. Clicking "Continue" on the Billing Info section should give a validation error asking you to log in.
5. If you keep the same email ID, then "Continue" will allow you to proceed.
6. If you change the email address to a new ID that does not yet exist on wpcom, then "Continue" button will still allow you to proceed and validation will pass. If you successfully complete the payment, then the user account created in step 3 will have its email updated with the new value entered in the checkout form. You will get an email confirmation that looks like this:

Scenario 6 - Verify coupon works

1. Add a coupon in the checkout page, and verify that the coupon gets applied.
2. Complete payment and verify that the amount charged is the reduced amount after coupon discount.

[matticbot]

Test live: https://calypso.live/?branch=add/create-account-site-and-pay-userless-checkout

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Webpack Runtime (~3971 bytes removed 📉 [gzipped])

name      parsed_size           gzip_size
manifest      -5384 B  (-2.6%)    -3971 B  (-9.7%)

Webpack runtime for loading modules. It is included in the HTML page as an inline script. Is downloaded and parsed every time the app is loaded.

App Entrypoints (~95138 bytes added 📈 [gzipped])

name                   parsed_size            gzip_size
entry-login              +229586 B  (+26.4%)   +50327 B  (+21.1%)
entry-main               +203762 B  (+15.2%)   +44936 B  (+13.4%)
entry-domains-landing       +290 B   (+0.1%)     -404 B   (-0.3%)
entry-gutenboarding         +137 B   (+0.0%)     +279 B   (+0.1%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~168749 bytes removed 📉 [gzipped])

name                    parsed_size            gzip_size
gutenberg-editor          -202798 B  (-22.7%)   -47898 B  (-19.9%)
checkout                  -185336 B  (-11.6%)   -41421 B  (-10.5%)
post-editor                -41017 B   (-2.0%)    -7670 B   (-1.4%)
domains                    -20962 B   (-1.8%)    -4895 B   (-1.8%)
plans                      -17023 B   (-3.3%)    -3479 B   (-2.5%)
media                      -16526 B   (-4.0%)    -4750 B   (-4.2%)
posts                      -15911 B   (-4.3%)    -4757 B   (-4.6%)
posts-custom               -15837 B   (-4.3%)    -4561 B   (-4.5%)
purchases                  -15831 B   (-1.6%)    -3202 B   (-1.4%)
email                      -15137 B   (-4.6%)    -3749 B   (-4.2%)
settings-writing           -15029 B   (-2.9%)    -4692 B   (-3.4%)
woocommerce                -14079 B   (-0.7%)    -2276 B   (-0.4%)
hosting                    -13201 B   (-5.8%)    -3480 B   (-5.4%)
people                     -13183 B   (-3.4%)    -3518 B   (-3.4%)
pages                      -12985 B   (-5.4%)    -3734 B   (-5.4%)
earn                       -12450 B   (-4.2%)    -2525 B   (-3.2%)
security                   -11499 B   (-2.4%)    -2302 B   (-1.9%)
wp-super-cache             -11340 B   (-4.9%)    -3076 B   (-4.9%)
reader                     -10299 B   (-2.0%)    -1966 B   (-1.5%)
help                        -6249 B   (-1.3%)     -489 B   (-0.4%)
settings                    -6142 B   (-1.3%)    -1616 B   (-1.2%)
stats                       -5798 B   (-0.7%)    -1269 B   (-0.6%)
home                        -5232 B   (-1.2%)    -1144 B   (-1.0%)
settings-security           -5057 B   (-1.7%)    -1169 B   (-1.4%)
themes                      -4776 B   (-1.3%)     -386 B   (-0.4%)
comments                    -4506 B   (-0.8%)    -1061 B   (-0.8%)
theme                       -4438 B   (-1.5%)    -1199 B   (-1.5%)
jetpack-connect             -3974 B   (-0.6%)     -390 B   (-0.2%)
plugins                     -3957 B   (-0.9%)     +120 B   (+0.1%)
zoninator                   -3703 B   (-1.2%)    -1194 B   (-1.4%)
marketing                   -3656 B   (-0.8%)    -1064 B   (-0.9%)
activity                    -3645 B   (-0.7%)     -695 B   (-0.5%)
site-blocks                 -3598 B   (-1.1%)     +131 B   (+0.2%)
settings-performance        -3486 B   (-1.2%)     -863 B   (-1.0%)
preview                     -3231 B   (-2.1%)     -685 B   (-1.6%)
customize                   -3204 B   (-1.8%)     -929 B   (-1.8%)
google-my-business          -3105 B   (-1.0%)     -569 B   (-0.7%)
backup                      -3070 B   (-0.7%)     -641 B   (-0.5%)
export                      -2868 B   (-1.4%)     -803 B   (-1.4%)
settings-discussion         -2562 B   (-1.1%)     -781 B   (-1.2%)
account-close               -2444 B   (-0.8%)     +284 B   (+0.3%)
account                     -2282 B   (-0.6%)     +411 B   (+0.4%)
import                      -2262 B   (-1.0%)     -420 B   (-0.7%)
settings-jetpack            -1901 B   (-0.9%)     -319 B   (-0.5%)
scan                        -1734 B   (-0.5%)     -325 B   (-0.4%)
purchase-product            -1579 B   (-2.3%)     -443 B   (-2.4%)
notification-settings       -1453 B   (-0.4%)     +513 B   (+0.6%)
signup                      +1115 B   (+0.5%)     +259 B   (+0.4%)
concierge                    -753 B   (-0.2%)     -138 B   (-0.2%)
feature-upsell               -689 B   (-0.4%)      -73 B   (-0.2%)
privacy                      -666 B   (-0.2%)     +704 B   (+1.0%)
me                           -666 B   (-0.3%)     +702 B   (+1.0%)
happychat                    -666 B   (-0.2%)     +692 B   (+0.9%)
jetpack-cloud-settings       -542 B   (-0.4%)      -53 B   (-0.1%)
sites                        -278 B   (-0.3%)       +2 B   (+0.0%)
sensei                       -278 B   (-0.3%)       -8 B   (-0.0%)
migrate                      -278 B   (-0.2%)       +4 B   (+0.0%)
jetpack-cloud                -278 B   (-0.3%)       +3 B   (+0.0%)
hello-dolly                  -278 B   (-0.3%)       -8 B   (-0.0%)
accept-invite                -252 B   (-0.1%)     +143 B   (+0.2%)
devdocs                      -114 B   (-0.1%)      -32 B   (-0.1%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~19734 bytes added 📈 [gzipped])

name                                                                  parsed_size             gzip_size
async-load-blocks-inline-help-popover                                   +130485 B   (+62.2%)   +38359 B   (+67.3%)
async-load-blocks-inline-help                                            +69725 B   (+93.2%)   +16823 B   (+94.3%)
async-load-design-blocks                                                 -31469 B    (-1.0%)    -5902 B    (-0.8%)
async-load-blocks-inline-help-dialog                                     +24708 B  (+496.7%)    +6971 B  (+355.5%)
async-load-components-web-preview-component                              -21706 B    (-5.0%)    -5100 B    (-4.4%)
async-load-design                                                        -19212 B    (-1.0%)    -3697 B    (-0.8%)
async-load-design-playground                                             -16781 B    (-0.9%)    -3045 B    (-0.7%)
async-load-post-editor-media-modal                                       -14651 B    (-5.2%)    -3377 B    (-4.5%)
async-load-my-sites-current-site-domain-warnings                         -12127 B   (-21.1%)    -3803 B   (-24.6%)
async-load-lib-preferences-helper                                        -10777 B   (-56.1%)    -3131 B   (-57.1%)
async-load-blocks-support-article-dialog-dialog                           -5411 B    (-5.8%)    -1351 B    (-5.0%)
async-load-my-sites-sidebar                                               -5318 B    (-3.0%)     -624 B    (-1.3%)
async-load-signup-steps-plans                                             -3626 B    (-1.9%)     -293 B    (-0.6%)
async-load-signup-steps-domains                                           -2333 B    (-0.9%)    -1121 B    (-1.8%)
async-load-signup-steps-import-url-onboarding                             -2309 B    (-6.2%)     -557 B    (-4.8%)
async-load-my-sites-current-site-stale-cart-items-notice                  -2292 B    (-4.0%)     -467 B    (-2.7%)
async-load-signup-steps-import-url                                        -1998 B    (-8.4%)     -467 B    (-6.5%)
async-load-my-sites-site-settings-seo-settings-form                       -1894 B    (-0.7%)     -344 B    (-0.5%)
async-load-signup-steps-plans-atomic-store                                -1812 B    (-1.5%)     +141 B    (+0.4%)
async-load-signup-steps-site-topic                                        -1750 B    (-5.9%)     -421 B    (-4.9%)
async-load-signup-steps-about                                             -1750 B    (-3.0%)     -421 B    (-2.5%)
async-load-layout-guided-tours-component                                  -1738 B    (-2.0%)     -373 B    (-1.7%)
async-load-apps-notifications-index-jsx                                   -1642 B    (-1.4%)     -366 B    (-1.1%)
async-load-signup-steps-theme-selection                                   -1565 B    (-2.4%)     -389 B    (-2.1%)
async-load-layout-nps-survey-notice                                       -1517 B    (-6.0%)     -341 B    (-5.4%)
async-load-my-sites-current-site-notice                                   -1312 B    (-2.1%)     -325 B    (-2.2%)
async-load-signup-steps-survey                                            -1293 B    (-7.6%)     -318 B    (-6.9%)
async-load-signup-steps-site-picker                                        -988 B    (-1.7%)     -210 B    (-1.2%)
async-load-layout-guided-tours                                             -963 B    (-6.2%)     -198 B    (-5.0%)
async-load-signup-steps-import-preview                                     -926 B    (-3.5%)     -257 B    (-3.2%)
async-load-signup-steps-site-or-domain                                     -826 B    (-4.0%)     -211 B    (-3.7%)
async-load-reader-following-manage                                         -825 B    (-0.7%)     -217 B    (-0.7%)
async-load-lib-abtest-test-helper                                          -682 B    (-7.5%)     -175 B    (-5.7%)
async-load-signup-steps-user                                               -615 B    (-0.5%)     -149 B    (-0.5%)
async-load-signup-steps-upsell                                             -615 B    (-2.1%)     -158 B    (-2.2%)
async-load-signup-steps-test-step                                          -615 B    (-7.6%)     -170 B    (-7.1%)
async-load-signup-steps-site-type                                          -615 B    (-5.4%)     -166 B    (-5.1%)
async-load-signup-steps-site-title                                         -615 B    (-5.3%)     -167 B    (-5.1%)
async-load-signup-steps-site-style                                         -615 B    (-2.1%)     -177 B    (-1.8%)
async-load-signup-steps-site                                               -615 B    (-2.5%)     -165 B    (-2.3%)
async-load-signup-steps-rewind-were-backing                                -615 B    (-7.0%)     -172 B    (-6.5%)
async-load-signup-steps-rewind-migrate                                     -615 B    (-2.5%)     -171 B    (-2.5%)
async-load-signup-steps-rewind-form-creds                                  -615 B    (-1.3%)     -167 B    (-1.4%)
async-load-signup-steps-rebrand-cities-welcome                             -615 B    (-4.5%)     -167 B    (-4.4%)
async-load-signup-steps-reader-landing                                     -615 B    (-5.3%)     -171 B    (-5.4%)
async-load-signup-steps-passwordless                                       -615 B    (-2.4%)     -162 B    (-2.3%)
async-load-signup-steps-p2-site                                            -615 B    (-2.4%)     -158 B    (-2.3%)
async-load-signup-steps-creds-permission                                   -615 B    (-2.1%)     -161 B    (-2.0%)
async-load-signup-steps-creds-confirm                                      -615 B    (-2.1%)     -163 B    (-2.0%)
async-load-signup-steps-creds-complete                                     -615 B    (-7.0%)     -168 B    (-6.3%)
async-load-signup-steps-clone-start                                        -615 B    (-4.3%)     -174 B    (-4.2%)
async-load-signup-steps-clone-ready                                        -615 B    (-2.2%)     -172 B    (-2.2%)
async-load-signup-steps-clone-point                                        -615 B    (-0.4%)     -158 B    (-0.4%)
async-load-signup-steps-clone-jetpack                                      -615 B    (-5.8%)     -170 B    (-5.9%)
async-load-signup-steps-clone-destination                                  -615 B    (-3.0%)     -166 B    (-3.0%)
async-load-signup-steps-clone-credentials                                  -615 B    (-1.0%)     -163 B    (-1.0%)
async-load-signup-steps-clone-cloning                                      -615 B    (-4.5%)     -173 B    (-4.3%)
async-load-docs-selectors                                                  -615 B   (-11.0%)     -172 B    (-9.8%)
async-load-blocks-jitm-templates-sidebar-banner                            -495 B    (-1.8%)     -136 B    (-1.9%)
async-load-blocks-jitm-templates-notice                                    -495 B    (-1.8%)     -131 B    (-1.8%)
async-load-blocks-jitm-templates-default                                   -495 B    (-1.9%)     -133 B    (-1.9%)
async-load-components-sites-popover                                        -373 B    (-0.6%)      -55 B    (-0.3%)
async-load-reader-tag-stream-main                                          -370 B    (-2.4%)     -102 B    (-2.2%)
async-load-reader-sidebar                                                  -370 B    (-0.6%)      -99 B    (-0.6%)
async-load-components-jetpack-sidebar                                      -328 B    (-1.6%)      -88 B    (-1.4%)
async-load-layout-masterbar-drafts-popover                                 -229 B    (-0.7%)      -37 B    (-0.4%)
async-load-blocks-login-two-factor-authentication-two-factor-content       -211 B    (-0.9%)      -68 B    (-0.9%)
async-load-reader-search-stream                                            -147 B    (-0.2%)      -40 B    (-0.2%)
async-load-blocks-support-article-dialog                                    -63 B    (-6.2%)      -10 B    (-2.2%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[sirbrillig]

This code looks good to me! I just haven't tested it yet, but that should happen soon.

[nbloomf]

Thank you again for the thorough testing instructions! Just a heads up - we have payment sandboxes in place so we can test specific processor responses without using real cards. Here's a list of stripe test cards: https://stripe.com/docs/testing. You just need to set a couple of constants on your sandbox; let me know if you'd like help with that.

Here are the results of my initial testing. I didn't get through all the scenarios yet but already ran into a couple of issues.

Scenario 1 (plan only with card success):

• Using a fresh incognito window I navigated to calypso.localhost:3000 and manually assigned myself to variantUserless, as well as the control group for newSiteGutenbergOnboarding.
• I navigated to /start, which redirects to /start/onboarding-new/domains. I selected a free subdomain and personal plan and was redirected to /checkout/no-site/en?signup=1 as expected.
• I verified that contact info form validation works as expected before continuing to the payment method step.
• I selected the new card payment method and verified that form validation works as expected before submitting a successful payment using a test card.

From here several things happened.

• After the payment submission completed, I was redirected to /home and then immediately to /log-in?redirect_to=%2Fhome and prompted to log in. I think this was unexpected.
  • At this point I did not know my username, but after entering my email address I was directed to check my email for a login link. Clicking on this link took me to /log-in/link/use, with the message Logging in as $email_address. From here I continued to /home.
• I got an email containing my randomly generated username and a link to confirm my email address.
  • Clicking on the confirmation link took me to my newly created site.
• I also got an email receipt for my new purchase. It's a little confusing that this also refers to my randomly generated username since this is my first time seeing it.
• I verified that my subscription and ownership were correctly provisioned on wpcom.

One note:

• The subject line of the account verification email was a little confusing; it's of the form Activate $username -> $email, where $username is something I didn't choose and have never seen before. Something like "Verify your new WordPress.com account" might be better.

Scenario 1 (plan+domain with card success):

• Using a fresh incognito window I navigated to calypso.localhost:3000 and manually assigned myself to variantUserless, as well as the control group for newSiteGutenbergOnboarding.
• I navigated to /start, which redirects to /start/onboarding-new/domains. I selected a paid domain and personal plan and was redirected to /checkout/no-site/en?signup=1 as expected.
• I verified that contact info form validation works as expected before continuing to the payment method step.
• I selected the new card payment method and verified that form validation works as expected before submitting a successful payment using a test card.
• From here I saw the same outcome as in the plan only test: redirected to /home and then immediately to /log-in?redirect_to=%2Fhome, activation and receipt emails sent, and subscription and ownerships correctly provisioned on wpcom.
• I verified that localStorage.shoppingCart and localStorage.siteParams were both deleted as expected.

Scenario 2 (plan+domain with paypal success):

• Using a fresh incognito window I navigated to calypso.localhost:3000 and manually assigned myself to variantUserless, as well as the control group for newSiteGutenbergOnboarding.
• I navigated to /start, which redirects to /start/onboarding-new/domains. I selected a paid domain and premium plan and was redirected to /checkout/no-site/en?signup=1 as expected.
• I verified that contact info form validation works as expected before continuing to the payment method step. Notably, validation appears to short circuit after checking the email field. If I leave the whole form blank, only the email field gets an error annotation.
• I continued to the payment method step, chose PayPal, and submitted payment. I was redirected to PayPal, logged in, and made a sandbox payment.
• I was redirected back to https://public-api.wordpress.com/rest/v1/me/transactions/paypal-express?, which returned a 403 with the following error: {"error":"authorization_required","message":"An active access token must be used to retrieve information about the current user."}. This was not expected. I suspect this is related to the issue I saw with the card test, where after submitting payment the redirect to /home immediately redirected to a login page.
• I verified that neither subscriptions nor ownerships were provisioned on wpcom, nor was a receipt generated (as expected in the case of payment failure).
• From here I manually navigated to /home, which redirected to /log-in?redirect_to=%2Fhome.
• I noted that both localStorage.shoppingCart and localStorage.siteParams were still populated.

[niranjan-uma-shankar]

After the payment submission completed, I was redirected to /home and then immediately to /log-in?redirect_to=%2Fhome and prompted to log in. I think this was unexpected.

My guess is that this is happening because your incognito browser blocks third party cookies. This is a recent change from Chrome that enables blocking of third party cookies by default for incognito windows. So, with calypso URLs, wpcom cookies don't interact as expected. Please try disabling the option(check screenshot below) and let me know if it works for you i.e after payment succeeds you should be taken to /home and not the log in page.
Users will not see this issue when this launches on production since they will be using wordpress.com URLs.

I also got an email receipt for my new purchase. It's a little confusing that this also refers to my randomly generated username since this is my first time seeing it.

TBH I'm not the biggest fan of the randomly generated names and I agree that it looks confusing. Right now it serves an important purpose and other flows are using it too(including Gutenboarding). Doing it a different way could be a project on its own though :)

Notably, validation appears to short circuit after checking the email field. If I leave the whole form blank, only the email field gets an error annotation.

The email field validation gets first priority, so if there's an email error, the other field errors won't show at first. I thought this would help give focus to email errors. This is especially in the case where the user has typed an existing email address and we ask them to log in because if they are going to log in, then showing the other field errors is distracting. If the email successfully validates, then other field errors will show and they do not get short circuited.

I was redirected back to https://public-api.wordpress.com/rest/v1/me/transactions/paypal-express?, which returned a 403

Disabling the setting to block third party cookies in your browser should fix this.

Just a heads up - we have payment sandboxes in place so we can test specific processor responses without using real cards.

I use store sandbox for credit cards and also the sandbox mode for PayPal and other payment types. Thanks for surfacing this.

[niranjan-uma-shankar]

Updates

1. In 131547e, the siteSlug value will be sent as cart key instead of site ID if we are in the logged out cart context.

2. In c18bd58, I've implemented @DavidRothstein and @nbloomf 's suggestion of basing the username on the site name. So, we won't get those randomly generated usernames.

[niranjan-uma-shankar]

The subject line of the account verification email was a little confusing; it's of the form Activate $username -> $email, where $username is something I didn't choose and have never seen before. Something like "Verify your new WordPress.com account" might be better.

Thanks for the suggestion @nbloomf . I've fixed this in the backend D45659-code. You should now receive emails of the form you mentioned.

[niranjan-uma-shankar]

@sirbrillig @DavidRothstein @nbloomf I think I've addressed all the review inputs on this PR, but please let me know if I missed anything.

[sirbrillig]

Looks ok to me. I'll approve.