krishnaKanabar - Card Element

[hidden gate]

Hi there!

What exactly is the issue? What are you trying to do, and what have you done so far?

[silver jolt]

hii

we had talk yesterday

i want border like this and other css to be added in card number elements

<span>Card number</span>
<div id="card-number-element" class="el-input"></div>
</label>
<label>
<span>Expiry date</span>
<div id="card-expiry-element" class="field"></div>
</label>
<label>
<span>CVC</span>
<div id="card-cvc-element" class="field"></div>
</label>

---

this.stripe = Stripe(process.env.STRIPE_PUBLISHABLE_KEY)
let stripeElements = this.stripe.elements()
var style = {
base: {
iconColor: '#666EE8',
color: '#31325F',
lineHeight: '40px',
fontWeight: 300,
fontFamily: 'Helvetica Neue',
fontSize: '15px',

'::placeholder': {
  color: '#CFD7E0',
},

},
};

    var cardNumberElement = stripeElements.create('cardNumber', {

style: style, showIcon: true
});
cardNumberElement.mount('#card-number-element');

var cardExpiryElement = stripeElements.create('cardExpiry', {
style: style
});
cardExpiryElement.mount('#card-expiry-element');

var cardCvcElement = stripeElements.create('cardCvc', {
style: style
});
cardCvcElement.mount('#card-cvc-element');

.field {
background: transparent;
font-weight: 300;
border: 1px solid !important;
color: #31325F;
outline: none;
flex: 1;
padding-right: 10px;
padding-left: 10px;
cursor: text;
}

[silver jolt]

border is applying on whole section

[hidden gate]

Can you share a screenshot of how it looks like right now?

[hidden gate]

Doyou have a CSS rule that adds a border to the label element?
Instead, you could add a CSS rule like this:

#card-number-element {
  border: 1px solid black;
}

[silver jolt]

yes

I have tried that

but that applies to whole part

[silver jolt]

like this

but I want only in input element

[hidden gate]

When you add this to your HTML: <div id="card-number-element" class="el-input"></div>, then Stripe will automatically add an input inside that div. So if you want to add a border just around the input, then you just need to add a border just around the #card-number-element.

[silver jolt]

didn't understood

#card-number-element {
border: 1px solid black;
}

this way also it is adding to whole div

[hidden gate]

Can you try this (just for a test) and show me a screenshot?

#card-number-element {
  border: 2px solid red;
}

[silver jolt]

yeah already tried

[silver jolt]

same

[hidden gate]

No, this test has a red border. Can you try that exact code I just shared and show me a screenshot?

[fleet hazel]

👋 taking over for my colleague. Let me catch up.

[silver jolt]

okay

are you there?

[fleet hazel]

yes I'm here

[silver jolt]

Is there any solution for this?

[fleet hazel]

so to sum things up

you want to add a red border when the card number is invalid?

[silver jolt]

no no

[fleet hazel]

could you please explain then what are you trying to achieve?

[silver jolt]

i want card number element to look like this

your colleague suggested to add this custom css

#card-number-element {
border: 2px solid red;
}

Ignore what color and px but inshort i want to add border to input element

but border is getting appilied to whole div

[silver jolt]

this is the result and I want only on input element

[silver jolt]

you can see inspect element from here

[fleet hazel]

https://stripe.com/docs/elements/appearance-api?platform=web#form-inputs---labels-above

[silver jolt]

this doesn't work on card element

"The Elements Appearance API doesn’t support individual payment method Elements (such as CardElement). Use the Style object to customize your Element instead."

line from this document

[fleet hazel]

https://stripe.com/docs/js/elements_object/create_element?type=card#elements_create-options-style
https://stripe.com/docs/js/appendix/style

based on the above resources you can't since you don't have the possibility to add borders on the style

but you can add the styles on your own html element

as my colleague explained

[silver jolt]

but it's not applying on input element

it's appluying on whole div

[silver jolt]

To look like this

[fleet hazel]

are you adding the Card number label?

[silver jolt]

no

<label>
<span>Card number</span>
<div id="card-number-element"></div>
</label>

---

#card-number-element {
border: 2px solid red;
}

[fleet hazel]

could you try to do something like #card-number-element input{ border....

[silver jolt]

border just went off

not working

[fleet hazel]

ok could we try something please?

let's just remove everything else from that page and add step by step

first just add <div id="card-number-element"></div>with the border on #card-number-element

[silver jolt]

no border at all

[somber forum]

You need to target the specific class on the field, using the correct selector:

.CardNumberField {
  border: 1px solid red;
}