fix: fixes issues with native payments to pcash

- ensures amount is always correct
- ensures event handler is always attached
- cleans up event handler on unmount

src/Donations/Components/DonationsForm.tsx

@@ -68,6 +68,7 @@ function DonationsForm(): ReactElement {
     utmMedium,
     utmSource,
     isPackageWanted,
+    setPaymentRequest,
   } = React.useContext(QueryParamContext);
   const { t, i18n } = useTranslation(["common", "country", "donate"]);
 
@@ -78,6 +79,16 @@ function DonationsForm(): ReactElement {
     React.useState(false);
   const router = useRouter();
 
+  React.useEffect(() => {
+    setPaymentRequest(null);
+  }, []);
+
+  React.useEffect(() => {
+    if (isPlanetCashActive) {
+      setPaymentRequest(null);
+    }
+  }, [isPlanetCashActive]);
+
   React.useEffect(() => {
     setMinAmt(getMinimumAmountForCurrency(currency));
   }, [currency]);

src/Donations/Components/PaymentsForm.tsx

@@ -82,6 +82,7 @@ function PaymentsForm(): ReactElement {
     utmMedium,
     utmSource,
     isPackageWanted,
+    setPaymentRequest,
   } = React.useContext(QueryParamContext);
 
   const [stripePromise, setStripePromise] =
@@ -100,6 +101,7 @@ function PaymentsForm(): ReactElement {
 
   React.useEffect(() => {
     setPaymentType("CARD");
+    setPaymentRequest(null);
   }, []);
 
   const sofortCountries = ["AT", "BE", "DE", "IT", "NL", "ES"];
@@ -111,7 +113,7 @@ function PaymentsForm(): ReactElement {
       | string
       | PaymentMethod
       | PaypalApproveData
-      | PaypalErrorData,
+      | PaypalErrorData
   ) => {
     if (!paymentSetup || !donationID) {
       console.log("Missing payment options"); //TODOO - better error handling
@@ -144,7 +146,7 @@ function PaymentsForm(): ReactElement {
   // Seems to work only for native pay. Should this be removed?
   const onPaymentFunction = async (
     paymentMethod: PaymentMethod,
-    paymentRequest: PaymentRequest,
+    paymentRequest: PaymentRequest
   ) => {
     setPaymentType(paymentRequest._activeBackingLibraryName); //TODOO --_activeBackingLibraryName is a private variable?
     const gateway = "stripe";
@@ -289,7 +291,7 @@ function PaymentsForm(): ReactElement {
                       query: { ...router.query, step: CONTACT },
                     },
                     undefined,
-                    { shallow: true },
+                    { shallow: true }
                   );
                 }}
                 className="d-flex"
@@ -420,7 +422,7 @@ function PaymentsForm(): ReactElement {
                     totalCost={getFormatedCurrency(
                       i18n.language,
                       currency,
-                      paymentSetup?.unitCost * quantity,
+                      paymentSetup?.unitCost * quantity
                     )}
                     onPaymentFunction={(providerObject: PaymentMethod) =>
                       onSubmitPayment("stripe", "card", providerObject)

src/Donations/PaymentMethods/PaymentRequestCustomButton.tsx

@@ -54,10 +54,6 @@ export const PaymentRequestCustomButton = ({
   // Tracks if native pay buttons were shown at least once to prevent layout jerks
   const [wasNativePayInit, setWasNativePayInit] = useState(false);
 
-  useEffect(() => {
-    setPaymentRequest(null);
-  }, []);
-
   useEffect(() => {
     if (
       stripe &&
@@ -85,11 +81,9 @@ export const PaymentRequestCustomButton = ({
   }, [stripe, paymentRequest, country, currency, amount]);
 
   useEffect(() => {
-    if (stripe && paymentRequest) {
-      setPaymentRequest(null);
-      setCanMakePayment(false);
-      setPaymentLoading(false);
-    }
+    setPaymentRequest(null);
+    setCanMakePayment(false);
+    setPaymentLoading(false);
   }, [country, currency, amount]);
 
   useEffect(() => {
@@ -125,7 +119,10 @@ export const PaymentRequestCustomButton = ({
       );
     }
     return () => {
-      if (paymentRequest && !paymentLoading) {
+      if (
+        paymentRequest &&
+        paymentRequest.hasRegisteredListener("paymentmethod")
+      ) {
         paymentRequest.off("paymentmethod", () => {
           setPaymentLoading(false);
         });