React Component Credit Card - 
A Simple React component Credit Card
Getting Started
$ git clone -o your-component -b master --single-branch https://github.com/descomplica/react-credit-card.git your-componentBrowser Support
We do care about it.
 |
 |
 |
 |
 |
|---|---|---|---|---|
| Latest |
Latest |
IE 9+ |
Latest |
Latest |
CommonJS
Install via NPM
$ npm install --save @descomplica/react-credit-cardThen:
import CreditCard from '@descomplica/react-credit-card';
…
callback = (data) => {
/* data
{
CardNumber: "4111111111111111",
CvvNumber: "123",
ExpMonth: "12",
ExpYear: "2022",
HolderName: "giovanni keppelen"
}
*/
}
render() {
return (
<CreditCard success={callback} />
);
}
…With installments
…
render() {
return (
<CreditCard price={200.00} installments={6} success={callback} />
);
}
…Browser
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Credit Card Demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.1/react-with-addons.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.1/react-dom.min.js"></script>
<script src="https://dnnsjdj5swfc3.cloudfront.net/front-end/libs/react-credit-card.js"></script>
</head>
<body>
<div class="demo" id="demo"></div>
<script>
var CreditCard = CreditCard;
var callback = function(data) {
}
ReactDOM.render(
React.createElement(CreditCard, { success: callback }),
document.getElementById('demo')
);
</script>
</body>
</html>Development
$ npm install
$ npm startTests
react-credit-card is tested using Jasmine and Karma. To run the tests:
npm test
LICENSE
MIT: https://github.com/descomplica/react-credit-card/blob/master/LICENSE