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

Basic knowledge of HTML and CSS.
Basic knowledge of JavaScript and ES6 features.
Basic knowledge of React. The official tutorial by the React team is a good place to start.
You will need the latest version of Node and npm insatlled on your computer. You can follow Tania Rascia's guide How to Install and Use Node.js and npm (Mac, Windows, Linux).

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 first line imports 'React' from the ReactJS library.
The second line exports a function that returns a React element. This function is our React Component

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.

The top section where the logo shows up
The middle section where the card number is shown
and
The bottom section where the card owner's name and the expiry date are shown.

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:

The card number.
The name of the owner of the card.
The expiry date.

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>
    );
}

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.