diff --git a/apps/builder/src/features/blocks/inputs/payment/components/PaymentAddressSettings.tsx b/apps/builder/src/features/blocks/inputs/payment/components/PaymentAddressSettings.tsx
new file mode 100644
index 000000000..8ac42b738
--- /dev/null
+++ b/apps/builder/src/features/blocks/inputs/payment/components/PaymentAddressSettings.tsx
@@ -0,0 +1,97 @@
+import {
+ Stack,
+ Accordion,
+ AccordionButton,
+ AccordionIcon,
+ AccordionItem,
+ AccordionPanel,
+} from '@chakra-ui/react'
+import React from 'react'
+import { TextInput } from '@/components/inputs'
+import { PaymentAddress } from '@typebot.io/schemas'
+
+type Props = {
+ address: PaymentAddress
+ onAddressChange: (address: PaymentAddress) => void
+}
+
+export const PaymentAddressSettings = ({ address, onAddressChange }: Props) => {
+ const updateCountry = (country: string) =>
+ onAddressChange({
+ ...address,
+ country,
+ })
+
+ const updateLine1 = (line1: string) =>
+ onAddressChange({
+ ...address,
+ line1,
+ })
+
+ const updateLine2 = (line2: string) =>
+ onAddressChange({
+ ...address,
+ line2,
+ })
+
+ const updateCity = (city: string) =>
+ onAddressChange({
+ ...address,
+ city,
+ })
+
+ const updateState = (state: string) =>
+ onAddressChange({
+ ...address,
+ state,
+ })
+
+ const updatePostalCode = (postalCode: string) =>
+ onAddressChange({
+ ...address,
+ postalCode,
+ })
+
+ return (
+
+
+
+ Address
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/builder/src/features/blocks/inputs/payment/components/PaymentSettings.tsx b/apps/builder/src/features/blocks/inputs/payment/components/PaymentSettings.tsx
index a6d11e85f..dfc5eb87c 100644
--- a/apps/builder/src/features/blocks/inputs/payment/components/PaymentSettings.tsx
+++ b/apps/builder/src/features/blocks/inputs/payment/components/PaymentSettings.tsx
@@ -11,13 +11,18 @@ import {
AccordionPanel,
} from '@chakra-ui/react'
import { DropdownList } from '@/components/DropdownList'
-import { PaymentInputOptions, PaymentProvider } from '@typebot.io/schemas'
+import {
+ PaymentAddress,
+ PaymentInputOptions,
+ PaymentProvider,
+} from '@typebot.io/schemas'
import React, { ChangeEvent } from 'react'
import { currencies } from '../currencies'
import { StripeConfigModal } from './StripeConfigModal'
import { CredentialsDropdown } from '@/features/credentials/components/CredentialsDropdown'
import { TextInput } from '@/components/inputs'
import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
+import { PaymentAddressSettings } from './PaymentAddressSettings'
type Props = {
options: PaymentInputOptions
@@ -90,6 +95,12 @@ export const PaymentSettings = ({ options, onOptionsChange }: Props) => {
additionalInformation: { ...options.additionalInformation, description },
})
+ const updateAddress = (address: PaymentAddress) =>
+ onOptionsChange({
+ ...options,
+ additionalInformation: { ...options.additionalInformation, address },
+ })
+
return (
@@ -152,7 +163,7 @@ export const PaymentSettings = ({ options, onOptionsChange }: Props) => {
Additional information
-
+
{
onChange={updatePhoneNumber}
placeholder="+33XXXXXXXXX"
/>
+
diff --git a/packages/embeds/js/src/features/blocks/inputs/payment/components/StripePaymentForm.tsx b/packages/embeds/js/src/features/blocks/inputs/payment/components/StripePaymentForm.tsx
index 5b0f09b38..c73de18cb 100644
--- a/packages/embeds/js/src/features/blocks/inputs/payment/components/StripePaymentForm.tsx
+++ b/packages/embeds/js/src/features/blocks/inputs/payment/components/StripePaymentForm.tsx
@@ -61,6 +61,11 @@ export const StripePaymentForm = (props: Props) => {
name: props.options.additionalInformation?.name,
email: props.options.additionalInformation?.email,
phone: props.options.additionalInformation?.phoneNumber,
+ address: {
+ ...props.options.additionalInformation?.address,
+ postal_code:
+ props.options.additionalInformation?.address?.postalCode,
+ },
},
},
},
diff --git a/packages/schemas/features/blocks/inputs/payment/schemas.ts b/packages/schemas/features/blocks/inputs/payment/schemas.ts
index 829801cfc..e50578f81 100644
--- a/packages/schemas/features/blocks/inputs/payment/schemas.ts
+++ b/packages/schemas/features/blocks/inputs/payment/schemas.ts
@@ -14,6 +14,15 @@ export type CreditCardDetails = {
cvc: string
}
+const addressSchema = z.object({
+ country: z.string().optional(),
+ line1: z.string().optional(),
+ line2: z.string().optional(),
+ state: z.string().optional(),
+ city: z.string().optional(),
+ postalCode: z.string().optional(),
+})
+
export const paymentInputOptionsSchema = optionBaseSchema.merge(
z.object({
provider: z.nativeEnum(PaymentProvider),
@@ -27,6 +36,7 @@ export const paymentInputOptionsSchema = optionBaseSchema.merge(
name: z.string().optional(),
email: z.string().optional(),
phoneNumber: z.string().optional(),
+ address: addressSchema.optional(),
})
.optional(),
credentialsId: z.string().optional(),
@@ -76,3 +86,6 @@ export type PaymentInputRuntimeOptions = z.infer<
typeof paymentInputRuntimeOptionsSchema
>
export type StripeCredentials = z.infer
+export type PaymentAddress = NonNullable<
+ PaymentInputOptions['additionalInformation']
+>['address']