A Simple React component Credit Card
$ git clone -o your-component -b master --single-branch https://github.com/descomplica/react-credit-card.git your-componentWe do care about it.
 |
 |
 |
 |
 |
|---|---|---|---|---|
| Latest ✔ | Latest ✔ | IE 9+ ✔ | Latest ✔ | Latest ✔ |
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} />
);
}
……
render() {
return (
<CreditCard price={200.00} installments={6} success={callback} />
);
}
…<!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>$ npm install
$ npm startreact-credit-card is tested using Jasmine and Karma. To run the tests:
npm test
MIT: https://github.com/descomplica/react-credit-card/blob/master/LICENSE