Use new Stripe payment gateway

CHANGELOG.md

@@ -19,6 +19,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Update register mutation with channel slug - #1045 by @orzechdev
 - Update queries with new channel API - #1072 by @orzechdev
 - Change order number format - #1073 by @kamilpastuszka
+- Use new Stripe payment gateway - #1057 by @orzechdev
 
 ## 2.11.0
 

src/@next/components/organisms/AdyenPaymentGateway/AdyenPaymentGateway.tsx

@@ -1,9 +1,16 @@
 import { CompleteCheckout_checkoutComplete_order } from "@saleor/sdk/lib/mutations/gqlTypes/CompleteCheckout";
 import React, { useEffect, useRef, useState } from "react";
-import { defineMessages, IntlShape, useIntl } from "react-intl";
+import { useIntl } from "react-intl";
 
 import { ErrorMessage } from "@components/atoms";
-import { IFormError, IPaymentGatewayConfig } from "@types";
+import { paymentErrorMessages } from "@temp/intl";
+import {
+  IFormError,
+  IPaymentGatewayConfig,
+  IPaymentSubmitResult,
+} from "@types";
+
+import { adyenErrorMessages } from "./intl";
 
 export const adyenNotNegativeConfirmationStatusCodes = [
   "Authorised",
@@ -14,70 +21,6 @@ export const adyenNotNegativeConfirmationStatusCodes = [
   "PresentToShopper",
 ];
 
-const messageDescription = "Adyen payment gateway error";
-
-export const adyenErrorMessages = defineMessages({
-  unknownPayment: {
-    defaultMessage: "Unknown payment submission error occured.",
-    description: messageDescription,
-  },
-  invalidPaymentSubmission: {
-    defaultMessage: "Invalid payment submission.",
-    description: messageDescription,
-  },
-  cannotHandlePaymentConfirmation: {
-    defaultMessage:
-      "Payment gateway did not provide payment confirmation handler.",
-    description: messageDescription,
-  },
-  paymentMalformedConfirmationData: {
-    defaultMessage:
-      "Payment needs confirmation but data required for confirmation received from the server is malformed.",
-    description: messageDescription,
-  },
-  paymentNoConfirmationData: {
-    defaultMessage:
-      "Payment needs confirmation but data required for confirmation not received from the server.",
-    description: messageDescription,
-  },
-});
-
-export const adyenConfirmationErrorMessages = defineMessages({
-  error: {
-    defaultMessage: "Error processing payment occured.",
-    description: messageDescription,
-  },
-  refused: {
-    defaultMessage:
-      "The payment was refused. Try the payment again using a different payment method or card.",
-    description: messageDescription,
-  },
-  cancelled: {
-    defaultMessage: "Payment was cancelled.",
-    description: messageDescription,
-  },
-  general: {
-    defaultMessage: "Payment confirmation went wrong.",
-    description: messageDescription,
-  },
-});
-
-export function translateAdyenConfirmationError(
-  status: string,
-  intl: IntlShape
-): string {
-  switch (status) {
-    case "Error":
-      return intl.formatMessage(adyenConfirmationErrorMessages.error);
-    case "Refused":
-      return intl.formatMessage(adyenConfirmationErrorMessages.refused);
-    case "Cancelled":
-      return intl.formatMessage(adyenConfirmationErrorMessages.cancelled);
-    default:
-      return intl.formatMessage(adyenConfirmationErrorMessages.general);
-  }
-}
-
 interface IResourceConfig {
   src: string;
   integrity: string;
@@ -119,15 +62,12 @@ export interface IProps {
   /**
    * Method to call on gateway payment submission.
    */
-  submitPayment: (data: {
-    confirmationData: any;
-    confirmationNeeded: boolean;
-  }) => Promise<any>;
+  submitPayment: (data: object) => Promise<IPaymentSubmitResult>;
   /**
    * Method called after succesful gateway payment submission. This is the case when no confirmation is needed.
    */
   submitPaymentSuccess: (
-    order?: CompleteCheckout_checkoutComplete_order
+    order?: CompleteCheckout_checkoutComplete_order | null
   ) => void;
   /**
    * Errors returned by the payment gateway.
@@ -222,14 +162,14 @@ const AdyenPaymentGateway: React.FC<IProps> = ({
         onError([
           new Error(
             intl.formatMessage(
-              adyenErrorMessages.cannotHandlePaymentConfirmation
+              paymentErrorMessages.cannotHandlePaymentConfirmation
             )
           ),
         ]);
       } else if (!payment?.confirmationData) {
         onError([
           new Error(
-            intl.formatMessage(adyenErrorMessages.paymentNoConfirmationData)
+            intl.formatMessage(paymentErrorMessages.paymentNoConfirmationData)
           ),
         ]);
       } else {
@@ -240,10 +180,11 @@ const AdyenPaymentGateway: React.FC<IProps> = ({
           onError([
             new Error(
               intl.formatMessage(
-                adyenErrorMessages.paymentMalformedConfirmationData
+                paymentErrorMessages.paymentMalformedConfirmationData
               )
             ),
           ]);
+          return;
         }
         try {
           dropin.handleAction(paymentAction);

src/@next/components/organisms/AdyenPaymentGateway/index.ts

@@ -1 +1,2 @@
 export * from "./AdyenPaymentGateway";
+export * from "./intl";

src/@next/components/organisms/AdyenPaymentGateway/intl.ts

@@ -0,0 +1,50 @@
+import { defineMessages, IntlShape } from "react-intl";
+
+const description = "Adyen payment gateway error";
+
+export const adyenErrorMessages = defineMessages({
+  unknownPayment: {
+    defaultMessage: "Unknown payment submission error occured.",
+    description,
+  },
+  invalidPaymentSubmission: {
+    defaultMessage: "Invalid payment submission.",
+    description,
+  },
+});
+
+export const adyenConfirmationErrorMessages = defineMessages({
+  error: {
+    defaultMessage: "Error processing payment occured.",
+    description,
+  },
+  refused: {
+    defaultMessage:
+      "The payment was refused. Try the payment again using a different payment method or card.",
+    description,
+  },
+  cancelled: {
+    defaultMessage: "Payment was cancelled.",
+    description,
+  },
+  general: {
+    defaultMessage: "Payment could not be confirmed.",
+    description,
+  },
+});
+
+export function translateAdyenConfirmationError(
+  status: string,
+  intl: IntlShape
+): string {
+  switch (status) {
+    case "Error":
+      return intl.formatMessage(adyenConfirmationErrorMessages.error);
+    case "Refused":
+      return intl.formatMessage(adyenConfirmationErrorMessages.refused);
+    case "Cancelled":
+      return intl.formatMessage(adyenConfirmationErrorMessages.cancelled);
+    default:
+      return intl.formatMessage(adyenConfirmationErrorMessages.general);
+  }
+}

src/@next/components/organisms/AdyenPaymentGateway/stories.tsx

@@ -33,7 +33,7 @@ const PROPS = {
   ],
 };
 const processPayment = action("processPayment");
-const submitPayment = async () => action("submitPayment");
+const submitPayment = async () => Promise.resolve({});
 const submitPaymentSuccess = action("submitPaymentSuccess");
 const onError = action("onError");
 

src/@next/components/organisms/CheckoutPayment/fixtures.ts

@@ -1,3 +1,4 @@
+import { paymentGatewayNames } from "@temp/constants";
 import { IPaymentGateway } from "@types";
 
 export const paymentGateways: IPaymentGateway[] = [
@@ -8,7 +9,7 @@ export const paymentGateways: IPaymentGateway[] = [
         value: "false",
       },
     ],
-    id: "mirumee.payments.dummy",
+    id: paymentGatewayNames.dummy,
     name: "Dummy",
   },
   {
@@ -22,7 +23,7 @@ export const paymentGateways: IPaymentGateway[] = [
         value: "false",
       },
     ],
-    id: "mirumee.payments.stripe",
+    id: paymentGatewayNames.stripe,
     name: "Stripe",
   },
 ];

src/@next/components/organisms/PaymentGatewaysList/PaymentGatewaysList.tsx

@@ -125,6 +125,8 @@ const PaymentGatewaysList: React.FC<IProps> = ({
                     processPayment={(token, cardData) =>
                       processPayment(id, token, cardData)
                     }
+                    submitPayment={submitPayment}
+                    submitPaymentSuccess={submitPaymentSuccess}
                     errors={errors}
                     onError={onError}
                   />

src/@next/components/organisms/PaymentGatewaysList/fixtures.ts

@@ -1,3 +1,4 @@
+import { paymentGatewayNames } from "@temp/constants";
 import { IPaymentGateway } from "@types";
 
 export const paymentGateways: IPaymentGateway[] = [
@@ -8,7 +9,7 @@ export const paymentGateways: IPaymentGateway[] = [
         value: "false",
       },
     ],
-    id: "mirumee.payments.dummy",
+    id: paymentGatewayNames.dummy,
     name: "Dummy",
   },
   {
@@ -22,7 +23,7 @@ export const paymentGateways: IPaymentGateway[] = [
         value: "false",
       },
     ],
-    id: "mirumee.payments.stripe",
+    id: paymentGatewayNames.stripe,
     name: "Stripe",
   },
 ];

src/@next/components/organisms/PaymentGatewaysList/stories.tsx

@@ -6,7 +6,7 @@ import { PaymentGatewaysList } from ".";
 import { paymentGateways } from "./fixtures";
 
 const processPayment = action("processPayment");
-const submitPayment = async () => action("submitPayment");
+const submitPayment = async () => Promise.resolve({});
 const submitPaymentSuccess = action("submitPaymentSuccess");
 const selectPaymentGateway = action("selectPaymentGateway");
 const onError = action("onError");

src/@next/components/organisms/PaymentGatewaysList/types.ts

@@ -1,6 +1,11 @@
 import { CompleteCheckout_checkoutComplete_order } from "@saleor/sdk/lib/mutations/gqlTypes/CompleteCheckout";
 
-import { ICardData, IFormError, IPaymentGateway } from "@types";
+import {
+  ICardData,
+  IFormError,
+  IPaymentGateway,
+  IPaymentSubmitResult,
+} from "@types";
 
 export interface IProps {
   /**
@@ -39,12 +44,9 @@ export interface IProps {
     token?: string,
     cardData?: ICardData
   ) => void;
-  submitPayment: (data: {
-    confirmationData: any;
-    confirmationNeeded: boolean;
-  }) => Promise<any>;
+  submitPayment: (data?: object) => Promise<IPaymentSubmitResult>;
   submitPaymentSuccess: (
-    order?: CompleteCheckout_checkoutComplete_order
+    order?: CompleteCheckout_checkoutComplete_order | null
   ) => void;
   /**
    * Method called when gateway error occured.