🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A Simple React component for Credit Card form fields.

Form React

Documentation

React Component Credit Card - status

A Simple React component Credit Card

Credit Card example

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.

Chrome logo Firefox logo Internet Explorer logo Opera logo Safari logo
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:

  1. npm test

LICENSE

MIT: https://github.com/descomplica/react-credit-card/blob/master/LICENSE


You May Also Like