React Credit Cards

A modern credit card component for React.

View demo Download Source

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, #f37b26, #fdb731)
  • $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 [email protected]: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.

GitHub