Use new Stripe payment gateway #1057

orzechdev · 2021-06-17T17:04:48Z

I want to merge this change because... it adds new Stripe payment gateway with 3DS support.

Backend: saleor/saleor#7452

Screenshots

Pull Request Checklist

All visible strings are translated with proper context.
All data-formatting is locale-aware (dates, numbers, and so on).
The changes are tested.
The code is documented (docstrings, project documentation).
Changes are mentioned in the changelog.

Test Environment Config

API_URI=https://feature-stripe.api.saleor.rocks/graphql/

vercel · 2021-06-17T17:04:51Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

storefront-master-staging – ./

🔍 Inspect: https://vercel.com/saleorcommerce/storefront-master-staging/7QiVGF5opWA9hPKMYgbroDbLJtFE
✅ Preview: https://storefront-master-staging-git-saleor-3141-999df6-saleorcommerce.vercel.app

storefront-qa – ./

🔍 Inspect: https://vercel.com/saleorcommerce/storefront-qa/DZ6cSnZdF8bPMDNpdiQ8dZMqMXzb
✅ Preview: https://storefront-qa-git-saleor-3141-stripe-3ds-support-saleorcommerce.vercel.app

storefront-stable-staging – ./

🔍 Inspect: https://vercel.com/saleorcommerce/storefront-stable-staging/5UmXX8wm577MfksqVE9tMtzrLuXj
✅ Preview: https://storefront-stable-staging-git-saleor-3141-f451e3-saleorcommerce.vercel.app

internal-demo-storefront – ./

🔍 Inspect: https://vercel.com/saleorcommerce/internal-demo-storefront/66RcSpUBK9fEBhC4gC56A2BMAJWw
✅ Preview: https://internal-demo-storefront-git-saleor-3141-03f6e9-saleorcommerce.vercel.app

storefront-demo – ./

🔍 Inspect: https://vercel.com/saleorcommerce/storefront-demo/BBePsNyt8BXbPrJvFcpD9NPkEVzQ
✅ Preview: https://storefront-demo-git-saleor-3141-stripe-3d-0e62ba-saleorcommerce.vercel.app

[Deployment for a938f99 failed]

patrys · 2021-06-17T17:04:51Z

Task linked: SALEOR-3141 Adjust storefront to fit new Stripe payment flow

orzechdev · 2021-06-29T09:06:42Z

Need to be merged together with saleor/saleor#7452

SektorDV · 2021-07-05T08:24:18Z

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

-    confirmationData: any;
-    confirmationNeeded: boolean;
-  }) => Promise<any>;
+  submitPayment: (data?: object) => Promise<any>;


Isn't there a specific type we could use for the returned Promise?

Types for data and promise can be more specific

And if there isn't, it should be of type unknown, not any.

SektorDV · 2021-07-05T08:25:41Z

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

 import { IFormError } from "@types";

 import { StripeCreditCardForm } from "../StripeCreditCardForm";
 import { IProps } from "./types";

+const messageDescription = "Stripe payment gateway error";
+
+export const stripeErrorMessages = defineMessages({


Maybe this stuff could go into intl.ts?

Sure, moved to separate intl.ts file for Stripe

SektorDV · 2021-07-05T08:30:39Z

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

+        ]);
+        return;
+      }
+      let confirmation;


This could probably be done via const inside the try/catch block, followed by optional chaining wherever a potentially undefined key of this variable is accessed.

Not sure if I understand correctly, const or let are scoped variables, so cannot be accessed outside of try/catch. Nevertheless, I have extracted these try/catch to the separate functions with immediate value return and I have added early return instead of if/else in this function, so I hope it is a little bit cleaner now.

SektorDV · 2021-07-05T08:30:56Z

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

+        ),
+      ]);
+    } else {
+      let paymentAction;


This could probably be done via const inside the try/catch block, followed by optional chaining wherever a potentially undefined key of this variable is accessed.

SektorDV · 2021-07-05T08:33:17Z

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

+  /**
+   * Method to call on gateway payment submission.
+   */
+  submitPayment: (data?: object) => Promise<any>;


Same as earlier, would it be possible to be more specific about the Promise return type?

kamilpastuszka

Generally, control flow in StripePaymentGateway.tsx can be potentially improved.

kamilpastuszka · 2021-07-05T10:26:58Z

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

-    confirmationData: any;
-    confirmationNeeded: boolean;
-  }) => Promise<any>;
+  submitPayment: (data: object) => Promise<any>;


