Skip to content

@W-19751635 SPM UX changes in checkout #3365

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 8 commits into from
Sep 30, 2025
Merged

@W-19751635 SPM UX changes in checkout #3365

merged 8 commits into from
Sep 30, 2025

Conversation

syadupathi-sf
Copy link
Collaborator

Description

Changes to make the UX better in the Saved Payment Method section of one click checkout

Types of Changes

  • Bug fix (non-breaking change that fixes an issue)
  • New feature (non-breaking change that adds functionality)
  • Documentation update
  • Breaking change (could cause existing functionality to not work as expected)
  • Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

  • Removing a public function or component or prop
  • Adding a required argument to a function
  • Changing the data type of a function parameter or return value
  • Adding a new peer dependency to package.json

Changes

  • Summary card and edit card shows amount on the top instead of the credit card form so that it is applicable to all SPMs
  • On clicking "Edit Payment Info" on summary card, the edit card with the list is seen immediately. There is no "remove" intermediate step anymore.
  • The saved payment methods are shown first in the list and then the credit card form and then Paypal
  • The default payment method is shown pre-selected
Screenshot 2025-09-26 at 4 32 27 PM

How to Test-Drive This PR

  • As a guest shopper, verify the amount and payment form shows
  • As a returning shopper, verify the amount and payment summary card shows after auth; verify clicking Edit Payment Info shows the SPM list; verify the default SPM is pre-selected; verify order can be placed with default SPM/non-default SPM/new credit card

Checklists

General

  • Changes are covered by test cases
  • CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

  • There are no changes to UI

or...

Localization

  • Changes include a UI text update in the Retail React App (which requires translation)

@syadupathi-sf syadupathi-sf requested a review from a team as a code owner September 26, 2025 21:32
@syadupathi-sf syadupathi-sf added the skip changelog Skip the "Changelog Check" GitHub Actions step even if the Changelog.md files are not updated label Sep 26, 2025
@cc-prodsec
Copy link
Collaborator

cc-prodsec commented Sep 26, 2025 •
edited
Loading

🎉 Snyk checks have passed. No issues have been found so far.

✅ security/snyk check is complete. No issues have been found. (View Details)

✅ license/snyk check is complete. No issues have been found. (View Details)

sf-mkosak
sf-mkosak reviewed Sep 29, 2025
View reviewed changes
packages/template-retail-react-app/app/pages/checkout-one-click/partials/one-click-payment.jsx Outdated
// Ensure basket reflects removal before rendering form
await currentBasketQuery.refetch()
} catch (_e) {
// Ignore, user can still attempt to change method
Copy link

Choose a reason for hiding this comment

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

So what is the experience in this case? User clicks edit, the payment method isn't removed from the basket due to some error. User selects a new payment method. Is the removal attempted a second time? Are they left with double payment?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

We are not attempting a removal a second time. Any suggestion on how to deal with this use case? @sf-mkosak

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Should we show an error message and prevent them from changing their payment method?

Copy link

Choose a reason for hiding this comment

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

Should we show an error message and prevent them from changing their payment method?
I think this is a decent experience since the user would be able to 'retry' or simply place the order with existing payment method.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Done. I added an error message.

sf-mkosak
sf-mkosak reviewed Sep 30, 2025
View reviewed changes
...s/template-retail-react-app/app/pages/checkout-one-click/partials/one-click-payment-form.jsx Outdated

const savedCount = savedPaymentInstruments?.length || 0
const totalItems = savedCount + 2 // saved + credit card + paypal
const n = showAllPaymentInstruments ? totalItems : INITIAL_DISPLAYED_SAVED_PAYMENT_INSTRUMENTS
Copy link

Choose a reason for hiding this comment

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

Nit: a more readable/meaningful variable name

sf-mkosak
sf-mkosak reviewed Sep 30, 2025
View reviewed changes
...s/template-retail-react-app/app/pages/checkout-one-click/partials/one-click-payment-form.jsx Outdated
const totalItems = savedCount + 2 // saved + credit card + paypal
const n = showAllPaymentInstruments ? totalItems : INITIAL_DISPLAYED_SAVED_PAYMENT_INSTRUMENTS

const displayedSavedCount = Math.min(savedCount, n)
Copy link

Choose a reason for hiding this comment

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

This isn't the savedCount is it? n could be total items which is saved + hardcoded methods paypall and new CC

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

It's the count of SPMs shown in the collapsed view. Min of SPMs and n which is either 3 when collapsed or total(SPMs + CC + PayPal) when expanded.

@syadupathi-sf syadupathi-sf merged commit 72cef5d into feature/1cc_payments Sep 30, 2025
42 checks passed
@syadupathi-sf syadupathi-sf deleted the syadupathi.W-19751635.spmChanges branch September 30, 2025 19:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@sf-mkosak sf-mkosak sf-mkosak approved these changes

Assignees
No one assigned
Labels
skip changelog Skip the "Changelog Check" GitHub Actions step even if the Changelog.md files are not updated
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@syadupathi-sf @cc-prodsec @sf-mkosak