Enable native payments

.env.production

@@ -20,4 +20,7 @@ SENTRY_AUTH_TOKEN=
 SOURCE_VERSION=
 RECURRENCY=true
 
-TRACKING_KEY=
+TRACKING_KEY=
+
+ENABLE_APPLE_PAY=
+ENABLE_GOOGLE_PAY=

next.config.js

@@ -95,7 +95,7 @@ const nextConfig = {
           stripPrefix: ["webpack://_N_E/"],
           urlPrefix: `~${basePath}/_next`,
           release: COMMIT_SHA,
-        })
+        }),
       );
     }
     return config;
@@ -115,6 +115,8 @@ const nextConfig = {
     ESRI_CLIENT_SECRET: process.env.ESRI_CLIENT_SECRET,
     RECURRENCY: process.env.RECURRENCY,
     TRACKING_KEY: process.env.TRACKING_KEY,
+    ENABLE_GOOGLE_PAY: process.env.ENABLE_GOOGLE_PAY,
+    ENABLE_APPLE_PAY: process.env.ENABLE_APPLE_PAY,
   },
   trailingSlash: false,
   reactStrictMode: true,

src/Donations/Components/DonationsForm.tsx

@@ -108,7 +108,7 @@ function DonationsForm(): ReactElement {
   //Only used for native pay. Is this still applicable, or should this be removed?
   const onPaymentFunction = async (
     paymentMethod: PaymentMethod,
-    paymentRequest: PaymentRequest,
+    paymentRequest: PaymentRequest
   ) => {
     // eslint-disable-next-line no-underscore-dangle
     setPaymentType(paymentRequest._activeBackingLibraryName); //TODOO - is _activeBackingLibraryName a private variable?
@@ -223,7 +223,7 @@ function DonationsForm(): ReactElement {
           amount: getFormatedCurrency(
             i18n.language,
             currency,
-            paymentSetup.unitCost * quantity,
+            paymentSetup.unitCost * quantity
           ),
         });
         break;
@@ -233,7 +233,7 @@ function DonationsForm(): ReactElement {
           amount: getFormatedCurrency(
             i18n.language,
             currency,
-            paymentSetup.unitCost * quantity,
+            paymentSetup.unitCost * quantity
           ),
         });
         break;
@@ -389,13 +389,11 @@ function DonationsForm(): ReactElement {
                   paymentSetup?.gateways?.stripe?.account &&
                   currency ? (
                     <NativePay
-                      isApplePayEnabled={false}
-                      isGooglePayEnabled={false}
                       country={country}
                       currency={currency}
                       amount={formatAmountForStripe(
                         paymentSetup?.unitCost * quantity,
-                        currency.toLowerCase(),
+                        currency.toLowerCase()
                       )}
                       onPaymentFunction={onPaymentFunction}
                       paymentSetup={paymentSetup}
@@ -405,7 +403,7 @@ function DonationsForm(): ReactElement {
                             query: { ...router.query, step: CONTACT },
                           },
                           undefined,
-                          { shallow: true },
+                          { shallow: true }
                         );
                         setRetainQuantityValue(true);
                       }}

src/Donations/PaymentMethods/PaymentMethodTabs.tsx

