Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Cut over to Stripe PaymentElement #3665

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Conversation

suejung-sentry
Copy link
Contributor

@suejung-sentry suejung-sentry commented Jan 16, 2025

This PR adds ability to choose ACH as a payment method.

  1. Cuts over from the existing Stripe CardElement to their PaymentElement. Note that the PaymentElement requires a clientSecret from api which establishes a Stripe setupIntent (corresponding work in api here)
  2. Moves the Stripe Appearance to a shared location so settings are not repeated across the stripe AddressElement and PaymentElement
  3. Initializes the Stripe Elements provider in mode: setup, currency: usd as required per here, here if using the PaymentElement. Otherwise stripe console errors that mode or client secret missing

Closes codecov/engineering-team#3108

@codecov-qa
Copy link

codecov-qa bot commented Jan 16, 2025

Codecov Report

Attention: Patch coverage is 95.38462% with 3 lines in your changes missing coverage. Please review.

Project coverage is 98.80%. Comparing base (162b8ca) to head (96caf94).

✅ All tests successful. No failed tests found.

Files with missing lines Patch % Lines
...n/BillingDetails/PaymentCard/PaymentMethodForm.tsx 90.32% 3 Missing ⚠️
@@            Coverage Diff             @@
##             main    #3665      +/-   ##
==========================================
- Coverage   98.91%   98.80%   -0.12%     
==========================================
  Files         817      820       +3     
  Lines       14720    14783      +63     
  Branches     4165     4203      +38     
==========================================
+ Hits        14561    14607      +46     
- Misses        152      167      +15     
- Partials        7        9       +2     
Files with missing lines Coverage Δ
src/pages/PlanPage/PlanPage.jsx 100.00% <100.00%> (ø)
...rentOrgPlan/BillingDetails/Address/AddressCard.tsx 100.00% <ø> (ø)
...lan/BillingDetails/PaymentCard/BankInformation.tsx 100.00% <100.00%> (ø)
...OrgPlan/BillingDetails/PaymentCard/PaymentCard.jsx 100.00% <100.00%> (ø)
src/services/account/useAccountDetails.ts 95.45% <100.00%> (+0.21%) ⬆️
src/services/account/useUpdatePaymentMethod.ts 95.00% <ø> (ø)
src/shared/ThemeContext/ThemeContext.tsx 96.87% <100.00%> (+0.10%) ⬆️
src/stripe.ts 100.00% <100.00%> (ø)
...n/BillingDetails/PaymentCard/PaymentMethodForm.tsx 90.32% <90.32%> (ø)

... and 1 file with indirect coverage changes

Components Coverage Δ
Assets 100.00% <ø> (ø)
Layouts 99.71% <ø> (ø)
Pages 98.43% <92.30%> (-0.20%) ⬇️
Services 99.28% <100.00%> (+<0.01%) ⬆️
Shared 99.37% <100.00%> (+<0.01%) ⬆️
UI 99.14% <ø> (ø)

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 162b8ca...96caf94. Read the comment docs.

@codecov-staging
Copy link

codecov-staging bot commented Jan 16, 2025

Codecov Report

Attention: Patch coverage is 95.38462% with 3 lines in your changes missing coverage. Please review.

✅ All tests successful. No failed tests found.

Files with missing lines Patch % Lines
...n/BillingDetails/PaymentCard/PaymentMethodForm.tsx 90.32% 3 Missing ⚠️
@@            Coverage Diff             @@
##             main    #3665      +/-   ##
==========================================
- Coverage   98.91%   98.80%   -0.12%     
==========================================
  Files         817      820       +3     
  Lines       14720    14783      +63     
  Branches     4165     4203      +38     
