Beautiful credit cards for your payment forms

Overview

React Credit Cards

NPM Travis Maintainability Test Coverage

A slick credit card component for React.

demo

Demo

Install

npm install --save react-credit-cards

Usage

import React from 'react';
import Cards from 'react-credit-cards';

export default class PaymentForm extends React.Component {
  state = {
    cvc: '',
    expiry: '',
    focus: '',
    name: '',
    number: '',
  };

  handleInputFocus = (e) => {
    this.setState({ focus: e.target.name });
  }
  
  handleInputChange = (e) => {
    const { name, value } = e.target;
    
    this.setState({ [name]: value });
  }
  
  render() {
    return (
      <div id="PaymentForm">
        <Cards
          cvc={this.state.cvc}
          expiry={this.state.expiry}
          focused={this.state.focus}
          name={this.state.name}
          number={this.state.number}
        />
        <form>
        	<input
            type="tel"
            name="number"
            placeholder="Card Number"
            onChange={this.handleInputChange}
            onFocus={this.handleInputFocus}
          />
          ...
        </form>
      </div>
    );
  }
}

Don't forget to import the react-credit-cards/lib/styles.scss if you are using SASS in your project.
Or you can import the CSS:
import 'react-credit-cards/es/styles-compiled.css';

Features

  • We support all credit card issuers available in Payment plus Hipercard (a brazilian credit card).

