From 07a5e2407976be684d91426c4a3651e8a03a8a15 Mon Sep 17 00:00:00 2001 From: Rachel Quartararo Date: Thu, 16 Jan 2025 15:43:20 -0500 Subject: [PATCH 1/5] prototype express checkout element --- package.json | 2 +- .../Payment/ExpressCheckoutPrototype.tsx | 35 +++++++++++++++++++ .../Order/Routes/Payment/PaymentContent.tsx | 27 ++++++++++++++ yarn.lock | 8 ++--- 4 files changed, 67 insertions(+), 5 deletions(-) create mode 100644 src/Apps/Order/Routes/Payment/ExpressCheckoutPrototype.tsx diff --git a/package.json b/package.json index 460356c138b..93dee4ff89a 100644 --- a/package.json +++ b/package.json @@ -88,7 +88,7 @@ "@sentry/browser": "^8.33.0", "@sentry/node": "^8.32.0", "@sentry/profiling-node": "^8.32.0", - "@stripe/react-stripe-js": "1.10.0", + "@stripe/react-stripe-js": "^3.1.1", "@stripe/stripe-js": "^4.1.0", "@styled-system/theme-get": "5.1.2", "@swc-node/register": "^1.10.9", diff --git a/src/Apps/Order/Routes/Payment/ExpressCheckoutPrototype.tsx b/src/Apps/Order/Routes/Payment/ExpressCheckoutPrototype.tsx new file mode 100644 index 00000000000..675e515ba3d --- /dev/null +++ b/src/Apps/Order/Routes/Payment/ExpressCheckoutPrototype.tsx @@ -0,0 +1,35 @@ +import { + ExpressCheckoutElement, + useElements, + useStripe, +} from "@stripe/react-stripe-js" + +export const ExpressCheckoutPrototype = () => { + 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 ( + <> + + + ) +} diff --git a/src/Apps/Order/Routes/Payment/PaymentContent.tsx b/src/Apps/Order/Routes/Payment/PaymentContent.tsx index 68b5d8f1f44..a991b8c525d 100644 --- a/src/Apps/Order/Routes/Payment/PaymentContent.tsx +++ b/src/Apps/Order/Routes/Payment/PaymentContent.tsx @@ -12,6 +12,8 @@ import { Text, Tooltip, } from "@artsy/palette" +import { Elements } from "@stripe/react-stripe-js" +import { type StripeElementsOptions, loadStripe } from "@stripe/stripe-js" import { BankAccountPickerFragmentContainer } from "Apps/Order/Components/BankAccountPicker" import { Collapse } from "Apps/Order/Components/Collapse" import { @@ -19,10 +21,13 @@ import { CreditCardPickerFragmentContainer, } from "Apps/Order/Components/CreditCardPicker" import { SaveAndContinueButton } from "Apps/Order/Components/SaveAndContinueButton" +import { ExpressCheckoutPrototype } from "Apps/Order/Routes/Payment/ExpressCheckoutPrototype" 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 { getENV } from "Utils/getENV" import type { Payment_me$data } from "__generated__/Payment_me.graphql" import type { CommercePaymentMethodEnum, @@ -75,8 +80,30 @@ export const PaymentContent: FC> = props => { } }, [order, selectedPaymentMethod, tracking]) + const options: StripeElementsOptions = { + mode: "payment", + amount: 1099, + currency: "usd", + } + + const stripePromise = loadStripe(getENV("STRIPE_PUBLISHABLE_KEY")) + + const expressCheckoutPrototypeEnabled = useFeatureFlag( + "emerald_stripe-express-checkout-prototype", + ) + return ( <> + {/* Express Checkout */} + {expressCheckoutPrototypeEnabled && ( + <> + Express Checkout + + + + + )} + {order.availablePaymentMethods.length > 1 && ( <> Payment method diff --git a/yarn.lock b/yarn.lock index 5d3a16cdce4..24043db9a11 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2380,10 +2380,10 @@ 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" From 8303bbe11798cd104c75c3bdfaf5c87efe83041c Mon Sep 17 00:00:00 2001 From: Rachel Quartararo Date: Thu, 16 Jan 2025 16:53:07 -0500 Subject: [PATCH 2/5] update stripe --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 93dee4ff89a..73ce5e8dc8e 100644 --- a/package.json +++ b/package.json @@ -89,7 +89,7 @@ "@sentry/node": "^8.32.0", "@sentry/profiling-node": "^8.32.0", "@stripe/react-stripe-js": "^3.1.1", - "@stripe/stripe-js": "^4.1.0", + "@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/yarn.lock b/yarn.lock index 24043db9a11..50f03b6c45d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2387,10 +2387,10 @@ 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" From 0165d328a3021d9c45e9625dccd0cc35912b157b Mon Sep 17 00:00:00 2001 From: Rachel Quartararo Date: Tue, 28 Jan 2025 08:44:13 -0500 Subject: [PATCH 3/5] restructure and add total cents --- .../ExpressCheckout.tsx} | 5 +++- .../ExpressCheckoutProvider.tsx | 24 +++++++++++++++++++ .../Order/Routes/Payment/PaymentContent.tsx | 19 +++------------ 3 files changed, 31 insertions(+), 17 deletions(-) rename src/Apps/Order/Routes/Payment/{ExpressCheckoutPrototype.tsx => ExpressCheckoutPrototype/ExpressCheckout.tsx} (78%) create mode 100644 src/Apps/Order/Routes/Payment/ExpressCheckoutPrototype/ExpressCheckoutProvider.tsx diff --git a/src/Apps/Order/Routes/Payment/ExpressCheckoutPrototype.tsx b/src/Apps/Order/Routes/Payment/ExpressCheckoutPrototype/ExpressCheckout.tsx similarity index 78% rename from src/Apps/Order/Routes/Payment/ExpressCheckoutPrototype.tsx rename to src/Apps/Order/Routes/Payment/ExpressCheckoutPrototype/ExpressCheckout.tsx index 675e515ba3d..2d74a539538 100644 --- a/src/Apps/Order/Routes/Payment/ExpressCheckoutPrototype.tsx +++ b/src/Apps/Order/Routes/Payment/ExpressCheckoutPrototype/ExpressCheckout.tsx @@ -1,10 +1,11 @@ +import { Spacer, Text } from "@artsy/palette" import { ExpressCheckoutElement, useElements, useStripe, } from "@stripe/react-stripe-js" -export const ExpressCheckoutPrototype = () => { +export const ExpressCheckout = () => { const elements = useElements() const stripe = useStripe() const clientSecret = "client_secret_id" @@ -29,6 +30,8 @@ export const ExpressCheckoutPrototype = () => { return ( <> + Express Checkout + ) diff --git a/src/Apps/Order/Routes/Payment/ExpressCheckoutPrototype/ExpressCheckoutProvider.tsx b/src/Apps/Order/Routes/Payment/ExpressCheckoutPrototype/ExpressCheckoutProvider.tsx new file mode 100644 index 00000000000..08d773070e9 --- /dev/null +++ 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 ( + <> + + + + + ) +} diff --git a/src/Apps/Order/Routes/Payment/PaymentContent.tsx b/src/Apps/Order/Routes/Payment/PaymentContent.tsx index a991b8c525d..82d67dfb202 100644 --- a/src/Apps/Order/Routes/Payment/PaymentContent.tsx +++ b/src/Apps/Order/Routes/Payment/PaymentContent.tsx @@ -12,8 +12,6 @@ import { Text, Tooltip, } from "@artsy/palette" -import { Elements } from "@stripe/react-stripe-js" -import { type StripeElementsOptions, loadStripe } from "@stripe/stripe-js" import { BankAccountPickerFragmentContainer } from "Apps/Order/Components/BankAccountPicker" import { Collapse } from "Apps/Order/Components/Collapse" import { @@ -21,13 +19,12 @@ import { CreditCardPickerFragmentContainer, } from "Apps/Order/Components/CreditCardPicker" import { SaveAndContinueButton } from "Apps/Order/Components/SaveAndContinueButton" -import { ExpressCheckoutPrototype } from "Apps/Order/Routes/Payment/ExpressCheckoutPrototype" +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 { getENV } from "Utils/getENV" import type { Payment_me$data } from "__generated__/Payment_me.graphql" import type { CommercePaymentMethodEnum, @@ -80,14 +77,6 @@ export const PaymentContent: FC> = props => { } }, [order, selectedPaymentMethod, tracking]) - const options: StripeElementsOptions = { - mode: "payment", - amount: 1099, - currency: "usd", - } - - const stripePromise = loadStripe(getENV("STRIPE_PUBLISHABLE_KEY")) - const expressCheckoutPrototypeEnabled = useFeatureFlag( "emerald_stripe-express-checkout-prototype", ) @@ -97,10 +86,8 @@ export const PaymentContent: FC> = props => { {/* Express Checkout */} {expressCheckoutPrototypeEnabled && ( <> - Express Checkout - - - + + )} From 2b26f73e31e55329645fcfb60e203320da2dc22e Mon Sep 17 00:00:00 2001 From: Rachel Quartararo Date: Tue, 28 Jan 2025 08:55:53 -0500 Subject: [PATCH 4/5] lowercase --- .../Routes/Payment/ExpressCheckoutPrototype/ExpressCheckout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Apps/Order/Routes/Payment/ExpressCheckoutPrototype/ExpressCheckout.tsx b/src/Apps/Order/Routes/Payment/ExpressCheckoutPrototype/ExpressCheckout.tsx index 2d74a539538..316a3e45f5f 100644 --- a/src/Apps/Order/Routes/Payment/ExpressCheckoutPrototype/ExpressCheckout.tsx +++ b/src/Apps/Order/Routes/Payment/ExpressCheckoutPrototype/ExpressCheckout.tsx @@ -30,7 +30,7 @@ export const ExpressCheckout = () => { return ( <> - Express Checkout + Express checkout From 90767945d5fb71c5dcf7de08b834b3cafe3de989 Mon Sep 17 00:00:00 2001 From: Rachel Quartararo Date: Tue, 28 Jan 2025 09:51:02 -0500 Subject: [PATCH 5/5] fix test --- .../BankDebitForm/__tests__/BankDebitProvider.jest.enzyme.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/Components/BankDebitForm/__tests__/BankDebitProvider.jest.enzyme.tsx b/src/Components/BankDebitForm/__tests__/BankDebitProvider.jest.enzyme.tsx index 48194d23d10..9d2a421798c 100644 --- 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: () =>
, +})) + const setHookState = state => jest.fn().mockImplementation(() => [state, () => {}])