#rssv
crude elk
Which style parameters are you referencing?
shadow bolt
var style = {
base: {
backgroundColor: '#363636',
padding: '10px',
':hover': {
backgroundColor: '#ffffff'
}
},
};
crude elk
Also, any reason why you're not using Payment Element? It's far more customisable: https://stripe.com/docs/elements/appearance-api
And you get all the LPM support (like iDEAL) in the same Element
shadow bolt
I'm lost at this point 😦
This API is like ocean, never ends...
Thanks for the recommendation
crude elk
Well, let's take a step back: what are you trying to do with Stripe exactly?
shadow bolt
Customizing its elements to fit my website design
My first intention was using same class, but I can't due it's in iframe
So I tried to stylize it using same CSS, but apperently it wasn't supporting all of the CSS features
crude elk
Then if you want more customisation and styling you should use Payment Element. Plus you get wallets and LPMs for free, unlike with Card Element
shadow bolt
Alright
shadow bolt
It requires clientSecret, does that stands for secret key?
shadow bolt
So unlike cardelement, I need to first create intent?
Are we talking about sending request to my server then my server send request to Stripe (for creating this Intent thing)
If so, the Payment Element wouldn't suit for my case because website is offering 3 different payment method
crude elk
That is the default flow, yes. But you can use a deferred intent flow which doesn't require the intent upfront: https://stripe.com/docs/payments/accept-a-payment-deferred
crude elk
np!
shadow bolt
How to style payment_element inputs? I couldn't find it in there https://stripe.com/docs/js/elements_object/create_payment_element
crude elk
Also, any reason why you're not using Payment Element? It's far more customisabl...
See 👆
You pass it to stripe.elements(): https://stripe.com/docs/js/elements_object/create#stripe_elements-options-appearance
shadow bolt
const appearance = {
theme: 'night',
variables: {
fontFamily: 'Sohne, system-ui, sans-serif',
fontWeightNormal: '500',
borderRadius: '8px',
colorBackground: '#0A2540',
colorPrimary: '#EFC078',
colorPrimaryText: '#1A1B25',
colorText: 'white',
colorTextSecondary: 'white',
colorTextPlaceholder: '#727F96',
colorIconTab: 'white',
colorLogo: 'dark'
},
rules: {
'.Input, .Block': {
backgroundColor: 'transparent',
border: '1.5px solid var(--colorPrimary)'
}
}
};
const parentOpt = {
mode: 'payment',
amount: 1099,
currency: 'usd',
apperance: appearance,
};
const elements = stripe.elements(parentOpt);
Doesn't apply the theme
Oh, my bad.
crude elk
Are there any errors in your browser console?
shadow bolt
Typo
apperance: appearance,
appeArance
I hope that was my question, sorry for keeping you busy.
modern dawnBOT
shadow bolt
Card-element has hideIcon attribute, but couldn't find it something similiar for payment-element.
How to hide card icons?
mighty perch
it's not possible today, that's not something we provide a configuration or customisation for
shadow bolt
How to hide Country element?
mighty perch
you can use never on https://stripe.com/docs/js/elements_object/create_payment_element#payment_element_create-options-fields-billingDetails-address to hide the input, but you do need to then pass a value for country when you confirm the Intent, as it's required.
shadow bolt
Does this data too much important? Can I send it by analyzing IP address (User might use VPN at this moment)
mighty perch
why not just leave it as default and let the user pick their country? it's easier and more accurate than trying to guess by IP address, and also it should be the country that their payment method is from, and they might be on vacation.