Props

  • name {string}: Name on card. *
  • number {string|number}: Card number. *
  • expiry {string|number}: Card expiry date. 10/20 or 012017 *
  • cvc {string|number}: Card CVC/CVV. *
  • focused {string}: Focused card field. name|number|expiry|cvc
  • locale {object}: Localization text (e.g. { valid: 'valid thru' }).
  • placeholders {object}: Placeholder text (e.g. { name: 'YOUR NAME HERE' }).
  • preview {bool}: To use the card to show scrambled data (e.g. **** 4567).
  • issuer {string}: Set the issuer for the preview mode (e.g. visa|mastercard|...)
  • acceptedCards {array}: If you want to limit the accepted cards. (e.g. ['visa', 'mastercard']
  • callback {func}: A callback function that will be called when the card number has changed with 2 paramaters: type ({ issuer: 'visa', maxLength: 19 }), isValid ({boolean})

* Required fields

SCSS options

Credit Card sizing

  • $rccs-card-ratio: Card ratio. Defaults to 1.5858
  • $rccs-size: Card width. Defaults to 290px

Credit Card fonts

  • $rccs-name-font-size: Defaults to 17px
  • $rccs-name-font-family: Defaults to Consolas, Courier, monospace
  • $rccs-number-font-size: Defaults to 17px
  • $rccs-number-font-family: Defaults to Consolas, Courier, monospace
  • $rccs-valid-font-size: Defaults to 10px
  • $rccs-expiry-font-size: Defaults to 16px
  • $rccs-expiry-font-family: Defaults to Consolas, Courier, monospace
  • $rccs-cvc-font-size: Defaults to 14px
  • $rccs-cvc-font-family: Defaults to Consolas, Courier, monospace
  • $rccs-cvc-color: Defaults to #222

Credit Card styling

  • $rccs-shadow: Defaults to 0 0 20px rgba(#000, 0.2)
  • $rccs-light-text-color: Card text color for dark cards. Defaults to #fff
  • $rccs-dark-text-color: Card text color for light cards. Defaults to #555
  • $rccs-stripe-bg-color: Stripe background color in the back. Defaults to #2a1d16
  • $rccs-signature-background: Signature background in the back. Defaults to repeating-linear-gradient(0.1deg, #fff 20%, #fff 40%, #fea 40%, #fea 44%, #fff 44%)
  • $rccs-default-background: Default card background. Defaults to linear-gradient(25deg, #939393, #717171)
  • $rccs-unknown-background: Unknown card background. Defaults to linear-gradient(25deg, #999, #999)
  • $rccs-background-transition: Card background transition. Defaults to all 0.5s ease-out
  • $rccs-animate-background: Card background animation. Defaults to true

Credit Card brands

  • $rccs-amex-background: Defaults to linear-gradient(25deg, #308c67, #a3f2cf)
  • $rccs-dankort-background: Defaults to linear-gradient(25deg, #ccc, #999)
  • $rccs-dinersclub-background: Defaults to linear-gradient(25deg, #fff, #eee)
  • $rccs-discover-background: Defaults to linear-gradient(25deg, #fff, #eee)
  • $rccs-mastercard-background: Defaults to linear-gradient(25deg, #e8e9e5, #fbfbfb)
  • $rccs-visa-background: Defaults to linear-gradient(25deg, #0f509e, #1399cd)
  • $rccs-elo-background: Defaults to linear-gradient(25deg, #211c18, #aaa7a2)
  • $rccs-hipercard-background: Defaults to linear-gradient(25deg, #8b181b, #de1f27)

Development

Here's how you can get started developing locally:

$ git clone https://github.com/amarofashion/react-credit-cards.git
$ cd react-credit-cards
$ npm install
$ npm start

Now, if you go to http://localhost:3000 in your browser, you should see the demo page.

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process of contributing to the project.

Useful links

EBANK's test numbers
Adyen's test numbers
Worldpay's test card numbers
Brazilian cards patterns

LICENSE

This project is licensed under the MIT License.

Made with ❤️ at AMARO.
Issues
  • 0.8.1+ styles broken in

    0.8.1+ styles broken in "production" webpack setting

    We have an odd defect when upgrading to 0.8.1+ (0.8.2 has same problem but 0.8.0 is fine) when using React mode "production" ("development" is fine).

    The styles for the entire credit card appear to not be applied. If I set the react mode to development everything works great, but when I set it to production, I get the following: Screen Shot 2020-05-13 at 1 54 04 PM

    It should look like this (what happens when I set mode to "development"): Screen Shot 2020-05-13 at 1 56 49 PM

    waiting response 
    opened by yinzara 15
  • Change of componentWillReceiveProps for React 17+

    Change of componentWillReceiveProps for React 17+

    Change of lifecycle method componentWillReceiveProps for componentDidUpdate with argument prevProps for check if new props are different than previous props. This will allow to use the solution for React 17+ without problems, and it will remove the warning for use of unsafe componentWillReceiveProps lifecycle method.

    opened by wolfgangdie 8
  • cvc issue

    cvc issue

    if user enter cvc the preview card transistion not woking import React, { Component } from "react"; import Cards from "react-credit-cards"; import "react-credit-cards/es/styles-compiled.css";

    class payment extends Component { state = { number: "", name: "", expiry: "", cvc: "", focus: "" }; success = () => { this.props.history.push("/success"); }; render() { return (

          <div className="tab-content">
            <div id="home" className="container tab-pane active">
              <div className="row m-2">
                <div className="col-md-6">
                  <Cards
                    number={this.state.number}
                    name={this.state.name}
                    expiry={this.state.expiry}
                    cvc={this.state.cvc}
                  />
                </div>
                <div className="col-md-6">
                  <form onSubmit={this.success}>
                    <input
                      type="tel"
                      placeholder="CARD NUMBER"
                      name="number"
                      value={this.state.number}
                      className="form-control m-2"
                      onChange={(e) => {
                        this.setState({ number: e.target.value });
                      }}
                      onFocus={(e) => {
                        this.setState({ focus: e.target.name });
                      }}
                      required
                    />
    
                    <input
                      type="tel"
                      className="form-control m-2"
                      placeholder="NAME"
                      name="name"
                      value={this.state.name}
                      onChange={(e) => {
                        this.setState({ name: e.target.value });
                      }}
                      onFocus={(e) => {
                        this.setState({ focus: e.target.name });
                      }}
                      required
                    />
                    <input
                      type="text"
                      className="form-control m-2"
                      placeholder="MM/YY"
                      name="expiry"
                      value={this.state.expiry}
                      onChange={(e) => {
                        this.setState({ expiry: e.target.value });
                      }}
                      onFocus={(e) => {
                        this.setState({ focus: e.target.name });
                      }}
                      required
                    />
                    <input
                      type="text"
                      className="form-control m-2"
                      placeholder="CVV/CVC"
                      name="cvc"
                      value={this.state.cvc}
                      onChange={(e) => {
                        this.setState({ cvc: e.target.value });
                      }}
                      onFocus={(e) => {
                        this.setState({ focus: e.target.name });
                      }}
                      required
                    />
                    <button className="btn btn-outline-success block">
                      Proceed To Pay
                    </button>
                  </form>
                </div>
              </div>
            </div>
            <div id="menu1" className="container tab-pane fade">
              <div className="row ">
                <div className="col-md-4"></div>
                <div className="col-md-4">
                  <button
                    className="btn btn-outline-success "
                    onClick={this.success}
                  >
                    Click Here To Redirect To Your Banking Website
                  </button>
                </div>
                <div className="col-md-4"></div>
              </div>
            </div>
            <div id="menu2" className="container tab-pane fade ">
              <div className="row ">
                <div className="col-md-4"></div>
                <div className="col-md-4 text-center m-2">
                  <button
                    className="btn btn-outline-success "
                    onClick={this.success}
                  >
                    Proceed To Confirm Cash On Delivery{" "}
                  </button>
                </div>
                <div className="col-md-4"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
    

    } }

    export default payment;

    opened by viswanadhkotha 5
  • Preview not working for masking the number

    Preview not working for masking the number

    I want to mask the credit card in the preview. I have added preview prop but still i can see the unmasked numbers. Please find the code below.

    
    `
    `import React from 'react';
    import Cards from 'react-credit-cards';
    
    
    
    
    
    export default class App extends React.Component {
      state = {
        cvc: '',
        expiry: '',
        focus: '',
        name: '',
        number: '',
        preview: true,
        issuer: 'visa'
      };
     
      handleInputFocus = (e) => {
        this.setState({ focus: e.target.name });
      }
      
      handleInputChange = (e) => {
        const { name, value } = e.target;
        
        this.setState({ [name]: value });
      }
      
      render() {
        return (
          <div id="PaymentForm">
            <Cards
              cvc={this.state.cvc}
              expiry={this.state.expiry}
              focus={this.state.focus}
              name={this.state.name}
              number={this.state.number}
              preview={this.state.preview}
              issuer={this.state.issuer}
            />
            <form>
            	<input
                type="tel"
                name="number"
                placeholder="Card Number"
                onChange={this.handleInputChange}
                onFocus={this.handleInputFocus}
              />
             
            </form>
          </div>
        );
      }
    }`
    
    opened by theone3nu 4
  • Placeholder number

    Placeholder number

    Does this support something like this?

    image

    It would be cool that we can also display a card in this way so it can be edited. Is this possible?

    opened by cayasso 4
  • Customization of form with separate fields

    Customization of form with separate fields

    Do it support fully customize of the fields look and fields and fields showing seperating. how to put validations

    opened by waleedarshad 3
  • Card wont focus on fields

    Card wont focus on fields

    I am implementing this into my app and can't get it to focus on the fields. It just stays dark whenever you touch one of the fields and won't turn the card to the backside whenever you touch the CVC field.

    opened by sabatsu 3
  • IE11 support

    IE11 support

    Hello guys, Thank you very much for your component. It is awesome. In IE11 the Card component is not rendered. The console is empty and a page is empty. Your deployed link also is empty. Is it possible to use this great component in IE11? Thank you.

    opened by fidelman 3
  • Improvement on

    Improvement on "focus" field README.md

    It is a really nice component. But the documentation could be improved (mainly about some requirement on input fields for the card number, expired date and CVC). For example, maybe it is better to specify that one would need to give their input special and fixed input name for the focus function:

    <Input name="name" /> for name input: name="name" required <Input name="number" /> for card number input: name="number" required <Input name="expiry" /> for expired date input: name="expiry" required <Input name="cvc" /> for cvc input: name="cvc" required

    or the focus feature such as <Card focused="expiry" /> would not work. Or maybe it would be even better to allow users to customise their input name, and set a way for <Card name="" cardNumber="" expiry="" cvc="" /> to read those custom input names, like

    <Card 
        inputNames={
           name: "my input name for the card name"
           cardNumber: "my input name for the card number"
           expiry: "my input name for the expire date"
           cvc "my input name for the cvc"
        }
    

    because <Card /> prop names like name, number seems to be pretty common?

    Besides, it may also be beneficial for developers to integrate formatCreditCardNumber formatCVC formatExpirationDate and Payment plugin in your code example into this repo as API functions because similar functions are usually used together with card payment.

    help wanted 
    opened by Jonathan0wh 3
  • Improved the style of Elo Credit Card

    Improved the style of Elo Credit Card

    Added improved SVG of Elo logo and added a new background gradient.

    opened by glaubermagal 3
  • Update react version

    Update react version

    null

    opened by isaeken 0
  • Update to Dart Sass 2.0

    Update to Dart Sass 2.0

    This package was throwing warnings about using division in Dart Sass 2.0 so I wanted to create a build that was more compatible.

    I had to remove the functionality of the npm run size script since size-limit seems to require PostCSS 8 now for some reason?

    Feel free to disregard this change, but I wanted all of my dependencies to be compliant with Dart Sass 2.0 after the deprecation of node-sass.

    opened by JoeyEamigh 0
  • TypeError: Cannot read properties of undefined (reading 'replace')

    TypeError: Cannot read properties of undefined (reading 'replace')

    I am getting this error in functional component.

    TypeError: Cannot read properties of undefined (reading 'replace')

    Can you look at please this error.

    Is there any restriction to use functional or class based component.

    opened by tcetin 0
  • Card icon based on number

    Card icon based on number

    Hi, Im using your component in my app, I want to change some behavior and render the CC icon based on the number. Do you have that in the library? If so there is an example for that?

    Thanks!

    opened by mauridirecta24 0
  • Update dependencies

    Update dependencies

    Updated dependencies Migrated to dart sass Fix depreciation warnings with Sass slash as division

    opened by cjsewell 1
  • Custom input rendering?

    Custom input rendering?

    Is there a possibility to allow for the inputs to be custom rendered so that this could be more easily integrated w/ payment processors' react input UI/UX libs? ie. react-stripe: https://stripe.com/docs/stripe-js/react#available-element-components Has number, CVC, and expiry fields for their system.

    Adding some custom input renderer props would accomplish this. Example: https://www.npmjs.com/package/react-credit-card-input#custom-input-renderer-usage

    Really wanna use this, but it might require me to create my own wrapper for these fields, which isn't ideal.

    opened by RavenHursT 0
Releases(v0.8.3)
  • v0.8.3(Jun 4, 2020)

  • v0.8.2(May 6, 2020)

    • Update CONTRIBUTING.md: 9a7eea1b2e79466576bb6813308c372730b21242
    • Upgrade dependencies: e1a72d5216601dcdff844bc953095ce3ed6224ac
    • Add missing @babel/cli: 61c9da0c094c7a0d5db50d63c1456953e5aab03d
    Source code(tar.gz)
    Source code(zip)
  • v0.8.1(Jan 17, 2020)

  • v0.8.0(Sep 16, 2019)

    • Update Mastercard gradient: 3ccddd8b705574e707dd52782574efb990c6c78f
    • Remove the demo: 1255b040b18fcb0272d92dc26b04f5f7e2b3ab4e
    • Update tests: 71dcfef72f36d9699b7a713a067ad7513d623d9f
    • Upgrade dependencies: 6b289b327027a9a7bf2556796a6b1d4f8d2bfc68
    • Remove state and deprecated lifecycles: b14537c9024c6d2af452b2eacbddc4979ffecda1
    • Rename files: 841fb115261541fd2e584864e81d04b75bb10510
    • Update README: 68c3dd4b3ee00c23eaa761e85b8de4639ab79d0e
    Source code(tar.gz)
    Source code(zip)
  • 0.6.3(Dec 5, 2017)

  • 0.6.2(Dec 5, 2017)

  • 0.6.1(Dec 5, 2017)

  • 0.6.0(Oct 6, 2017)

    Minor Changes

    • Fix npm install command: c0e55dfd80737a483dbb81c78b44f31944a255e7
    • Upgrade dependencies: 35636100ee8e1d17bc86dee602ba1f614587bb18
    • Update test configuration: 1251381f0d6baff9877a5b0f0ee0e31787dea4e7

    Patches

    • Upgrade test coverage: 186a504a555ff820b7185b300b0696337d3af757
    • Fix IE bug on demo: 7fd8bd079d9e70e0014057ed69f2d7910f7d0632
    • Remove brands that are now supported by Payment: 78d501e5eaccdfcbd5d1efcd6f5b62e8c76d65c6

    Credits

    Thanks @gilbarbara and @gabrielsch for the help. 👊

    Source code(tar.gz)
    Source code(zip)
  • 0.5.3(Aug 10, 2017)

  • 0.5.2(Aug 7, 2017)

  • v0.5.1(Jul 26, 2017)

    • Added babel-plugin-array-includes.: 80c3e1e6d509a82ac660a0b6490c499493cb14b1
    • Update babel options: 0a2c5b99e955de7e1b597ed6157e3e176c5bc7e8
    • Update styles: f48d60020b2c33b084d30ca015329a4fb1f336cc
    • Update webpack options: 5a4257e9fef8e1bdb13d1bea5c7e01f1a457375e
    • Update ignore files: 9cd67cbeab2b71a9d14245b09ce8c15744511c0a
    • Update prop-types: 52490e2aa13e06a9082ad92eb31e14ba0be357c3
    Source code(tar.gz)
    Source code(zip)
  • v0.4.1(Mar 12, 2017)

  • v0.4.0(Jan 22, 2017)

  • v0.3.2(Jan 22, 2017)

  • v0.3.1(Jan 17, 2017)

  • v0.3.0(Jan 16, 2017)

Owner
AMARO
AMARO é uma empresa de tecnologia e marca digital que revoluciona a forma como as pessoas consomem moda. Criamos produtos que combinam com a vida das pessoas.
AMARO
React Input Format & Mask, tiny (≈800b) component to transform any input component into formatted or masked input. Supports number, date, phone, currency, credit card, etc

RIFM - React Input Format & Mask Is a tiny (≈ 800b) component (and hook) to transform any input component into formatted or masked input. Demo Highlig

RealAdvisor 1.2k Jan 12, 2022
Credit cards and other payment icons in React Native

react-native-payment-icons There wasn't a package for displaying credit cards and other payment methods icons in React Native. Wasn't! We use SVGs tha

Henrique Bruno 9 Jan 11, 2022
Easy, cross-platform credit-card input for your React Native Project! Start accepting payment 💰 in your app today!

React Native Credit Card Input Easy (and good looking) credit-card input for your React Native Project ?? ?? Code: <CreditCardInput onChange={this._on

Sam Aryasa 1.3k Jan 10, 2022
Flipping Cards for your React Projects. React-Flippy allows you to create flipper event with your content.

React-Flippy React-Flippy allows you to create flipping cards in React projects. It can be used as controlled or uncontrolled component. Live Demo How

Berkay Aydın 295 Jan 7, 2022
💬 Follow some activities (new user, payment, ...) from your app via Slack and this webhook lib

react-native-slack-webhook Slack webhook for React-Native Installation $ npm i react-native-slack-webhook --save or $ yarn add react-native-slack-webh

Xavier Carpentier 53 Nov 4, 2021
💶 The package allows you accept payment using Lazerpay in your react native mobile app ⚡️

Lazerpay Official react-native sdk Lazerpay SDK allows you accept payments easily in your react-native application Installation npm install lazerpay-r

LazerPay 4 Jan 10, 2022
Tinder-like swipe cards for your React Native app

Swipe Cards for React Native A package based on @brentvatne's awesome example. Quick Start npm install --save react-native-swipe-cards Create a module

Meteor Factory 1.1k Jan 18, 2022
A React Hook & Container to help with payment card input fields.

React Payment Inputs A React Hook & Container to help with payment card input fields. React Payment Inputs Demos Requirements Installation Usage With

medipass 260 Jan 20, 2022
A react native interface for integrating Braintree's native Drop-in Payment UI for Android

react-native-braintree-android A react native interface for integrating Braintree's native Drop-in Payment UI for Android using Braintree's v.zero SDK

Suria Labs 23 Mar 6, 2019
🚀 WeChat login, share, favorite and payment for React-Native on iOS and Android platforms (QQ: 336021910)

React-Native-Wechat React Native bridging library that integrates WeChat SDKs: iOS SDK 1.7.2 Android SDK 221 react-native-wechat has the following tra

Yorkie Liu 2.8k Jan 15, 2022
A react native interface for integrating Braintree's native Drop-in Payment UI for Android

react-native-braintree-android A react native interface for integrating Braintree's native Drop-in Payment UI for Android using Braintree's v.zero SDK

Suria Labs 23 Mar 6, 2019
A React Hook & Container to help with payment card input fields.

React Payment Inputs A React Hook & Container to help with payment card input fields. React Payment Inputs Demos Requirements Installation Usage With

medipass 259 Jan 18, 2022
Ecommerce Fastapi react with Payment gateway

Ecommerce React with Backend Fastapi This is a simple project with Fastapi, sqlalchemy, react, redux, and Postgresql Routes Implement url: http://loca

Renaldyhidayatt 3 Dec 4, 2021
Payment Processor in smart contract and pay with crypto for business

Decentralized Pay With Crypto Implementation Tech Stack Node.js React Solidity S

Sercan ÇELENK 4 Dec 21, 2021
A customizable React Native 3D card/credit-card component.

About A customizable React Native 3D card/credit-card component ?? Dependencies This lib uses react-native-linear-gradient, so it is needed for this l

Caio Nilton Lemos Barroso 5 Dec 21, 2021
A Fully Functional E-Commerce Website Built With React, With Authentication and Credit Card Support

A Fully Functional E-Commerce Website Built With React, With Authentication and Credit Card Support

Idan Refaeli 8 Jan 5, 2022
react-native-card-data-input - just another credit card input package

react-native-card-data-input - just another credit card input package

Erick Estevão Riva Pramio 6 Oct 25, 2021
A modern credit card component for React

React Payment Card Component | A modern credit card component for React This React component will help you building your checkout on your e-commerce.

Pagar.me 83 Nov 13, 2021
A slick credit card component for React.

React Credit Cards A slick credit card component for React. Demo Install npm install --save react-credit-cards Usage import React from 'react'; impor

AMARO 2.2k Jan 14, 2022
React Input Format & Mask, tiny (≈800b) component to transform any input component into formatted or masked input. Supports number, date, phone, currency, credit card, etc

RIFM - React Input Format & Mask Is a tiny (≈ 800b) component (and hook) to transform any input component into formatted or masked input. Demo Highlig

RealAdvisor 1.2k Jan 12, 2022
React-Native Credit Card Animated UI with information validation

rn-credit-card-ui : A Credit Card React-Native UI component, it uses react-native-flip-card to flip the UI component smoothly and creditcardutils to v

Lemine 2 Aug 1, 2021
Make reusable React cards, pop-ups or modals as an async function

About Create reusable asynchronous functional cards. Allows to create the cards used on the pages once and allows them to be called as an async functi

Mustafa KURU 7 Nov 15, 2021
React library to generate matrix style simple cards.

React library to generate matrix style simple cards.

null 13 Dec 2, 2021
A simple Tinder like swipe component for swiping cards

A simple Tinder like swipe component for swiping cards.

Andrew Vo-Nguyen 1 Nov 16, 2021
Make reusable React cards, pop-ups or modals as an async function

About Create reusable asynchronous functional cards. Allows to create the cards used on the pages once and allows them to be called as an async functi

Mustafa KURU 7 Nov 15, 2021
A bingo system for generating bingo cards and checking their winning patterns

???? ???? Bingo-box Bingo box is an implementation of a bingo system, where the organizers can create and host a bingo game by printing id-assigned bi

Nohns 1 Dec 19, 2021
Cards Cheap Animated Gesture component animated made with react native, Expo and Reanimated v2

Cards Cheap Animated Gesture Technologies | How to run | License ?? Description Cards Cheap Animated Gesture component animated made with react native

Natanael 4 Dec 19, 2021
A Pokemon cards website. There are 400+ pokemon sprites with their name, moves height, weight and picture

Hi ?? , I'm Rayan Hossain A passionate Full Stack developer with expertise in WordPress ?? I’m currently working on codes_tips ?? I regularly write ar

Rayan Hossain 2 Dec 14, 2021