Display custom Adyen gateway errors

saleor · Aug 11, 2020 · f71e44f · f71e44f
1 parent c9d99c8
commit f71e44f
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 47 deletions.
diff --git a/src/@next/components/organisms/AdyenPaymentGateway/AdyenPaymentGateway.tsx b/src/@next/components/organisms/AdyenPaymentGateway/AdyenPaymentGateway.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from "react";
 
 import { IFormError, IPaymentGatewayConfig } from "@types";
 import { CompleteCheckout_checkoutComplete_order } from "@saleor/sdk/lib/mutations/gqlTypes/CompleteCheckout";
+import { ErrorMessage } from "@components/atoms";
 
 interface IResourceConfig {
   src: string;
@@ -43,6 +44,10 @@ export interface IProps {
   submitPaymentSuccess: (
     order?: CompleteCheckout_checkoutComplete_order
   ) => void;
+  /**
+   * Errors returned by the payment gateway.
+   */
+  errors?: IFormError[];
   /**
    * Method called when gateway error occured.
    */
@@ -57,6 +62,7 @@ const AdyenPaymentGateway: React.FC<IProps> = ({
   processPayment,
   submitPayment,
   submitPaymentSuccess,
+  errors,
   onError,
 }: IProps) => {
   const adyenClientKey = config?.find(({ field }) => field === "client_key")
@@ -103,55 +109,73 @@ const AdyenPaymentGateway: React.FC<IProps> = ({
         showPayButton: false,
         onSubmit: (state: any, dropin: any) => {
           console.log("submit adyen", state, dropin);
-          submitPayment(state?.data).then(value => {
-            if (value.error) {
-              onError([value.error]);
-            } else if (!value?.confirmationNeeded) {
-              console.log(
-                "dropin onSubmitPayment no confirmation",
-                value,
-                state,
-                dropin
-              );
-              submitPaymentSuccess(value?.order);
-            } else {
-              console.log(
-                "dropin onSubmitPayment confirmation needed",
-                value,
-                state,
-                dropin
-              );
-              const paymentAction =
-                value?.confirmationData && JSON.parse(value?.confirmationData);
-              dropin.handleAction(paymentAction);
-            }
-          });
+          if (!state?.isValid) {
+            onError([new Error("Invalid payment submission")]);
+          } else {
+            submitPayment(state?.data)
+              .then(value => {
+                if (value.error) {
+                  onError([value.error]);
+                } else if (!value?.confirmationNeeded) {
+                  console.log(
+                    "dropin onSubmitPayment no confirmation",
+                    value,
+                    state,
+                    dropin
+                  );
+                  submitPaymentSuccess(value?.order);
+                } else {
+                  console.log(
+                    "dropin onSubmitPayment confirmation needed",
+                    value,
+                    state,
+                    dropin
+                  );
+                  const paymentAction =
+                    value?.confirmationData &&
+                    JSON.parse(value?.confirmationData);
+                  dropin.handleAction(paymentAction);
+                }
+              })
+              .catch(error => {
+                onError([new Error(error)]);
+              });
+          }
         },
         onAdditionalDetails: (state: any, dropin: any) => {
           console.log("additional details adyen", state, dropin);
-          submitPayment(state?.data).then(value => {
-            if (value.error) {
-              onError([value.error]);
-            } else if (!value?.confirmationNeeded) {
-              console.log(
-                "dropin additionalDetails onSubmitPayment no confirmation",
-                value,
-                state,
-                dropin
-              );
-              submitPaymentSuccess(value?.order);
-            } else {
-              console.log(
-                "dropin additionalDetails onSubmitPayment confirmation needed",
-                value,
-                state,
-                dropin
-              );
-              const paymentAction =
-                value?.confirmationData && JSON.parse(value?.confirmationData);
-              dropin.handleAction(paymentAction);
-            }
-          });
+          if (!state?.isValid) {
+            onError([new Error("Invalid payment submission")]);
+          } else {
+            submitPayment(state?.data)
+              .then(value => {
+                if (value.error) {
+                  onError([value.error]);
+                } else if (!value?.confirmationNeeded) {
+                  console.log(
+                    "dropin additionalDetails onSubmitPayment no confirmation",
+                    value,
+                    state,
+                    dropin
+                  );
+                  submitPaymentSuccess(value?.order);
+                } else {
+                  console.log(
+                    "dropin additionalDetails onSubmitPayment confirmation needed",
+                    value,
+                    state,
+                    dropin
+                  );
+                  const paymentAction =
+                    value?.confirmationData &&
+                    JSON.parse(value?.confirmationData);
+                  dropin.handleAction(paymentAction);
+                }
+              })
+              .catch(error => {
+                onError([new Error(error)]);
+              });
+          }
         },
         onError: (error: any) => {
           onError([{ message: error.error }]);
@@ -186,6 +210,7 @@ const AdyenPaymentGateway: React.FC<IProps> = ({
   return (
     <form ref={formRef}>
       <div ref={gatewayRef} />
+      <ErrorMessage errors={errors} />
     </form>
   );
 };

diff --git a/src/@next/components/organisms/PaymentGatewaysList/PaymentGatewaysList.tsx b/src/@next/components/organisms/PaymentGatewaysList/PaymentGatewaysList.tsx
@@ -160,6 +160,7 @@ const PaymentGatewaysList: React.FC<IProps> = ({
                     processPayment={() => processPayment(id)}
                     submitPayment={submitPayment}
                     submitPaymentSuccess={submitPaymentSuccess}
+                    errors={errors}
                     onError={onError}
                   />
                 )}

diff --git a/src/@next/pages/CheckoutPage/CheckoutPage.tsx b/src/@next/pages/CheckoutPage/CheckoutPage.tsx
@@ -328,14 +328,16 @@ const CheckoutPage: React.FC<IProps> = ({}: IProps) => {
   ) => {
     console.log("handleSubmitPaymentSuccess");
     setSubmitInProgress(false);
+    setPaymentGatewayErrors([]);
     handleStepSubmitSuccess(CheckoutStep.Review, {
       id: order?.id,
       orderNumber: order?.number,
       token: order?.token,
     });
   };
-  const handlePaymentGatewayError = () => {
+  const handlePaymentGatewayError = (errors: IFormError[]) => {
     setSubmitInProgress(false);
+    setPaymentGatewayErrors(errors);
     const paymentStepLink = steps.find(
       step => step.step === CheckoutStep.Payment
     )?.link;