israelFC-checkout-react | Stripe Developers | Page 1

random hare Jul 28, 2022, 4:37 PM

#

Good question! Let me check

#

I believe you can style it. You would just create an appearance object and pass it as an option to the element

#

Are you running into an error? Or were you just checking to make sure it was possible?

carmine mica Jul 28, 2022, 5:11 PM

#

My options object looks like this
const options: StripeElementsOptions = {
clientSecret: stripePaymentIntentId,
appearance: customAppearance,
};
and my appearance object Ive cribbed wholesale from stripe's documentation
const customAppearance = {
font: {
family:
Platform.OS === 'android' ? 'avenirnextregular' : 'AvenirNext-Regular',
},
shapes: {
borderRadius: 12,
borderWidth: 0.5,
},
primaryButton: {
shapes: {
borderRadius: 20,
},
},
colors: {
primary: '#fcfdff',
background: '#ffffff',
componentBackground: '#f3f8fa',
componentBorder: '#f3f8fa',
componentDivider: '#000000',
primaryText: '#000000',
secondaryText: '#000000',
componentText: '#000000',
placeholderText: '#73757b',
},
};
Im getting both a typescript error Type '{ font: { family: string; }; shapes: { borderRadius: number; borderWidth: number; }; primaryButton: { shapes: { borderRadius: number; }; }; colors: { primary: string; background: string; componentBackground: string; ... 5 more ...; placeholderText: string; }; }' has no properties in common with type 'Appearance'.
And I am also seeing no changes

random hare Jul 28, 2022, 5:22 PM

#

Hmmm, okay that's odd

#

Can you try only adding theme: 'stripe' to the customAppearance object and see if it still complains?

#

Like, remove everything else aside from theme: 'stripe'

#

My thought is that you need to use the regular web themes, variables, and rules (https://stripe.com/docs/elements/appearance-api?platform=web) since you're not using the Payment Sheet

fickle bear Jul 28, 2022, 5:33 PM

#

@carmine mica just to clarify the problem is with family right?

#

Our docs cover this in details here https://stripe.com/docs/elements/appearance-api?platform=web#commonly-used-variables and say you want fontFamily instead so I think your shape is incorrect right now

#

I don't fully grasp where your font[family] logic comes from

#

ah you looked at the RN one, okay that's the confusion so yeah what @random hare was explaining above is correct, you mixed up the platforms/types since you use a different integration

#israelFC-checkout-react