React Templates & Themes Logo React Templates & Themes
React Credit Cards screenshot

React Credit Cards

Author Avatar Theme by Amaroteam
Updated: 28 Mar 2022
2608 Stars

Beautiful credit cards for your payment forms

Github Live Preview

Categories

Scss

Overview

The React Credit Cards is a slick credit card component designed for React projects. It supports all credit card issuers available in Payment plus Hipercard, including a Brazilian credit card. The component allows users to display credit card information such as the card number, expiry date, CVC, and more in a visually appealing manner.

Features

  • Name: Displays the name on the card.
  • Number: Shows the card number.
  • Expiry: Indicates the card expiry date.
  • CVC: Displays the Card CVC/CVV code.
  • Focused: Highlights the focused card field (name, number, expiry, or CVC).
  • Locale: Localization text can be customized.
  • Placeholders: Customizable placeholder text.
  • Preview: Ability to show scrambled data on the card.
  • Issuer: Set the card issuer for the preview mode.
  • Accepted Cards: Option to limit the accepted card types.
  • Callback: A function that triggers when the card number changes.

Installation

To install the React Credit Cards component, ensure to import the styles using either SASS or CSS in your project:

npm install react-credit-cards

For SASS:

import 'react-credit-cards/lib/styles.scss';

For CSS:

import 'react-credit-cards/es/styles-compiled.css';

Summary

The React Credit Cards component is a versatile tool for displaying credit card information in React applications. With support for various credit card issuers and customizable features like localization, placeholder text, and styling options, this component provides a visually appealing way to showcase credit card details in your project.