mirror of
https://github.com/supabase/supabase.git
synced 2026-10-12 04:45:08 +03:00
Kevin Grüneberg
740eeb8504
- Mandatory address input when adding a new payment method - Removed the global HCaptcha store that wasn't used consistently and would sometimes block payment method changes - Remove the custom billing address data & tax id form on org creation and plan upgrades in favour of Stripe's `AddressElement` - Unify usage of the Stripe payment elements into a single component - Customers can mark "Purchasing as a business" and will then be able to put down a tax id - Adjusted billing address form to have better labels + tax id is filtered down to selected country - Adjusted Stripe Elements styling to use floating labels (otherwise very hard to use with address element) + additional styling changes - New flag to filter out payment methods that do not have an address for org upgrades and credit top ups, this will be enforced a few days after rolling this out - Added Google Maps Places API integration for address auto-completion via Stripe AddressElement - Upgraded Stripe dependencies - Slight adjustments to styling of plan upgrade modal
40 lines
1009 B
TypeScript
40 lines
1009 B
TypeScript
import type { Appearance } from '@stripe/stripe-js'
|
|
|
|
export const getStripeElementsAppearanceOptions = (
|
|
resolvedTheme: string | undefined
|
|
): Appearance => {
|
|
return {
|
|
labels: 'floating',
|
|
theme: (resolvedTheme?.includes('dark') ? 'night' : 'flat') as 'night' | 'flat',
|
|
variables: {
|
|
fontSizeBase: '14px',
|
|
colorBackground: resolvedTheme?.includes('dark')
|
|
? 'hsl(0deg 0% 14.1%)'
|
|
: 'hsl(0deg 0% 95.3%)',
|
|
fontFamily:
|
|
'var(--font-custom, Circular, custom-font, Helvetica Neue, Helvetica, Arial, sans-serif)',
|
|
},
|
|
rules: {
|
|
'.TermsText': {
|
|
fontSize: '12px',
|
|
},
|
|
'.Label--floating': {
|
|
fontSize: '14px',
|
|
},
|
|
'.Label--resting': {
|
|
fontSize: '14px',
|
|
color: 'rgb(137, 137, 137)',
|
|
},
|
|
'.Input': {
|
|
boxShadow: 'none',
|
|
height: '34px',
|
|
lineHeight: '16px',
|
|
padding: '8px 12px',
|
|
},
|
|
'.AccordionItem': {
|
|
boxShadow: 'none',
|
|
},
|
|
},
|
|
}
|
|
}
|