@@ -218,8 +218,6 @@ export default function PaymentMethodTabs({
         {/*9 May 2023 - Apple Pay / Google Pay is disabled currently as it is not working correctly*/}
         {showNativePay && (
           <NativePay
-            isApplePayEnabled={false}
-            isGooglePayEnabled={false}
             country={country}
             currency={currency}
             amount={formatAmountForStripe(

src/Donations/PaymentMethods/PaymentRequestCustomButton.tsx

@@ -22,37 +22,39 @@
   amount: number;
   onPaymentFunction: (
     paymentMethod: PaymentMethod,
-    paymentRequest: PaymentRequest
+    paymentRequest: PaymentRequest,
   ) => Promise<void>;
   continueNext: () => void;
   isPaymentPage: boolean;
   paymentLabel: string;
   frequency: string | null;
   paymentSetup: PaymentOptions;
-  isApplePayEnabled: boolean;
-  isGooglePayEnabled: boolean;
 }
 
 export const PaymentRequestCustomButton = ({
   country,
   currency,
   amount,
   onPaymentFunction,
   continueNext,
   isPaymentPage,
   paymentLabel,
   frequency,
   paymentSetup,
-  isApplePayEnabled,
-  isGooglePayEnabled,
 }: PaymentButtonProps): ReactElement | null => {
+  const isApplePayEnabled = process.env.ENABLE_APPLE_PAY === "true" || false;
+  const isGooglePayEnabled = process.env.ENABLE_GOOGLE_PAY === "true" || true;
   const { t, ready } = useTranslation(["common"]);
   const { paymentRequest, setPaymentRequest } = useContext(QueryParamContext);
 
   const stripe = useStripe();
   const [canMakePayment, setCanMakePayment] = useState(false);
   const [paymentLoading, setPaymentLoading] = useState(false);
 
+	useEffect(()=> {
+		setPaymentRequest(null);
+	},[])
+
   useEffect(() => {
     if (
       stripe &&
@@ -69,6 +71,7 @@
         requestPayerName: true,
         requestPayerEmail: true,
       });
+      console.log("Stripe PR: ", pr);
       // Check the availability of the Payment Request API.
       pr.canMakePayment().then((result) => {
         if (result) {
@@ -87,6 +90,7 @@
   }, [country, currency, amount]);
 
   useEffect(() => {
+    console.log("Context PR: ", paymentRequest);
     let subscribed = true;
     if (paymentRequest) {
       paymentRequest
@@ -108,25 +112,21 @@
   useEffect(() => {
     if (paymentRequest && !paymentLoading) {
       setPaymentLoading(true);
+      paymentRequest.off("paymentmethod");
       paymentRequest.on(
         "paymentmethod",
         ({ complete, paymentMethod }: PaymentRequestPaymentMethodEvent) => {
           onPaymentFunction(paymentMethod, paymentRequest);
           complete("success");
           setPaymentLoading(false);
-        }
+        },
       );
     }
     return () => {
       if (paymentRequest && !paymentLoading) {
-        paymentRequest.off(
-          "paymentmethod",
-          ({ complete, paymentMethod }: PaymentRequestPaymentMethodEvent) => {
-            onPaymentFunction(paymentMethod, paymentRequest);
-            complete("success");
-            setPaymentLoading(false);
-          }
-        );
+        paymentRequest.off("paymentmethod", () => {
+          setPaymentLoading(false);
+        });
       }
     };
   }, [paymentRequest, onPaymentFunction]);
@@ -215,14 +215,12 @@
 /* 9 May 2023 - Apple Pay / Google Pay is disabled currently as it is not working correctly*/
 
 interface NativePayProps {
-  isApplePayEnabled: boolean;
-  isGooglePayEnabled: boolean;
   country: string;
   currency: string;
   amount: number;
   onPaymentFunction: (
     paymentMethod: PaymentMethod,
-    paymentRequest: PaymentRequest
+    paymentRequest: PaymentRequest,
   ) => Promise<void>;
   paymentSetup: PaymentOptions;
   continueNext: () => void;
@@ -231,8 +229,6 @@
   frequency: string | null;
 }
 export const NativePay = ({
-  isApplePayEnabled = false,
-  isGooglePayEnabled = false,
   country,
   currency,
   amount,
@@ -246,7 +242,7 @@
   const { i18n } = useTranslation();
   const [stripePromise, setStripePromise] =
     useState<null | Promise<Stripe | null>>(() =>
-      getStripe(paymentSetup, i18n.language)
+      getStripe(paymentSetup, i18n.language),
     );
 
   useEffect(() => {
@@ -279,8 +275,6 @@
         paymentLabel={paymentLabel}
         frequency={frequency}
         paymentSetup={paymentSetup}
-        isApplePayEnabled={isApplePayEnabled}
-        isGooglePayEnabled={isGooglePayEnabled}
       />
     </Elements>
   );