Loading repository data…
descomplica / repository
react-credit-card
A Simple React component Credit Card
#credit-card#creditcard#javascript#payment#react#reactjsArchived
Live repository statistics
★ 55Stars
⑂ 10Forks
◯ 4Open issues
◉ 55Watchers
README preview
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-component
Browser Support
We do care about it.
| Latest ✔ | Latest ✔ | IE 9+ ✔ | Latest ✔ | Latest ✔ |
CommonJS
Install via NPM
$ npm install --save @descomplica/react-credit-card
Then:
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 start
Tests
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