==========================================
+ Hits        14561    14607      +46     
- Misses        152      167      +15     
- Partials        7        9       +2     
Files with missing lines Coverage Δ
src/pages/PlanPage/PlanPage.jsx 100.00% <100.00%> (ø)
...rentOrgPlan/BillingDetails/Address/AddressCard.tsx 100.00% <ø> (ø)
...lan/BillingDetails/PaymentCard/BankInformation.tsx 100.00% <100.00%> (ø)
...OrgPlan/BillingDetails/PaymentCard/PaymentCard.jsx 100.00% <100.00%> (ø)
src/services/account/useAccountDetails.ts 95.45% <100.00%> (+0.21%) ⬆️
src/services/account/useUpdatePaymentMethod.ts 95.00% <ø> (ø)
src/shared/ThemeContext/ThemeContext.tsx 96.87% <100.00%> (+0.10%) ⬆️
src/stripe.ts 100.00% <100.00%> (ø)
...n/BillingDetails/PaymentCard/PaymentMethodForm.tsx 90.32% <90.32%> (ø)

... and 1 file with indirect coverage changes

Components Coverage Δ
Assets 100.00% <ø> (ø)
Layouts 99.71% <ø> (ø)
Pages 98.43% <92.30%> (-0.20%) ⬇️
Services 99.28% <100.00%> (+<0.01%) ⬆️
Shared 99.37% <100.00%> (+<0.01%) ⬆️
UI 99.14% <ø> (ø)

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 162b8ca...96caf94. Read the comment docs.

Copy link

codecov-public-qa bot commented Jan 16, 2025

Codecov Report

Attention: Patch coverage is 95.38462% with 3 lines in your changes missing coverage. Please review.

Project coverage is 98.80%. Comparing base (162b8ca) to head (96caf94).

✅ All tests successful. No failed tests found.

Files with missing lines Patch % Lines
...n/BillingDetails/PaymentCard/PaymentMethodForm.tsx 90.32% 3 Missing ⚠️
@@            Coverage Diff             @@
##             main    #3665      +/-   ##
==========================================
- Coverage   98.91%   98.80%   -0.12%     
==========================================
  Files         817      820       +3     
  Lines       14720    14783      +63     
  Branches     4165     4211      +46     
==========================================
+ Hits        14561    14607      +46     
- Misses        152      167      +15     
- Partials        7        9       +2     
Files with missing lines Coverage Δ
src/pages/PlanPage/PlanPage.jsx 100.00% <100.00%> (ø)
...rentOrgPlan/BillingDetails/Address/AddressCard.tsx 100.00% <ø> (ø)
...lan/BillingDetails/PaymentCard/BankInformation.tsx 100.00% <100.00%> (ø)
...OrgPlan/BillingDetails/PaymentCard/PaymentCard.jsx 100.00% <100.00%> (ø)
src/services/account/useAccountDetails.ts 95.45% <100.00%> (+0.21%) ⬆️
src/services/account/useUpdatePaymentMethod.ts 95.00% <ø> (ø)
src/shared/ThemeContext/ThemeContext.tsx 96.87% <100.00%> (+0.10%) ⬆️
src/stripe.ts 100.00% <100.00%> (ø)
...n/BillingDetails/PaymentCard/PaymentMethodForm.tsx 90.32% <90.32%> (ø)

... and 1 file with indirect coverage changes

Components Coverage Δ
Assets 100.00% <ø> (ø)
Layouts 99.71% <ø> (ø)
Pages 98.43% <92.30%> (-0.20%) ⬇️
Services 99.28% <100.00%> (+<0.01%) ⬆️
Shared 99.37% <100.00%> (+<0.01%) ⬆️
UI 99.14% <ø> (ø)

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 162b8ca...96caf94. Read the comment docs.

@codecov-releaser
Copy link
Contributor

codecov-releaser commented Jan 16, 2025

✅ Deploy preview for gazebo ready!

Previews expire after 1 month automatically.

Storybook

Commit Created Cloud Enterprise
969f83f Thu, 16 Jan 2025 22:55:02 GMT Expired Expired
5d262cd Fri, 17 Jan 2025 00:27:57 GMT Expired Expired
755744a Fri, 17 Jan 2025 01:35:09 GMT Expired Expired
91a732a Fri, 17 Jan 2025 02:35:46 GMT Expired Expired
ea0b00d Fri, 17 Jan 2025 02:54:17 GMT Expired Expired
31557fe Fri, 17 Jan 2025 03:04:21 GMT Expired Expired
0d33704 Fri, 17 Jan 2025 03:14:23 GMT Expired Expired
96caf94 Sat, 18 Jan 2025 00:33:00 GMT Cloud Enterprise

