feat(EMI-2244): prototype stripe express checkout (#15123)

artsy · Jan 28, 2025 · 1a43767 · 1a43767
1 parent 60ba33c
commit 1a43767
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 10 deletions.
diff --git a/package.json b/package.json
@@ -88,8 +88,8 @@
     "@sentry/browser": "^8.33.0",
     "@sentry/node": "^8.32.0",
     "@sentry/profiling-node": "^8.32.0",
-    "@stripe/react-stripe-js": "1.10.0",
-    "@stripe/stripe-js": "^4.1.0",
+    "@stripe/react-stripe-js": "^3.1.1",
+    "@stripe/stripe-js": "^5.5.0",
     "@styled-system/theme-get": "5.1.2",
     "@swc-node/register": "^1.10.9",
     "@swc/helpers": "^0.5.15",

diff --git a/src/Apps/Order/Routes/Payment/ExpressCheckoutPrototype/ExpressCheckout.tsx b/src/Apps/Order/Routes/Payment/ExpressCheckoutPrototype/ExpressCheckout.tsx
@@ -0,0 +1,38 @@
+import { Spacer, Text } from "@artsy/palette"
+import {
+  ExpressCheckoutElement,
+  useElements,
+  useStripe,
+} from "@stripe/react-stripe-js"
+
+export const ExpressCheckout = () => {
+  const elements = useElements()
+  const stripe = useStripe()
+  const clientSecret = "client_secret_id"
+
+  const onConfirm = async () => {
+    if (!stripe || !elements) {
+      return
+    }
+
+    const { error } = await stripe.confirmPayment({
+      elements: elements,
+      clientSecret,
+      confirmParams: {
+        return_url: "https://artsy.net/",
+      },
+    })
+
+    if (error) {
+      console.error(error)
+    }
+  }
+
+  return (
+    <>
+      <Text variant="lg-display">Express checkout</Text>
+      <Spacer y={1} />
+      <ExpressCheckoutElement onConfirm={onConfirm} />
+    </>
+  )
+}
diff --git a/src/Apps/Order/Routes/Payment/ExpressCheckoutPrototype/ExpressCheckoutProvider.tsx b/src/Apps/Order/Routes/Payment/ExpressCheckoutPrototype/ExpressCheckoutProvider.tsx
@@ -0,0 +1,24 @@
+import { Elements } from "@stripe/react-stripe-js"
+import { type StripeElementsOptions, loadStripe } from "@stripe/stripe-js"
+import { ExpressCheckout } from "Apps/Order/Routes/Payment/ExpressCheckoutPrototype/ExpressCheckout"
+import { getENV } from "Utils/getENV"
+
+export const ExpressCheckoutProvider = ({ order }) => {
+  const { buyerTotalCents } = order
+
+  const options: StripeElementsOptions = {
+    mode: "payment",
+    amount: buyerTotalCents,
+    currency: "usd",
+  }
+
+  const stripePromise = loadStripe(getENV("STRIPE_PUBLISHABLE_KEY"))
+
+  return (
+    <>
+      <Elements stripe={stripePromise} options={options}>
+        <ExpressCheckout />
+      </Elements>
+    </>
+  )
+}
diff --git a/src/Apps/Order/Routes/Payment/PaymentContent.tsx b/src/Apps/Order/Routes/Payment/PaymentContent.tsx
@@ -19,8 +19,10 @@ import {
   CreditCardPickerFragmentContainer,
 } from "Apps/Order/Components/CreditCardPicker"
 import { SaveAndContinueButton } from "Apps/Order/Components/SaveAndContinueButton"
+import { ExpressCheckoutProvider } from "Apps/Order/Routes/Payment/ExpressCheckoutPrototype/ExpressCheckoutProvider"
 import type { CommitMutation } from "Apps/Order/Utils/commitMutation"
 import { RouterLink } from "System/Components/RouterLink"
+import { useFeatureFlag } from "System/Hooks/useFeatureFlag"
 import { Jump } from "Utils/Hooks/useJump"
 import { extractNodes } from "Utils/extractNodes"
 import type { Payment_me$data } from "__generated__/Payment_me.graphql"
@@ -75,8 +77,20 @@ export const PaymentContent: FC<React.PropsWithChildren<Props>> = props => {
     }
   }, [order, selectedPaymentMethod, tracking])
 
+  const expressCheckoutPrototypeEnabled = useFeatureFlag(
+    "emerald_stripe-express-checkout-prototype",
+  )
+
   return (
     <>
+      {/* Express Checkout */}
+      {expressCheckoutPrototypeEnabled && (
+        <>
+          <ExpressCheckoutProvider order={order} />
+          <Spacer y={4} />
+        </>
+      )}
+
       {order.availablePaymentMethods.length > 1 && (
         <>
           <Text variant="lg-display">Payment method</Text>

diff --git a/src/Components/BankDebitForm/__tests__/BankDebitProvider.jest.enzyme.tsx b/src/Components/BankDebitForm/__tests__/BankDebitProvider.jest.enzyme.tsx
@@ -5,6 +5,10 @@ import { mount } from "enzyme"
 
 jest.mock("Apps/Order/Routes/Payment/PaymentContext/OrderPaymentContext")
 
+jest.mock("../BankDebitForm", () => ({
+  BankDebitForm: () => <div />,
+}))
+
 const setHookState = state =>
   jest.fn().mockImplementation(() => [state, () => {}])
 

diff --git a/yarn.lock b/yarn.lock
@@ -2380,17 +2380,17 @@
   resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-8.4.7.tgz#c308f6a883999bd35e87826738ab8a76515932b5"
   integrity sha512-99rgLEjf7iwfSEmdqlHkSG3AyLcK0sfExcr0jnc6rLiAkBhzuIsvcHjjUwkR210SOCgXqBPW0ZA6uhnuyppHLw==
 
-"@stripe/react-stripe-js@1.10.0":
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/@stripe/react-stripe-js/-/react-stripe-js-1.10.0.tgz#5412874b5ed4732e917c6d9bb2b6721ee25615ab"
-  integrity sha512-vuIjJUZJ3nyiaGa5z5iyMCzZfGGsgzOOjWjqknbbhkNsewyyginfeky9EZLSz9+iSAsgC9K6MeNOTLKVGcMycQ==
+"@stripe/react-stripe-js@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@stripe/react-stripe-js/-/react-stripe-js-3.1.1.tgz#78a2575683637f87c965a81cc1e0f626138f20f1"
+  integrity sha512-+JzYFgUivVD7koqYV7LmLlt9edDMAwKH7XhZAHFQMo7NeRC+6D2JmQGzp9tygWerzwttwFLlExGp4rAOvD6l9g==
   dependencies:
     prop-types "^15.7.2"
 
-"@stripe/stripe-js@^4.1.0":
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/@stripe/stripe-js/-/stripe-js-4.1.0.tgz#11a54478df28b7a2d146251f645fb26e9efc9bfd"
-  integrity sha512-HhstGRUz/4JdbZpb26OcOf8Qb/cFR02arvHvgz4sPFLSnI6ZNHC53Jc6JP/FGNwxtrF719YyUnK0gGy4oyhucQ==
+"@stripe/stripe-js@^5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@stripe/stripe-js/-/stripe-js-5.5.0.tgz#ae01b0258b9c3f874fd15766260a67fb6726fb1b"
+  integrity sha512-lkfjyAd34aeMpTKKcEVfy8IUyEsjuAT3t9EXr5yZDtdIUncnZpedl/xLV16Dkd4z+fQwixScsCCDxSMNtBOgpQ==
 
 "@styled-system/background@^5.1.2":
   version "5.1.2"