React Credit Cards Without using CSS

npm install --save react-credit-cards

Features

• We support all credit card issuers available in Payment plus Hipercard (a brazilian credit card).
• Paste below code into App.js

import React, {useState  } from "react";
import Cards from "react-credit-cards";
import 'react-credit-cards/es/styles-compiled.css'
function App() {
const [number , setNumber] = useState(" ")
const [name , setName] = useState(" ")
const [expiry , setExpiry] = useState(" ")
const [cvc , setCvc] = useState(" ")
const [focus , setFocus] = useState(" ")
return (
<div className="App">
<Cards
number={number}
name={name}
expiry={expiry}
cvc={cvc}
focused={focus}
/>
<form>
<input
type ="tel"
name='number'
placeholder="Card Number"
value={number}
onChange={e => setNumber(e.target.value)}
onFocus={e => setFocus(e.target.name)}
/>
<input
type ="text"
name='name'
placeholder="Name"
value={name}
onChange={e => setName(e.target.value)}
onFocus={e => setFocus(e.target.name)}
/>
<input
type ="text"
name='Expiry'
placeholder="MM/YY Expiry"
value={expiry}
onChange={e => setExpiry(e.target.value)}
onFocus={e => setFocus(e.target.name)}
/>
<input
type ="tel"
name='cvc'
placeholder="CVC"
value={cvc}
onChange={e => setCvc(e.target.value)}
onFocus={e => setFocus(e.target.name)}
/>
</form>
</div>
);
}
export default App;

Add below code in App.css

input {
padding: .375rem ,.75rem;
font-size: 1rem;
line-height: 1.5;
color:#495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: .25rem;
transition: border-color .15s;
}

Now, if you go to http://localhost:3000 in your browser, you should see the credit card.

Valid test credit cards#

These are credit cards you can use to test an Approved Transaction workflow.

You can use any of the following numbers in the test environment. Just don’t forget to read the tips below:

• CVV: use any number with three digits, except American Express which CVV is four digits;
• Expiration date (due date): use any date in the future.