Copy link

codecov bot commented Jan 16, 2025

Bundle Report

Changes will increase total bundle size by 8.82kB (0.04%) ⬆️. This is within the configured threshold ✅

Detailed changes
Bundle name Size Change
gazebo-production-system 6.05MB 4.3kB (0.07%) ⬆️
gazebo-production-esm 6.1MB 4.52kB (0.07%) ⬆️

Copy link

codecov bot commented Jan 16, 2025

Codecov Report

Attention: Patch coverage is 95.45455% with 3 lines in your changes missing coverage. Please review.

Project coverage is 98.80%. Comparing base (162b8ca) to head (0d33704).

✅ All tests successful. No failed tests found.

Files with missing lines Patch % Lines
...n/BillingDetails/PaymentCard/PaymentMethodForm.tsx 86.36% 3 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #3665      +/-   ##
==========================================
- Coverage   98.91%   98.80%   -0.12%     
==========================================
  Files         817      820       +3     
  Lines       14720    14784      +64     
  Branches     4173     4206      +33     
==========================================
+ Hits        14561    14608      +47     
- Misses        152      167      +15     
- Partials        7        9       +2     
Files with missing lines Coverage Δ
src/pages/PlanPage/PlanPage.jsx 100.00% <100.00%> (ø)
...rentOrgPlan/BillingDetails/Address/AddressCard.tsx 100.00% <ø> (ø)
...lan/BillingDetails/PaymentCard/BankInformation.tsx 100.00% <100.00%> (ø)
...OrgPlan/BillingDetails/PaymentCard/PaymentCard.jsx 100.00% <100.00%> (ø)
src/services/account/useAccountDetails.ts 96.87% <100.00%> (+1.63%) ⬆️
src/services/account/useUpdatePaymentMethod.ts 95.00% <ø> (ø)
src/shared/ThemeContext/ThemeContext.tsx 96.87% <100.00%> (+0.10%) ⬆️
src/stripe.ts 100.00% <100.00%> (ø)
...n/BillingDetails/PaymentCard/PaymentMethodForm.tsx 86.36% <86.36%> (ø)

... and 1 file with indirect coverage changes

Components Coverage Δ
Assets 100.00% <ø> (ø)
Layouts 99.71% <ø> (ø)
Pages 98.42% <90.00%> (-0.20%) ⬇️
Services 99.29% <100.00%> (+<0.01%) ⬆️
Shared 99.37% <100.00%> (+<0.01%) ⬆️
UI 99.14% <ø> (ø)

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 162b8ca...0d33704. Read the comment docs.

@suejung-sentry suejung-sentry changed the title Sshin/stripe 2 feat: Cut over to Stripe PaymentElement Jan 16, 2025
@suejung-sentry suejung-sentry force-pushed the sshin/stripe-2 branch 3 times, most recently from 455f129 to 91a732a Compare January 17, 2025 02:30
@suejung-sentry suejung-sentry marked this pull request as ready for review January 17, 2025 02:31
interface BankInformationProps {
subscriptionDetail: z.infer<typeof SubscriptionDetailSchema>
}
function BankInformation({ subscriptionDetail }: BankInformationProps) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: can you get away with just passing bankAccount into this component?

provider,
owner,
name:
subscriptionDetail?.defaultPaymentMethod?.billingDetails?.name ||
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: Is it possible to pass just billingDetails to this component or set it to a const before this hook?

@@ -213,3 +213,20 @@ export function useAccountDetails({
...opts,
})
}

export const stripeAddress = (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thoughts on keeping this next to where it's being used in PaymentMethodForm?

@@ -62,7 +67,9 @@ export function useUpdatePaymentMethod({
payment_method_data: {
// eslint-disable-next-line camelcase
billing_details: {
name: name,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: I think we can tidy this up to { name, email, address }

Copy link
Contributor

@ajay-sentry ajay-sentry left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

couple small comments but nothing blocking

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Gazebo] Update the Billing / Plan Page to fit the new Figma Design
3 participants