Missing items in “Review your upgrade” page

[ValentinaPC]

Affected versions:

• All Firefox;

Affected FxA versions:

• 1.179.0;

Affected Platforms:

• Windows 10 (64-bit);

Prerequisites:

• Have and active FxA account;

Steps to reproduce:

1. Go to https://123done-stage.dev.lcip.org/;
2. Click the “Sign up” button;
3. Sign up with the account from prerequisites;
4. Click on the “Subscribe for Pro” button from page header;
5. Enter payment details while using a Diners Club/JCB/UnionPay card and finalize subscription;
6. Load in the same browser session the URL: https://payments-stage.fxa.nonprod.cloudops.mozgcp.net/products/prod_GVNS86uMUO3VRM
7. Observe the page;

Expected result:

• “30-day money-back guarantee” text is displayed under the “Review your upgrade” title;
• An icon/img or name of the used card is displayed in the "Billing information" section;

Actual result:

• “30-day money-back guarantee” text is not displayed under the “Review your upgrade” title;
• Only the “ending in XXXX” text with a space in front is displayed, looking like something is missing;

┆Issue is synchronized with this Jira Bug ┆Attachments: screenshot-1.png ┆Issue Number: FXA-2271

[lmorchard]

Two things here after some light sleuthing:

1. I don't think "30-day money-back guarantee" has been a part of this page before. (Maybe it should be? Not sure if the guarantee applies to upgrades - probably a product / legal question)
2. I can reproduce the missing image for a Diners Club card.
   • The CSS class for where the Diners Club card image should appear is class="c-card diners club"
   • This should probably be something without a space like diners-club
   • We don't seem to have a card image for a Diners Club card - only visa, mastercard, american, and discover.
     • We're missing a few of what the Stripe docs list as possible brands: "Can be American Express, Diners Club, Discover, JCB, MasterCard, UnionPay, Visa, or Unknown."

[data-sync-user]

➤ Wil Clouser commented:

1) [~jgruen@mozilla.com] do you want this text there?

2) Let's add the missing images

[data-sync-user]

➤ Wil Clouser commented:

From triage:  We do not want "30 day money-back guarantee" text on this page

[data-sync-user]

➤ Dave Justice commented:

[~jecook@mozilla.com] Could we get images with the same sizing(38x24) as our current credit card svgs?

https://github.com/mozilla/fxa/blob/main/packages/fxa-payments-server/src/images/visa.svg ( https://github.com/mozilla/fxa/blob/main/packages/fxa-payments-server/src/images/visa.svg )

We mine as well add logos for JCB, UnionPay, and an image for Unknown types.

[data-sync-user]

➤ Bianca Danforth commented:

There is already an unbranded card SVG ( https://github.com/mozilla/fxa/blob/ff65e2e362a4465e209768bec839691414247fc7/packages/fxa-payments-server/src/images/unbranded.svg ) we can use as a fallback in these scenarios.

I'm not sure where we got the original card images, but I'll look around a bit. If I can't easily find these other card type SVGs, I propose we use the unbranded SVG above as a fallback in these cases. [~jecook@mozilla.com], would that work for you? I will plan to do this unless I hear otherwise in the next couple of business days.

[data-sync-user]

➤ Bianca Danforth commented:

QA Steps to Reproduce

QA STR are already provided in Valentina's description of the issue. Test cards ( https://stripe.com/docs/testing#cards ) are provided by Stripe for the added brands (UnionPay, Diner's Club, JCB).

Notes:

• Per the discussion above, we do not want to display the "30-day money-back guarantee" subtitle on this page.
• FXA-3631 handles updating (or not) AcceptedCards (the row of card images displayed above the Stripe payment form).
• Due to SubPlat's currency/country restrictions ( https://github.com/mozilla-services/cloudops-deployment/blob/3a29e178d01732544910d36c7bf03d554b8ac79b/projects/fxa/puppet/yaml/type/fxa.auth_server.yaml#L46-L61 ), some cards are not verifiable (e.g. China UnionPay) for the currencies/countries we allow. It is recommended to test with a Diner's Club card.

[data-sync-user]

➤ Valentina Virlics commented:

[~bdanforth@mozilla.com] Due to Upgrading Plans - PI-1060 ( https://jira.mozilla.com/browse/PI-1060 ) we cannot completely check this issue. I've checked all mentioned cards icons (in Set up your subscription page) and all are present and have no issues. I can also confirm that not all cards from Stripe are verifiable ( e.g. !screenshot-1.png|thumbnail!). Will continue our verification while the possibility to upgrade plans will land in stage.

[data-sync-user]

➤ Bianca Danforth commented:

Thanks Valentina for the update; yes the fix for the screen layout landed in train 209 (FXA-3176), so hopefully you should be able to verify on the next deploy to stage.

[madalincm]

Verified this on Train v. 1.211.1 (Stage) while using Diners Club. The icon of the Diners Club card is displayed on the "Payment Information" section from Subscription upgrading page (see the attached screenshot). Also, we were not able to finalize the subscription while using JCB and UnionPay cards because of the currency/counties product unavailability.