Create a credit card component with React

Introduction

In this tutorial I'll walk you through creating a reusable Credit Card Component using ReactJS.

Credit Card Mockup

Prerequisites

Project Setup

I have created a starter project with a JavaScript bundler and all the other dependencies set up so that you can get started. Run the following commands on your terminal.

git clone https://github.com/renjithgr/react-credit-card-component-starter.git
cd react-credit-card-component-starter
npm install

Once all the dependencies are installed, run:

npm start

You should see the following on your terminal.

Server running at http://localhost:1234
✨ Built in 2.73s.

This will start a development server with hot reloading so that you can make changes to the codebase and see a live preview on your browser. Go to http://localhost:1234 on your browser. You should see a Hello World! message on center of the page.

Walkthrough of the code for the Credit Card component.

Let's take a look at the current implementation of the CreditCard component, which you can find in the file src/CreditCard.js.

import React from 'react';

export default () => <h1>Hello World!</h1>

Let's go through this line by line.

The simplest way to define a React Component is to write a JavaScript function that returns a React element. The React element is specified using JSX. I recommend going through JSX In Depth by the React team. It is an excellent source of information to understand how JSX is converted into React API calls.

Changing the structure of the Credit Card component.

If you look at the mock up we can divide the component into three sections.

Let's create three div components as shown below.

Credit Structure Breakdown

import React from 'react';

export default () => {
return (
<div className='credit-card'>
<div className='credit-card__logo'></div>
<div className='credit-card__number'></div>
<div className='credit-card__info'></div>
</div>

);
}

We can break down the credit-card__info into two sections.

import React from 'react';

export default () => {
return (
<div className='credit-card'>
<div className='credit-card__logo'>Logo goes here</div>

<div className='credit-card__number'>4353 8091 9812 2516</div>

<div className='credit-card__info'>
<div className='credit-card__info_name'>
<div className='credit-card__info_label'>CARDHOLDER'S NAME</div>
<div>MATT SMITH</div>
</div>

<div className='credit-card__info_expiry'>
<div className='credit-card__info_label'>VALID UP TO</div>
<div>06/2027</div>
</div>
</div>

</div>

);
}

Styling with CSS.

This is not looking nice yet, we need the help of CSS to style this component. We will add the styles in the src/credit-card.css. First we need to import it.

import React from 'react';
import './credit-card.css';

export default () => {
return (
<div className='credit-card'>
<div className='credit-card__logo'>Logo goes here</div>

<div className='credit-card__number'>4353 8091 9812 2516</div>

<div className='credit-card__info'>
<div className='credit-card__info_name'>
<div className='credit-card__info_label'>CARDHOLDER'S NAME</div>
<div>MATT SMITH</div>
</div>

<div className='credit-card__info_expiry'>
<div className='credit-card__info_label'>VALID UP TO</div>
<div>06/2027</div>
</div>
</div>

</div>

);
}

Now add the following CSS code to the src/credit-card.css.

@import url('https://fonts.googleapis.com/css?family=Fjalla+One');

