W-21372336: Fail Order for redirect based payments by rasbhat · Pull Request #3707 · SalesforceCommerceCloud/pwa-kit

rasbhat · 2026-03-03T15:38:34Z

Description

When we have a failed order on redirect based payments, checkout page just kept loading indefinitely.

Cause:
Previously, the code always called failOrder when payment failed or the return URL was invalid. But this caused an issue when either payment already failed on provider's end, or a webhook already failed it : the user landed on the checkout page, and tried to fail the same order again which caused the load indefinitely.

Fix: We try to fail an order if the order is still in a state we can fail. We also attempt to fail the order only once per page load (guardrail against multiple failOrders)

Testing:

Tested failOrder with 3DS declined card:

Tested Afterpay declined transaction:

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

(change1)

How to Test-Drive This PR

(step1)

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...

Changes were tested with a Screen Reader (iOS VoiceOver or Android Talkback) and had no issues
Changes comply with WCAG 2.0 guidelines levels A and AA
Changes to common UI patterns and interactions comply with WAI-ARIA best practices

Localization

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

cc-prodsec · 2026-03-03T15:38:51Z

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

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues
✅	Licenses	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

packages/template-retail-react-app/app/pages/checkout/payment-processing.jsx

jeffraab-sfdc · 2026-03-03T15:46:46Z

packages/template-retail-react-app/app/pages/checkout/payment-processing.jsx


    const isError = !isValidReturnUrl()
    const isHandled = useRef(false)
+    const failOrderCalledRef = useRef(false)


If there's an easy way to combine this with isHandled I think it would be more readable. If no easy way, then we can save that for a later refactor.

Tested it. Seems like isHandled is already handling it. failOrderCalledRef was redundant. removed it.

jeffraab-sfdc · 2026-03-03T15:47:36Z

packages/template-retail-react-app/app/pages/checkout/payment-processing.jsx

            }
