How to Create Credit Card Form Component in React Js

Building a credit card payment system in React can be challenging, but with the right approach and the right libraries, it can be done efficiently.

In this detailed post, we will look at how to create a credit card payment form component in React js framework using the react-credit-cards-2 library.

Not just that, but we will also learn how to implement validation in credit cards using React js.

To build the credit card payment system in React, we can use react-credit-cards-2 and bootstrap libraries.

Credit cards can be a convenient way to make purchases; you can shop online and make domestic as well as international payments.

A credit card is a plastic card that allows the cardholder to borrow funds from a financial institution up to a pre-approved limit to make purchases or withdraw cash.

Credit cards have a unique card number, expiry date, and security code used to authorize transactions.

How to Build and Validate a Credit Card Form in React Js

• Step 1: Setup a React Environment
• Step 2: Install Required Packages
• Step 3: Create Functional Component
• Step 4: Build Credit Card Component
• Step 5: Update Main Entry
• Step 6: Evoke React Server

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 payment bootstrap --legacy-peer-deps

Create Functional Component

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

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

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

import React, { useState } from "react";
import CreditCard from "react-credit-card";
function CreditCardUi() {
  return (
    <div></div>
  )
}
export default CreditCardUi

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/CreditCardUi.js.

import React, { useState } from "react";
import Cards from "react-credit-cards-2";
import "react-credit-cards-2/dist/es/styles-compiled.css";
function CreditCardUi() {
  const [payment, setPayment] = useState({
    number: "",
    name: "",
    expiry: "",
    cvc: "",
    issuer: "",
    focused: "",
    formData: null,
  });
  function handleCallback({ issuer }, isValid) {
    if (isValid) {
      setPayment({ issuer });
    }
  }
  function onInputFocus({ target }) {}
  function onInputUpdate({ target }) {
    console.log({ [target.name]: target.value });
  }
  function handleSubmit(e) {}
  const { name, number, expiry, cvc, focused, issuer } = payment;
  return (
    <div key="Payment">
      <div>
        <Cards
          number={number}
          name={name}
          expiry={expiry}
          cvc={cvc}
          focused={focused}
          callback={handleCallback}
        />
        <form onSubmit={handleSubmit}>
          <div className="form-group mb-3 mt-4">
            <input
              type="tel"
              name="number"
              className="form-control"
              placeholder="Card Number"
              pattern="[\d| ]{16,22}"
              required
              onChange={onInputUpdate}
              onFocus={onInputFocus}
            />
          </div>
          <div className="form-group mb-3">
            <input
              type="text"
              name="name"
              className="form-control"
              placeholder="Name"
              required
              onChange={onInputUpdate}
              onFocus={onInputFocus}
            />
          </div>
          <div className="row mb-3">
            <div className="col-6">
              <input
                type="tel"
                name="expiry"
                className="form-control"
                placeholder="Valid Thru"
                pattern="\d\d/\d\d"
                required
                onChange={onInputUpdate}
                onFocus={onInputFocus}
              />
            </div>
            <div className="col-6">
              <input
                type="tel"
                name="cvc"
                className="form-control"
                placeholder="CVC"
                pattern="\d{3,4}"
                required
                onChange={onInputUpdate}
                onFocus={onInputFocus}
              />
            </div>
          </div>
          <input type="hidden" name="issuer" value={issuer} />
          <div className="d-grid">
            <button className="btn btn-dark">Confirm</button>
          </div>
        </form>
      </div>
    </div>
  );
}
export default CreditCardUi;

Update Main Entry

Now that we have completed the development of the CreditCardUi 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 CreditCardUi from "./components/CreditCardUi";
function App() {
  return (
    <div className="container mt-5">
      <h2 className="mb-4">React Credit Card Payment UI Componenet Example</h2>
      <CreditCardUi />
    </div>
  );
}
export default App;
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import CreditCardUi from "./components/CreditCardUi";
function App() {
  return (
    <div className="container mt-5">
      <h2 className="mb-4">React Credit Card Payment UI Componenet Example</h2>
      <CreditCardUi />
    </div>
  );
}
export default App;

Evoke 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

Summary

In this tutorial, we have learned how to design a slick credit card UI form component in React using React credit cards package.

It offers a simple credit card UI component that; generally contains the credit card number, cardholder name, credit card expiry date, and CVC number.