Types for data and promise can be more specific

Data type cannot be easily guessed due to the unknown Adyen gateway object, which will be returned, so I would rather stay with an object for now and also this object is simply passed to the backend where it is processed. Promise type is fixed.

As I can see, the overall structure of the object (all possible properties) is known, so even if objects in use may differ on case-by-case basis, there is still some room to apply type constraints. Something that can be considered in future, if not now.

kamilpastuszka · 2021-07-05T10:27:22Z

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

-    confirmationData: any;
-    confirmationNeeded: boolean;
-  }) => Promise<any>;
+  submitPayment: (data?: object) => Promise<any>;


Types for data and promise can be more specific

kamilpastuszka · 2021-07-05T10:31:33Z

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

+export const stripeErrorMessages = defineMessages({
+  gatewayMisconfigured: {
+    defaultMessage: "Stripe gateway misconfigured. Api key not provided.",
+    description: messageDescription,
+  },
+  paymentSubmissionError: {
+    defaultMessage:
+      "Payment submission error. Stripe gateway returned no payment method in payload.",
+    description: messageDescription,
+  },
+  geytwayDisplayError: {
+    defaultMessage:
+      "Stripe payment gateway couldn't be displayed. Stripe elements were not provided.",
+    description: messageDescription,
+  },
+  paymentMethodNotCreated: {
+    defaultMessage: "Payment method has not been created.",
+    description: messageDescription,
+  },
+});


Maybe worth using shorthand notation for description property?

eCzerniak

404 is shown to user at the end of checkout process.

vercel bot deployed to Preview – storefront-stable-staging June 18, 2021 16:32 View deployment

vercel bot deployed to Preview – storefront-qa June 18, 2021 16:32 View deployment

vercel bot deployed to Preview – storefront-master-staging June 18, 2021 16:32 View deployment

vercel bot deployed to Preview – storefront-demo June 18, 2021 16:32 View deployment

vercel bot deployed to Preview – internal-demo-storefront June 18, 2021 16:32 View deployment

vercel bot deployed to Preview – storefront-demo June 18, 2021 16:43 View deployment

vercel bot deployed to Preview – storefront-stable-staging June 18, 2021 16:43 View deployment

vercel bot deployed to Preview – storefront-qa June 18, 2021 16:46 View deployment

vercel bot deployed to Preview – storefront-master-staging June 18, 2021 16:55 View deployment

vercel bot deployed to Preview – internal-demo-storefront June 18, 2021 17:05 View deployment

orzechdev changed the title ~~Add 3DS support to Stripe~~ Use new Stripe payment gateway Jun 23, 2021

vercel bot deployed to Preview – storefront-demo June 23, 2021 09:14 View deployment

vercel bot deployed to Preview – storefront-qa June 23, 2021 09:14 View deployment

vercel bot deployed to Preview – internal-demo-storefront June 23, 2021 09:14 View deployment

vercel bot deployed to Preview – storefront-master-staging June 23, 2021 09:14 View deployment

vercel bot deployed to Preview – storefront-stable-staging June 23, 2021 09:14 View deployment

orzechdev marked this pull request as ready for review June 29, 2021 09:04

orzechdev requested review from a team, kamilpastuszka, SektorDV and eCzerniak and removed request for a team June 29, 2021 09:05

SektorDV suggested changes Jul 5, 2021

View reviewed changes

kamilpastuszka suggested changes Jul 5, 2021

View reviewed changes

vercel bot deployed to Preview – storefront-demo July 6, 2021 16:46 View deployment

vercel bot had a problem deploying to Preview – internal-demo-storefront July 6, 2021 16:47 Failure

vercel bot had a problem deploying to Preview – storefront-qa July 6, 2021 16:47 Failure

kamilpastuszka approved these changes Jul 9, 2021

View reviewed changes

eCzerniak approved these changes Jul 12, 2021

View reviewed changes

eCzerniak self-requested a review July 12, 2021 09:41

