Skip to content

Appswitch web fallback return flow #2477

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

Merged
merged 3 commits into from
Mar 7, 2025
Merged

Appswitch web fallback return flow #2477

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
18c5a9b
fix handler
ravishekhar Mar 6, 2025
5ff3bd9
add support for webfallback resume params
ravishekhar Mar 6, 2025
d592bd0
fix type
ravishekhar Mar 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion .github/workflows/main.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,4 +74,3 @@ jobs:
with:
directory: ./coverage/vitest
flags: vitest

48 changes: 46 additions & 2 deletions src/lib/appSwitchResume.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,52 @@ export type AppSwitchResumeParams = {|
checkoutState: "onApprove" | "onCancel" | "onError",
|};

// The Web fallback flow uses different set of query params then appswitch flow.
function getAppSwitchParamsWebFallback(): AppSwitchResumeParams | null {
try {
const params = Object.fromEntries(
// eslint-disable-next-line compat/compat
new URLSearchParams(window.location.search)
);
const {
buttonSessionID,
fundingSource,
token: orderID,
PayerID: payerID,
vaultSetupToken: vaultToken,
approval_token_id: approvalTokenID,
approval_session_id: approvalSessionID,
} = params;

const vaultSetupToken = vaultToken || approvalTokenID || approvalSessionID;

if (vaultSetupToken || orderID) {
const resumeParams: AppSwitchResumeParams = {
checkoutState: payerID ? "onApprove" : "onCancel",
payerID,
orderID,
vaultSetupToken,
buttonSessionID,
// URLSearchParams get returns as string,
// but below code excepts a value from list of string.
// $FlowIgnore[incompatible-type]
fundingSource,
};
return resumeParams;
}
return null;
} catch (err) {
// no-op
return null;
}
}

export function getAppSwitchResumeParams(): AppSwitchResumeParams | null {
const hashString = window.location.hash && window.location.hash.slice(1);
const hashString =
window.location.hash && String(window.location.hash).slice(1);
if (!hashString) {
return getAppSwitchParamsWebFallback();
}
const [hash, queryString] = hashString.split("?");

const isPostApprovalAction = [
Expand All @@ -26,7 +70,7 @@ export function getAppSwitchResumeParams(): AppSwitchResumeParams | null {
APP_SWITCH_RETURN_HASH.ONERROR,
].includes(hash);
if (!isPostApprovalAction) {
return null;
return getAppSwitchParamsWebFallback();
}

const {
Expand Down
38 changes: 37 additions & 1 deletion src/lib/appSwithResume.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,6 @@ describe("app switch resume flow", () => {
test("should test fetching resume params with invalid callback passed", () => {
vi.spyOn(window, "location", "get").mockReturnValue({
hash: "#Unknown",
search: `buttonSessionID=${buttonSessionID}&token=${orderID}&fundingSource=${fundingSource}`,
});

const params = getAppSwitchResumeParams();
Expand Down Expand Up @@ -87,4 +86,41 @@ describe("app switch resume flow", () => {
});
expect(isAppSwitchResumeFlow()).toEqual(true);
});

test("should test onApprove resume params when parameters are passed from web fallback", () => {
vi.spyOn(window, "location", "get").mockReturnValue({
search: `?buttonSessionID=${buttonSessionID}&token=${orderID}&fundingSource=${fundingSource}&vaultSetupToken=VA-3&PayerID=PP123456`,
});

const params = getAppSwitchResumeParams();

expect.assertions(2);
expect(params).toEqual({
buttonSessionID,
checkoutState: "onApprove",
fundingSource,
orderID,
payerID: "PP123456",
vaultSetupToken: "VA-3",
});
expect(isAppSwitchResumeFlow()).toEqual(true);
});

test("should test onCancel resume params when parameters are passed from web fallback", () => {
vi.spyOn(window, "location", "get").mockReturnValue({
Copy link
Contributor

Choose a reason for hiding this comment

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

Hi Ravi, for learning, can you explain more about how spyOn() being used? instead of just mocking the values, why do you need to spyOn and then mock it?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I wanted to avoid overriding the global objects with mock functions, as that requires ensuring we reset in afterEach hooks.

The Spies provided by vitest does this for free by only overriding the return values instead of overriding the method itself.

search: `?buttonSessionID=${buttonSessionID}&token=${orderID}&fundingSource=${fundingSource}&vaultSetupToken=VA-3`,
});

const params = getAppSwitchResumeParams();

expect.assertions(2);
expect(params).toEqual({
buttonSessionID,
checkoutState: "onCancel",
fundingSource,
orderID,
vaultSetupToken: "VA-3",
});
expect(isAppSwitchResumeFlow()).toEqual(true);
});
});
4 changes: 2 additions & 2 deletions src/zoid/buttons/component.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -371,7 +371,7 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
() => {
window.addEventListener(
"visibilitychange",
props.hashChangeHandler
props.visibilityChangeHandler
);
},
},
Expand All @@ -384,7 +384,7 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
() => {
window.removeEventListener(
"visibilitychange",
props.hashChangeHandler
props.visibilityChangeHandler
);
},
},
Expand Down