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

React Credit Card

A Simple React component Credit Card

React Credit Card Info

ā­ Stars 52
šŸ”— Homepage www.descomplica.com.br
šŸ”— Source Code github.com
šŸ•’ Last Update a year ago
šŸ•’ Created 6 years ago
šŸž Open Issues 4
āž— Star-Issue Ratio 13
šŸ˜Ž Author descomplica