eCzerniak suggested changes Jul 12, 2021

View reviewed changes

eCzerniak approved these changes Jul 12, 2021

View reviewed changes

orzechdev force-pushed the SALEOR-3141-stripe-3ds-support branch from f900d4e to 2ab9714 Compare July 12, 2021 12:21

vercel bot deployed to Preview – storefront-qa July 12, 2021 12:21 View deployment

vercel bot deployed to Preview – internal-demo-storefront July 12, 2021 12:21 View deployment

vercel bot had a problem deploying to Preview – storefront-demo July 12, 2021 12:21 Failure

vercel bot deployed to Preview – storefront-master-staging July 12, 2021 12:21 View deployment

vercel bot deployed to Preview – storefront-stable-staging July 12, 2021 12:21 View deployment

orzechdev added 10 commits July 14, 2021 10:47

Add 3ds support to Stripe - test commit

29d83a2

Clean ups

4a7e50d

Update changelog

489fc86

Create common payment error messages

2cdf777

Update changelog

2d86253

Update payment gateways types and messages

9591843

Add early returns in Stripe submit logic

ffffa92

Shorthand notation for description

c3da7d1

Update Adyen error translation

f46e96b

Trigger CI

a938f99

orzechdev force-pushed the SALEOR-3141-stripe-3ds-support branch from 2ab9714 to a938f99 Compare July 14, 2021 08:50

vercel bot deployed to Preview – storefront-stable-staging July 14, 2021 08:50 View deployment

vercel bot had a problem deploying to Preview – storefront-demo July 14, 2021 08:50 Failure

vercel bot deployed to Preview – storefront-master-staging July 14, 2021 08:50 View deployment

vercel bot deployed to Preview – storefront-qa July 14, 2021 08:50 View deployment

vercel bot deployed to Preview – internal-demo-storefront July 14, 2021 08:50 View deployment

korycins approved these changes Jul 14, 2021

View reviewed changes

jwm0 merged commit 5bc3aef into master Jul 14, 2021

jwm0 deleted the SALEOR-3141-stripe-3ds-support branch July 14, 2021 13:18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use new Stripe payment gateway #1057

Use new Stripe payment gateway #1057

orzechdev commented Jun 17, 2021 •

edited

Loading

vercel bot commented Jun 17, 2021 •

edited

Loading

patrys commented Jun 17, 2021

orzechdev commented Jun 29, 2021

SektorDV Jul 5, 2021

kamilpastuszka Jul 5, 2021 •

edited

Loading

patrys Jul 5, 2021

orzechdev Jul 7, 2021

SektorDV Jul 5, 2021

orzechdev Jul 7, 2021

SektorDV Jul 5, 2021

orzechdev Jul 7, 2021

SektorDV Jul 5, 2021

orzechdev Jul 7, 2021

SektorDV Jul 5, 2021

orzechdev Jul 7, 2021

kamilpastuszka left a comment

kamilpastuszka Jul 5, 2021

orzechdev Jul 7, 2021

kamilpastuszka Jul 8, 2021

kamilpastuszka Jul 5, 2021 •

edited

Loading

kamilpastuszka Jul 5, 2021

orzechdev Jul 7, 2021

eCzerniak left a comment

Use new Stripe payment gateway #1057

Use new Stripe payment gateway #1057

Conversation

orzechdev commented Jun 17, 2021 • edited Loading

Screenshots

Pull Request Checklist

Test Environment Config

vercel bot commented Jun 17, 2021 • edited Loading

storefront-master-staging – ./

storefront-qa – ./

storefront-stable-staging – ./

internal-demo-storefront – ./

storefront-demo – ./

patrys commented Jun 17, 2021

orzechdev commented Jun 29, 2021

Choose a reason for hiding this comment

kamilpastuszka Jul 5, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kamilpastuszka left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kamilpastuszka Jul 5, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

eCzerniak left a comment

Choose a reason for hiding this comment

orzechdev commented Jun 17, 2021 •

edited

Loading

vercel bot commented Jun 17, 2021 •

edited

Loading

kamilpastuszka Jul 5, 2021 •

edited

Loading

kamilpastuszka Jul 5, 2021 •

edited

Loading