Skip to content

Fix: Fix issue with React example re-renders #77

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

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Fix: Fix issue with React example re-renders #77

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
f9c36ee
fix dom pollution and clean up a few strays
EvanReinstein Sep 11, 2025
1f97689
chore: run prettier
EvanReinstein Sep 17, 2025
896500f
re add paymentSessionOptions to dependency arrays
EvanReinstein Sep 17, 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
12 changes: 11 additions & 1 deletion client/prebuiltPages/react/oneTimePayment/src/components/PayPalButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,21 @@ const PayPalButton: React.FC<PaymentSessionOptions> = (
const paypalSession = useRef<SessionOutput>(null);

useEffect(() => {
if (sdkInstance) {
if (sdkInstance && !paypalSession.current) {
paypalSession.current = sdkInstance.createPayPalOneTimePaymentSession(
paymentSessionOptions,
);
}

return () => {
if (
paypalSession.current &&
typeof paypalSession.current.destroy === "function"
Copy link
Contributor

Choose a reason for hiding this comment

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

Do we have to do this check? I would assume destroy always exists if the paypalSession exists?

) {
paypalSession.current.destroy();
paypalSession.current = null;
}
};
}, [sdkInstance, paymentSessionOptions]);
Copy link
Contributor

Choose a reason for hiding this comment

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

We would like to re-initialize the session if paymentSessionOptions changes right?


const payPalOnClickHandler = async () => {
Expand Down
12 changes: 11 additions & 1 deletion client/prebuiltPages/react/oneTimePayment/src/components/VenmoButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,21 @@ const VenmoButton: React.FC<PaymentSessionOptions> = (
const venmoSession = useRef<SessionOutput>(null);

useEffect(() => {
if (sdkInstance) {
if (sdkInstance && !venmoSession.current) {
venmoSession.current = sdkInstance.createVenmoOneTimePaymentSession(
paymentSessionOptions,
);
}

return () => {
if (
venmoSession.current &&
typeof venmoSession.current.destroy === "function"
Copy link
Contributor

Choose a reason for hiding this comment

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

Same question here

) {
venmoSession.current.destroy();
venmoSession.current = null;
}
};
}, [sdkInstance, paymentSessionOptions]);

const venmoOnClickHandler = async () => {
Expand Down
2 changes: 1 addition & 1 deletion client/prebuiltPages/react/oneTimePayment/src/context/sdkContext.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ export const PayPalSDKProvider: React.FC<PayPalSDKProviderProps> = ({
};

loadPayPalSDK();
});
}, [clientToken, components, pageType, sdkInstance, showBoundary]);

return (
<PayPalSDKContext.Provider
Expand Down
41 changes: 22 additions & 19 deletions client/prebuiltPages/react/oneTimePayment/src/sections/SoccerBall.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useContext, useState, useCallback } from "react";
import React, { useContext, useState, useCallback, useMemo } from "react";
import { PayPalSDKContext } from "../context/sdkContext";
import PayPalButton from "../components/PayPalButton";
import VenmoButton from "../components/VenmoButton";
Expand Down Expand Up @@ -33,24 +33,27 @@ const SoccerBall: React.FC = () => {
const [modalState, setModalState] = useState<ModalType>(null);

// Payment handlers
const handlePaymentCallbacks: PaymentSessionOptions = {
onApprove: async (data: OnApproveData) => {
console.log("Payment approved:", data);
const captureResult = await captureOrder({ orderId: data.orderId });
console.log("Payment capture result:", captureResult);
setModalState("success");
},

onCancel: () => {
console.log("Payment cancelled");
setModalState("cancel");
},

onError: (error: Error) => {
console.error("Payment error:", error);
setModalState("error");
},
};
const handlePaymentCallbacks: PaymentSessionOptions = useMemo(
() => ({
onApprove: async (data: OnApproveData) => {
console.log("Payment approved:", data);
const captureResult = await captureOrder({ orderId: data.orderId });
console.log("Payment capture result:", captureResult);
setModalState("success");
},

onCancel: () => {
console.log("Payment cancelled");
setModalState("cancel");
},

onError: (error: Error) => {
console.error("Payment error:", error);
setModalState("error");
},
}),
[],
);

const getModalContent = useCallback(
(state: ModalType): ModalContent | null => {
Expand Down
18 changes: 8 additions & 10 deletions client/prebuiltPages/react/oneTimePayment/src/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,13 @@
export const getBrowserSafeClientToken = async () => {
{
const response = await fetch("/paypal-api/auth/browser-safe-client-token", {
method: "GET",
headers: {
"Content-Type": "application/json",
},
});
const { accessToken } = await response.json();
const response = await fetch("/paypal-api/auth/browser-safe-client-token", {
method: "GET",
headers: {
"Content-Type": "application/json",
},
});
const { accessToken } = await response.json();

return accessToken;
}
return accessToken;
};

export const createOrder = async () => {
Expand Down