How to make a form secure in redux-form - reactjs

Question

I am trying to use redux-form to build a credit card info form. However, when the user put in their card details on it, this pop up appear:
it said
Automatic credit card filling is disabled because this form does not use a secure connection
So my question is how to make a form secure using redux-form?
This is the code where I input the Payment redux-form
import React from 'react'
import { connect } from 'react-redux'
import PaymentView from './Payment.js'
import { reduxForm } from 'redux-form'
class Payment extends React.Component{
render() {
const { cardDetail } = this.props
return(<PaymentView onCheckOut={()=>console.log(cardDetail)} />)
}
}
Payment = reduxForm({
form: 'payment'
})(Payment)
const mapStateToProps = state => ({
cardDetail : state.form.payment ? state.form.payment.values : null
})
export default connect(mapStateToProps)(Payment)
This is the code for my Payment View
import React from 'react'
import { Panel, Button, Row, Col } from 'react-bootstrap'
import { TextInput } from '.Form'
export default ({onCheckOut})=> <div>
<Row>
<Col sm={12} md={8} lg={6} mdOffset={2} lgOffset={3}>
<Panel className="scb" header="bank transfer">
123-456-789
</Panel>
</Col>
</Row>
<Row>
<Col sm={12} md={8} mdOffset={2} lg={6} lgOffset={3}>
<Panel className="credit-card" header="credit card" >
<Row>
<Col sm={12} md={8} lg={6}>
<TextInput
name="creditCard"
label="credit card number"
type="text"
validateState="success"
controlId="credit-card"
value="12345678910111213"
placeholder="xxxx xxxx xxxx xxxx"
onChange={()=>{}}
helptext="16card number"
>
card number
</TextInput>
</Col>
</Row>
<Row>
<Col sm={12} md={8} lg={6}>
<TextInput
name="name"
label="name"
type="text"
validateState="success"
controlId="name-card"
value="steve jobs"
placeholder="steve jobs"
onChange={()=>{}}
helptext="name on card"
>
Name on Card
</TextInput>
</Col>
</Row>
<Row>
<Col sm={8} md={8} lg={8}>
<h5>Expiry Date</h5>
</Col>
</Row>
<Row>
<Col sm={4} md={2} lg={2}>
<TextInput
name="month"
label="month"
type="text"
validateState="success"
controlId="month"
value="12"
placeholder="01"
onChange={()=>{}}
helptext="month"
>
month
</TextInput>
</Col>
<Col sm={4} md={2} lg={2}>
<TextInput
name="year"
label="year"
type="text"
validateState="success"
controlId="year"
value="18"
placeholder="18"
onChange={()=>{}}
helptext="year"
>
Year
</TextInput>
</Col>
</Row>
<Row>
<Col sm={12} md={4} lg={4}>
<TextInput
name="cvv"
label="cvv"
type="text"
validateState="cvv"
controlId="cvv"
value="123"
placeholder="123"
onChange={()=>{}}
helptext="cvv"
>
Cvv
</TextInput>
</Col>
</Row>
<Row>
<Col sm={12} md={4} lg={4}>
<Button bsStyle="primary" bsSize="large" block onClick={onCheckOut}>
Pay Now
</Button>
</Col>
</Row>
</Panel>
</Col>
</Row>
</div>
This is my TextInput
export const TextInput = (
{
type,
name,
placeholder,
helpTextArray,
status,
label,
value
}
) =>
<FormGroup
name="formBasicText"
validationState={status || null}
>
<ControlLabel>{label}</ControlLabel>
<Field
className="form-control"
id="formBasicText"
name={name}
component="input"
type={type}
placeholder={placeholder}
/>
<FormControl.Feedback />
{
value !== null?
helpTextArray.map( (helpText, key) =>
<HelpBlock key={key}>{helpText}</HelpBlock>
): null
}
</FormGroup>

Answer 1

This is most likely happening because the web page where that form is found is not served over HTTPS. Chrome automatically disables credit card information autofilling in those cases to stop your credit card information from falling into malicious hands through for example
Network traffic snooping (your credit card details being transmitted over a public Wi-Fi or other network in plaintext)
Man-in-the-Middle injection (somebody intercepting the non-encrypted HTTP traffic and injecting malicious code that captures credit card details)
Even if your page is served over HTTPS already, this issue might pop up if your page has content like images or external scripts that are served over a regular HTTP connection.

Answer 2

You have this message maybe because you don't use a 'HTTPS' connexion and your navigator detect that and disabled auto-filling ?