@descomplica/react-credit-card NPM

React Component Credit Card -

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.


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>