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

@@ -115,6 +115,9 @@ 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,
+    DISABLE_VERCEL_REDIRECT: process.env.DISABLE_VERCEL_REDIRECT,
   },
   trailingSlash: false,
   reactStrictMode: true,

pages/_app.tsx

@@ -87,7 +87,10 @@ function MyApp({
     process.env.VERCEL_URL &&
     typeof window !== "undefined"
   ) {
-    if (process.env.VERCEL_URL !== window.location.hostname) {
+    if (
+      process.env.VERCEL_URL !== window.location.hostname &&
+      process.env.DISABLE_VERCEL_REDIRECT !== "true"
+    ) {
       router.replace(`https://${process.env.VERCEL_URL}`);
     }
   }

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

@@ -29,30 +29,32 @@
   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" || false;
   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 &&
@@ -108,6 +110,7 @@
   useEffect(() => {
     if (paymentRequest && !paymentLoading) {
       setPaymentLoading(true);
+      paymentRequest.off("paymentmethod");
       paymentRequest.on(
         "paymentmethod",
         ({ complete, paymentMethod }: PaymentRequestPaymentMethodEvent) => {
@@ -119,14 +122,9 @@
     }
     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,8 +213,6 @@
 /* 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;
@@ -231,8 +227,6 @@
   frequency: string | null;
 }
 export const NativePay = ({
-  isApplePayEnabled = false,
-  isGooglePayEnabled = false,
   country,
   currency,
   amount,
@@ -279,8 +273,6 @@
         paymentLabel={paymentLabel}
         frequency={frequency}
         paymentSetup={paymentSetup}
-        isApplePayEnabled={isApplePayEnabled}
-        isGooglePayEnabled={isGooglePayEnabled}
       />
     </Elements>
   );