.credit-card {
display: flex;
flex-direction: column;
justify-content: space-between;

width: 400px;
height: 250px;
padding: 25px;
border-radius: 15px;

color: white;

background-image: linear-gradient(25deg, #0f509e, #1399cd);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.credit-card__number {
display: flex;
justify-content: center;

font-family: 'Fjalla One', sans-serif;
font-size: 45px;
}

.credit-card__info {
display: flex;
justify-content: space-between;

font-family: 'Fjalla One', sans-serif;
font-size: 25px;
}

.credit-card__info_label {
font-size: 14px;
}

.credit-card__info_expiry {
display: flex;
flex-direction: column;
align-items: flex-end;
}

The component should look something like this.

Screen Shot of the component after the CSS.

Adding "props"

Our component is not reusable yet. To make it reusable the component should accept "props" (short for properties). In the case of our Credit Card Component, the props are:

Open the file src/index.js file.

import { render } from 'react-dom';
import React from 'react';
import CreditCard from './CreditCard';

const mountNode = document.getElementById("app");

render(
<div className='demo-container'><CreditCard /></div>,
mountNode
);

Let's add pass down some props to our component.

import { render } from 'react-dom';
import React from 'react';
import CreditCard from './CreditCard';

const mountNode = document.getElementById("app");

render(
<div className='demo-container'>
<CreditCard
name="NEIL GAIMAN"
number="5241 1734 7629 0435"
expiry="04/2028"
/>
</div>,

mountNode
);

Now let's change the src/CreditCard.js file to use these properties.

import React from 'react';
import './credit-card.css';

export default (props) => {
return (
<div className='credit-card'>
<div className='credit-card__logo'>Logo goes here</div>

<div className='credit-card__number'>{props.number}</div>

<div className='credit-card__info'>
<div className='credit-card__info_name'>
<div className='credit-card__info_label'>CARDHOLDER'S NAME</div>
<div>{props.name}</div>
</div>

<div className='credit-card__info_expiry'>
<div className='credit-card__info_label'>VALID UP TO</div>
<div>{props.expiry}</div>
</div>
</div>

</div>

);
}

Now the component should be updated with the information from the "props".

Screen Shot of the component after props.

Displaying the logo.

To display the logo, we need to import the images src/visa_logo.png and src/mc_logo.png.

import React from 'react';
import './credit-card.css';
import visaLogo from './visa_logo.png';
import masterCardLogo from './mc_logo.png';

export default (props) => {
return (
<div className='credit-card'>
<div className='credit-card__logo'>Logo goes here</div>

<div className='credit-card__number'>{props.number}</div>

<div className='credit-card__info'>
<div className='credit-card__info_name'>
<div className='credit-card__info_label'>CARDHOLDER'S NAME</div>
<div>{props.name}</div>
</div>

<div className='credit-card__info_expiry'>
<div className='credit-card__info_label'>VALID UP TO</div>
<div>{props.expiry}</div>
</div>
</div>

</div>

);
}

Once the images are imported we can use them in an img tag to show the logo.

import React from 'react';
import './credit-card.css';
import visaLogo from './visa_logo.png';
import masterCardLogo from './mc_logo.png';

export default (props) => {
return (
<div className='credit-card'>
<div className='credit-card__logo'>
<img className='logo' src={visaLogo} width="50"/>
</div>

<div className='credit-card__number'>{props.number}</div>

<div className='credit-card__info'>
<div className='credit-card__info_name'>
<div className='credit-card__info_label'>CARDHOLDER'S NAME</div>
<div>{props.name}</div>
</div>

<div className='credit-card__info_expiry'>
<div className='credit-card__info_label'>VALID UP TO</div>
<div>{props.expiry}</div>
</div>
</div>

</div>

);
}

Screen Shot of the component after logo.

But this is not what we want. The logo should be displayed based on the type of the card. We will add a new prop to denote the type of the credit card.

import { render } from 'react-dom';
import React from 'react';
import CreditCard from './CreditCard';

const mountNode = document.getElementById("app");

render(
<div className='demo-container'>
<CreditCard
type="MASTERCARD"
name="NEIL GAIMAN"
number="5241 1734 7629 0435"
expiry="04/2028"
/>
</div>,

mountNode
);

Now we will change the src/CreditCard.js to display the logo based on the type prop.

import React from 'react';

import './credit-card.css';
import visaLogo from './visa_logo.png';
import masterCardLogo from './mc_logo.png';

const cardTypeToLogo = {
'MASTERCARD': masterCardLogo,
'VISA': visaLogo
};

export default (props) => {
return (
<div className='credit-card'>
<div className='credit-card__logo'>
<img className='logo' src={cardTypeToLogo[props.type]} width="60"/>
</div>

<div className='credit-card__number'>{props.number}</div>

<div className='credit-card__info'>
<div className='credit-card__info_name'>
<div className='credit-card__info_label'>CARDHOLDER'S NAME</div>
<div>{props.name}</div>
</div>

<div className='credit-card__info_expiry'>
<div className='credit-card__info_label'>VALID UP TO</div>
<div>{props.expiry}</div>
</div>
</div>

</div>

);
}

Now MasterCard logo should be displayed insted of the Visa logo.

Screenshot of the component with the MasterCard logo.

Conclusion

If you have any questions, suggestions or feedback, please let me know. You can reach me at Twitter @HelloRenj.