@@ -31,13 +33,16 @@ function PaymentCard({ subscriptionDetail, provider, owner }) {
provider={provider}
owner={owner}
closeForm={() => setIsFormOpen(false)}
+ subscriptionDetail={subscriptionDetail}
/>
) : card ? (
- No credit card set. Please contact support if you think it’s an
+ No payment method set. Please contact support if you think it’s an
error or set it yourself.
diff --git a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentMethodForm.tsx b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentMethodForm.tsx
index b6283a7edc..138173195f 100644
--- a/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentMethodForm.tsx
+++ b/src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentMethodForm.tsx
@@ -1,9 +1,10 @@
import { PaymentElement, useElements } from '@stripe/react-stripe-js'
+import { StripePaymentElement } from '@stripe/stripe-js'
import cs from 'classnames'
import { useState } from 'react'
import { z } from 'zod'
-import { SubscriptionDetailSchema } from 'services/account'
+import { stripeAddress, SubscriptionDetailSchema } from 'services/account'
import { useUpdatePaymentMethod } from 'services/account/useUpdatePaymentMethod'
import { Provider } from 'shared/api/helpers'
import Button from 'ui/Button'
@@ -38,6 +39,9 @@ const PaymentMethodForm = ({
email:
subscriptionDetail?.defaultPaymentMethod?.billingDetails?.email ||
undefined,
+ address:
+ stripeAddress(subscriptionDetail?.defaultPaymentMethod?.billingDetails) ||
+ undefined,
})
async function submit(e: React.FormEvent) {
@@ -49,7 +53,9 @@ const PaymentMethodForm = ({
elements.submit()
- const paymentElement = elements.getElement(PaymentElement)
+ const paymentElement = elements.getElement(
+ PaymentElement
+ ) as StripePaymentElement
updatePaymentMethod(paymentElement, {
onSuccess: async () => {
diff --git a/src/services/account/useAccountDetails.ts b/src/services/account/useAccountDetails.ts
index d3fb95b85b..a9632d1fa9 100644
--- a/src/services/account/useAccountDetails.ts
+++ b/src/services/account/useAccountDetails.ts
@@ -213,3 +213,20 @@ export function useAccountDetails({
...opts,
})
}
+
+export const stripeAddress = (
+ billingDetails: z.infer | null | undefined
+) => {
+ const address = billingDetails?.address
+ if (!address) return undefined
+
+ return {
+ line1: address.line1 || null,
+ line2: address.line2 || null,
+ city: address.city || null,
+ state: address.state || null,
+ // eslint-disable-next-line camelcase
+ postal_code: address.postalCode || null,
+ country: address.country || null,
+ }
+}
diff --git a/src/services/account/useUpdatePaymentMethod.ts b/src/services/account/useUpdatePaymentMethod.ts
index 8cdb844901..abef288be6 100644
--- a/src/services/account/useUpdatePaymentMethod.ts
+++ b/src/services/account/useUpdatePaymentMethod.ts
@@ -1,4 +1,5 @@
-import { PaymentElement, useElements, useStripe } from '@stripe/react-stripe-js'
+import { useElements, useStripe } from '@stripe/react-stripe-js'
+import { Address, StripePaymentElement } from '@stripe/stripe-js'
import { useMutation, useQueryClient } from '@tanstack/react-query'
import config from 'config'
@@ -11,7 +12,9 @@ import { useCreateStripeSetupIntent } from './useCreateStripeSetupIntent'
interface useUpdatePaymentMethodProps {
provider: Provider
owner: string
+ name?: string
email?: string
+ address?: Address
}
interface useUpdatePaymentMethodReturn {
@@ -19,7 +22,7 @@ interface useUpdatePaymentMethodReturn {
error: null | Error
isLoading: boolean
mutate: (
- variables: typeof PaymentElement,
+ variables: StripePaymentElement | null,
data?: { onSuccess?: () => void }
) => void
data: undefined | unknown
@@ -38,7 +41,9 @@ function getPathAccountDetails({
export function useUpdatePaymentMethod({
provider,
owner,
+ name,
email,
+ address,
}: useUpdatePaymentMethodProps): useUpdatePaymentMethodReturn {
const stripe = useStripe()
const elements = useElements()
@@ -62,7 +67,9 @@ export function useUpdatePaymentMethod({
payment_method_data: {
// eslint-disable-next-line camelcase
billing_details: {
+ name: name,
email: email,
+ address: address,
},
},
// eslint-disable-next-line camelcase