How to Create Interactive Credit Card Component in React 18

Last Updated on by in React JS

Credit cards provide a convenient way to make purchases, assisting in online shopping and handling both local and global payments. Developing an interactive Credit Card UI in React may pose a challenge, but what if we assured you that it can be accomplished without excessive effort?

In this post, we will show you how to create an interactive credit card form UI component in React application using the react-credit-cards-2 library.

We’re developing a React credit card component capable of showcasing real-time updates of all entered credit card values on the screen. This component not only displays the user’s credit card details as they enter them into the form but also showcases the specific credit card company being used for the payment through an elegant animation.

In React, to build animated credit card UI interface for a payment system, you can utilize the react-credit-cards-2 library. This will allow users to use credit cards in React for authorize transactions with specific card details such as the card number, expiry date, and security code.

Setup a React Environment

Before we put our hands on the first step, we must set up React environment.

You can configure React project in a couple of ways.

Either you can take the help of Create React App tool or quite comfortably manually set up React environment.

If you’re using Create React App, you can create a new project by running the subsequent command:

npx create-react-app my-react-app

You have to enter into the project.

cd my-react-app

Install Required Packages

Further, you have to install the react-credit-cards-2, payment and Bootstrap libraries. You can do this by executing the below commands:

npm install react-credit-cards-2 bootstrap --legacy-peer-deps

Create Functional Component

In the subsequent step, you must create the components folder; make sure to create the CreditCardForm.js file.

This core JavaScript function handles the credit card component in our React environment.

Update given code in the components/CreditCardForm.js file.

import React, { useState } from "react";
import CreditCard from "react-credit-card";

function CreditCardForm() {
  return (
    <div></div>
  )
}

export default CreditCardForm

Build Credit Card Form Component

This step will show you how to create a credit card form using an external library.

The React credit card from component offers credit card input that is easy to integrate into React and offers extensive props to validate the credit card module in React.

Now, you need to insert the below code in the components/CreditCardForm.js.

import React, { useState } from "react";
import Cards from "react-credit-cards-2";
import "react-credit-cards-2/dist/es/styles-compiled.css";

const CreditCardForm = () => {
  const [state, setState] = useState({
    number: "",
    name: "",
    expiry: "",
    cvc: "",
    name: "",
    focus: "",
  });

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setState((prev) => ({ ...prev, [name]: value }));
  };

  const handleInputFocus = (e) => {
    setState((prev) => ({ ...prev, focus: e.target.name }));
  };

  return (
    <div>
      <Cards
        number={state.number}
        expiry={state.expiry}
        cvc={state.cvc}
        name={state.name}
        focused={state.focus}
      />
      <div className="mt-3">
        <form>
          <div className="mb-3">
            <input
              type="number"
              name="number"
              className="form-control"
              placeholder="Card Number"
              value={state.number}
              onChange={handleInputChange}
              onFocus={handleInputFocus}
              required
            />
          </div>
          <div className="mb-3">
            <input
              type="text"
              name="name"
              className="form-control"
              placeholder="Name"
              onChange={handleInputChange}
              onFocus={handleInputFocus}
              required
            />
          </div>
          <div className="row">
            <div className="col-6 mb-3">
              <input
                type="number"
                name="expiry"
                className="form-control"
                placeholder="Valid Thru"
                pattern="\d\d/\d\d"
                value={state.expiry}
                onChange={handleInputChange}
                onFocus={handleInputFocus}
                required
              />
            </div>
            <div className="col-6 mb-3">
              <input
                type="number"
                name="cvc"
                className="form-control"
                placeholder="CVC"
                pattern="\d{3,4}"
                value={state.cvc}
                onChange={handleInputChange}
                onFocus={handleInputFocus}
                required
              />
            </div>
          </div>

          <div className="d-grid">
            <button className="btn btn-dark">Confirm</button>
          </div>
        </form>
      </div>
    </div>
  );
};

export default CreditCardForm;

Update Main Entry

Now that we have completed the development of the card component.

Now, it needs to be imported in the main entry of React; therefore, you have to add the given code in the src/App.js file.

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import CreditCardForm from "./components/CreditCardForm";

function App() {
  return (
    <div className="container mt-5">
      <h2 className="mb-4">React Animated Credit Card UI Example</h2>

      <CreditCardForm />
    </div>
  );
}

export default App;

Run React Server

To start a server for a React application, you have to type and execute a command in the terminal that starts the development server.

npm start

After the command got executed. Wait for a couple of seconds, as soon as the server starts.

The terminal will display certain messages indicating that the server is starting, and once it’s invoked, it will automatically serve the app in your default web browser.

http://localhost:3000

How to Create Credit Card Form Component in React Js

Summary

The react-credit-cards-2 is a library specifically designed for React, It’s an updated version of the “react-credit-cards” library. We took help of this versatile library to create and manage credit card components or user interfaces within React applications.

You can use robust features of this plugin to build animated credit card forms in React, to display credit card forms, manage card details, and potentially simulate transactions or payment-related animations within a React-based environment.

In this tutorial, we have learned how to design visually appealing credit card UI component in React, enhancing the user experience that adds dynamic beauty in web projects.

Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.