#akram.alsaidi
high wharf
I'll be with you as soon as I can, in the mean time I've created a thread you can put the additional context for your question in
trim gyro
how can make the payment method card is nice ?
I,ve attached style like doc but no there big change
i need like this
high wharf
Apologies for the delay. Those are two different things you're comparing. The first screenshots shown are working with the Card Element, the last one is our Payment Element instead. What are you trying to accomplish?
trim gyro
with card pleas
high wharf
Okay, what do you want to do to it? That style object you referenced is the correct way to adjus the styling of the card element.
trim gyro
so the design to become is fine we need to do that by my silf ?
high wharf
Yes, you will need to match the styling of the card element to the styling of the page where you want to embed it.
trim gyro
ok thank you
how we can use on focus ?
with style ?
var element = elements.create('card', {
style: {
base: {
iconColor: '#c4f0ff',
color: '#fff',
fontWeight: '500',
fontFamily: 'Roboto, Open Sans, Segoe UI, sans-serif',
fontSize: '16px',
fontSmoothing: 'antialiased',
':-webkit-autofill': {
color: '#fce883',
},
'::placeholder': {
color: '#87BBFD',
},
},
invalid: {
iconColor: '#FFC7EE',
color: '#FFC7EE',
},
},
});
high wharf
Hm, I'm not sure if there's prebuilt functionality for that.
I'm not seeing any Events that the cardElement is expected to emit other than it's on change events. Are you able to set onfocus listeners that trigger when the element is focused? If so, I think you'd be able to update the Element and pass it a new Style object to change its styling when it's focused.
Oh, I see, it uses :focus to indicate onfocus settings.
trim gyro
i am using like this .StripeElement--focus{
color:red;
}
high wharf
Running some tests, and I'm finding that it works if I use syntax similar to what is seen in the sample code for ::placeholder
I have this:
color: 'red',
}```
which seems to cause the text of the input fields to change to red on focus
steep violetBOT
high wharf
There are two different versions of the Card Element, a single element where all fields are included in one element (the approach you seem to be using now), and another where each field is its own element. With the latter you use separate cardNumber, cardCvc, and cardExpiry elements. I believe you only apply separate stylings when using the separate elements.
high wharf
The Card Element is typically considered a legacy approach at this point, I'll see if we have docs that talk about it, but they may not be around anymore.
trim gyro
what is the best ?
high wharf
Using the Payment Element is our currently recommended flow.
trim gyro
Using the Payment Element is our currently recommended flow.
i can use this one ?
