Merge pull request #447 from Plant-for-the-Planet-org/feature/enable-…

…native-payments Enable native payments
Plant-for-the-Planet-org · Jan 15, 2024 · 67b1d1b · 67b1d1b
2 parents 769295d + 6887189
commit 67b1d1b
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 24 deletions.
diff --git a/.env.production b/.env.production
@@ -20,4 +20,7 @@ SENTRY_AUTH_TOKEN=
 SOURCE_VERSION=
 RECURRENCY=true
 
-TRACKING_KEY=
+TRACKING_KEY=
+
+ENABLE_APPLE_PAY=
+ENABLE_GOOGLE_PAY=
diff --git a/next.config.js b/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,

diff --git a/pages/_app.tsx b/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}`);
     }
   }

diff --git a/src/Donations/Components/DonationsForm.tsx b/src/Donations/Components/DonationsForm.tsx
@@ -400,8 +400,6 @@ function DonationsForm(): ReactElement {
                   paymentSetup?.gateways?.stripe?.account &&
                   currency ? (
                     <NativePay
-                      isApplePayEnabled={false}
-                      isGooglePayEnabled={false}
                       country={country}
                       currency={currency}
                       amount={formatAmountForStripe(

diff --git a/src/Donations/PaymentMethods/PaymentMethodTabs.tsx b/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(

diff --git a/src/Donations/PaymentMethods/PaymentRequestCustomButton.tsx b/src/Donations/PaymentMethods/PaymentRequestCustomButton.tsx
@@ -29,8 +29,6 @@ interface PaymentButtonProps {
   paymentLabel: string;
   frequency: string | null;
   paymentSetup: PaymentOptions;
-  isApplePayEnabled: boolean;
-  isGooglePayEnabled: boolean;
 }
 
 export const PaymentRequestCustomButton = ({
@@ -43,16 +41,20 @@ export const PaymentRequestCustomButton = ({
   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 @@ export const PaymentRequestCustomButton = ({
   useEffect(() => {
     if (paymentRequest && !paymentLoading) {
       setPaymentLoading(true);
+      paymentRequest.off("paymentmethod");
       paymentRequest.on(
         "paymentmethod",
         ({ complete, paymentMethod }: PaymentRequestPaymentMethodEvent) => {
@@ -119,14 +122,9 @@ export const PaymentRequestCustomButton = ({
     }
     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 @@ export const PaymentRequestCustomButton = ({
 /* 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 @@ interface NativePayProps {
   frequency: string | null;
 }
 export const NativePay = ({
-  isApplePayEnabled = false,
-  isGooglePayEnabled = false,
   country,
   currency,
   amount,
@@ -279,8 +273,6 @@ export const NativePay = ({
         paymentLabel={paymentLabel}
         frequency={frequency}
         paymentSetup={paymentSetup}
-        isApplePayEnabled={isApplePayEnabled}
-        isGooglePayEnabled={isGooglePayEnabled}
       />
     </Elements>
   );