A modern credit card component for React

Feb 19, 2019
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.

The first version of a payment card modal was used in's checkout 1.0, but as we're now rewriting it to version 2.0 in React, why not creating a component so people also can use it the way they prefer?

By having a lot of credit cards from many different banks, brands and types, users will be able to see a digital version of their credit cards as they type the credit card number.

View demo Download Source



To use this component in your React app, start by adding it to the project dependencies list:

npm version > 5

npm i react-payment-card-component

npm version < 5

npm i react-payment-card-component --save


yarn add react-payment-card-component

And then, import it:

import PaymentCard from 'react-payment-card-component' render () { return ( <PaymentCard bank="itau" model="personnalite" type="black" brand="mastercard" number="4111111111111111" cvv="202" holderName="Owen Lars" expiration="12/20" flipped={false} /> ); }

Flipping the card

You can use React to manage the card state and implement your own logic, like flipping the card with a button or when user is typing the CVV (Card Verification Value).

flipCard () { const flipped = !this.state.flipped this.setState({ flipped }) }

Available Props

bankStringtrueThe bank prop defines the major style for the card, like the elements positions, background color and logos. Examples.: default, itau, santander, nubank
modelStringfalseModel refers to the card model. Examples.: normal, prime, personnalite
typeStringfalse (although it's not required, some styles may not properly work without it)The type is used alongside with bank and model to get the final card styling. They are the types of a credit card that each bank can emit. Examples.: gold, black, platinum
brandStringtrueThis prop is used to get the correct logo and position of the brand used in the card. Examples: mastercard, visa.
numberStringfalseThe card number printed in the card
cvvStringfalse3-digit CVV (Card Verification Value)
holderNameStringfalseThe holder name as printed in the card
expirationStringfalseThe expiration month and year following the pattern: MM/YY
flippedBooleanfalseIf true the backface of the card will be shown



The CSS files to manage the banks styles are under ./src/components/PaymentCard/styles, where each bank needs its own file under the banks folder and have it imported in the main ./src/components/PaymentCard/styles/index.css file.

To add a new style, remember to create classes following the pattern: bankName-cardModel-cardType:

.santander-normal-black { background: #000000; }


We currently have 3 types of logos:

  • bankLogo
  • brandLogo
  • modelLogo

If you need to add new assets for corresponding logos, do it under the proper component folder in the images folder.


  • Prefer .svg files or .png (in that order)
  • Keep them as small as possible, even if they are going to be compressed in the build process