-        })
+        } catch {
+            // Order may already be failed by webhook; avoid hanging


Do we only have a catch block to contain the comment describing why we don't need a catch block?

Might need the catch to handle a few scenarios for us to avoid hanging. Listed the possible scenarios in a comment here.

jeffraab-sfdc · 2026-03-03T15:48:43Z

packages/template-retail-react-app/app/pages/checkout/payment-processing.jsx

-                // Navigate back to the checkout page to try again
-                navigate('/checkout')
+                // Redirect to cart when payment fails
+                navigate('/cart')


When we hit this case it's because a gateway redirected the shopper back to the storefront, and the payment failed. We would like to navigate the shopper back to the start of the redirect which is the checkout page.

Makes sense, reverted back to navigate to checkout. Updated the screenshot in description that reflects it.

packages/template-retail-react-app/app/pages/checkout/payment-processing.jsx

sf-mkosak · 2026-03-03T15:51:39Z

packages/template-retail-react-app/app/pages/checkout/payment-processing.test.js

+                expect(mockNavigate).toHaveBeenCalledWith('/cart')
+            })
+
+            test('does not call failOrder when order already failed by webhook (e.g. 3DS declined)', async () => {


Do we need a test for scenario of the race condition that I think the catch block covers in the component code? e.g. the failOrder API fails because it's already in failed state.

Seems like that might be a scenario too! Good catch! Listed it in the catch block comment and added a test for the same.

sf-mkosak · 2026-03-03T18:09:51Z

packages/template-retail-react-app/app/pages/checkout/payment-processing.jsx

+
+        try {
+            const token = await getTokenWhenReady()
+            const currentOrder = await api.shopperOrders.getOrder({


There is a useOrder hook. Can we use that or is specific way to do it the way you are doing it here? Having to get and set bearer token in the component seems off

Makes sense. used useOrder. I was referring to express payments implementataion, where token is manually set.

If express is wrong then should we update it?

jeffraab-sfdc · 2026-03-03T20:44:03Z

packages/template-retail-react-app/app/pages/checkout/payment-processing.jsx

            }
-        })
+        } catch (error) {
+            // Swallow so flow continues (invalidate, navigate). Causes: (1) Race: refetch


Thanks for this comment. IMO the fact the framework level design decisions bring us to this scenario where swallowing an error is the right path, implicates those decisions not our code as a consumer. I'm ok with this.

If there was a way to recover the basket even when fail order fails (and not just when it passes) then it might be consistent. That reopen flag isn't really reopening in a failure case.

The only difference is Express is throwing some toast, so doing nothing in catch is fine here
const basketRecovered = await attemptFailOrder(createdOrderNo)
if (basketRecovered) {
showErrorMessage(ERROR_MESSAGE_KEYS.FAIL_ORDER)
} else {
showErrorMessage(ERROR_MESSAGE_KEYS.ORDER_RECOVERY_FAILED)
if (usage !== EXPRESS_BUY_NOW) {
navigate('/cart')
}
}

…/fail-order-on-redirect W-21372336: Fail Order for redirect based payments

rasbhat requested review from amittapalli, jeffraab-sfdc and sf-mkosak March 3, 2026 15:38

rasbhat requested a review from a team as a code owner March 3, 2026 15:38

sf-mkosak reviewed Mar 3, 2026

View reviewed changes

packages/template-retail-react-app/app/pages/checkout/payment-processing.jsx Show resolved Hide resolved

jeffraab-sfdc reviewed Mar 3, 2026

View reviewed changes

sf-mkosak reviewed Mar 3, 2026

View reviewed changes

packages/template-retail-react-app/app/pages/checkout/payment-processing.jsx Outdated Show resolved Hide resolved

sf-mkosak reviewed Mar 3, 2026

View reviewed changes

rasbhat added 3 commits March 3, 2026 12:30

W-21372336: Fail Order for redirect based payments

80ca151

W-21372336: Addressing comments

4349bc7

W-21372336: Addressing comments

5f0e22f

rasbhat force-pushed the rvishwanathbhat/fail-order-on-redirect branch from 323c664 to 5f0e22f Compare March 3, 2026 20:31

jeffraab-sfdc reviewed Mar 3, 2026

View reviewed changes

jeffraab-sfdc approved these changes Mar 3, 2026

View reviewed changes

sf-mkosak approved these changes Mar 3, 2026

View reviewed changes

amittapalli approved these changes Mar 3, 2026

View reviewed changes

rasbhat merged commit 10e8424 into t/team404/sfp-on-pwa Mar 3, 2026
14 of 16 checks passed

rasbhat deleted the rvishwanathbhat/fail-order-on-redirect branch March 3, 2026 22:33

rasbhat added a commit that referenced this pull request Mar 5, 2026

Merge pull request #3707 from SalesforceCommerceCloud/rvishwanathbhat…

e9a1ed1

…/fail-order-on-redirect W-21372336: Fail Order for redirect based payments

rasbhat added a commit that referenced this pull request Mar 5, 2026

Merge pull request #3707 from SalesforceCommerceCloud/rvishwanathbhat…

6b98416

…/fail-order-on-redirect W-21372336: Fail Order for redirect based payments

rasbhat added a commit that referenced this pull request Mar 5, 2026

Merge pull request #3707 from SalesforceCommerceCloud/rvishwanathbhat…

86e4310

…/fail-order-on-redirect W-21372336: Fail Order for redirect based payments

Conversation

rasbhat commented Mar 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Types of Changes

Changes

How to Test-Drive This PR

Checklists

General

Accessibility Compliance

Localization

Uh oh!

cc-prodsec commented Mar 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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

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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rasbhat Mar 3, 2026 • 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!

sf-mkosak Mar 3, 2026 • 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!

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!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

rasbhat commented Mar 3, 2026 •

edited

Loading

cc-prodsec commented Mar 3, 2026 •

edited

Loading

rasbhat Mar 3, 2026 •

edited

Loading

sf-mkosak Mar 3, 2026 •

edited

Loading