#krishnaKanabar - element
acoustic sphinx
Based on the error message it looks like you need to be using httpS in order to auto-fill the form.
acoustic sphinx
Awesome!
polar elk
One more issue
I am not able to put card number element inside <input> tag
I am using element-ui
<el-form-item prop="name">
<span class="" slot="label">
Card Number
</span>
<el-input>
<div id="card-number-element" class="field"></div>
</el-input>
</el-form-item>
acoustic sphinx
What do you mean by "I am not able to"? Do you get an error message?
polar elk
I mean card number element is not getting rendered
polar elk
IntegrationError: The selector you specified (#card-number-element) applies to no DOM elements that are currently on the page.
Make sure the element exists on the page before calling mount()
mounted() {
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');
acoustic sphinx
Well, that error message is pretty clear: you need a DOM element with id="card-number-element" for it to work.
polar elk
yes I have put that inside <el-input> because I want card number element inside form input field
<el-input>
<div id="card-number-element" class="field"></div>
</el-input>
If I put it outside <el-input> then it is getting rendered but I want it to be input element
like this
acoustic sphinx
the card number element will be an input, so it doesn't make sense to have an input inside another input.
polar elk
I want input box like shown in scrrenshot
acoustic sphinx
You should use <div id="card-number-element" class="field"></div> without the <el-input>. And then use css to customize the look of the page or use the style object https://stripe.com/docs/js/elements_object/create_element?type=card#elements_create-options-style
polar elk
okay got it