Predicta Lab - React Credit Card

An animated Credit Card component, built with React 18 and Typescript

Screenshot

Installation

npm i @predictalab/react-credit-card

https://www.npmjs.com/package/@predictalab/react-credit-card

Usage

import CreditCard from 'predictalab-react-credit-card'

const Example = () : JSX.Element => {
    return (
        <CreditCard
            gradientStartColor: "#113e9f"
            gradientEndColor: "#3083f7"
            buttonColor: "#113e9f"
            buttonTextColor: "#fff"
            submitAction: (values) => console.log(values)
        />
    )
}

export default Example

Props and types

type ComponentProps = {
  gradientStartColor: string,
  gradientEndColor: string,
  buttonColor: string,
  buttonTextColor: string,
  translations?: TextsTypes,
  submitAction: (creditCardInfo: CreditCardTypes) => void,
};

// Returned in the 'submitAction' function
type CreditCardTypes = {
  number: string,
  name: string,
  month: number,
  year: number,
  cvv: string,
  type: string,
  flipped: boolean,
};

// Can be provided to translate the module
type TextsTypes = {
  "Card holder": string,
  "FULL NAME": string,
  Expires: string,
  YY: string,
  MM: string,
  "Card number": string,
  "Card holder's name": string,
  "Expiration date": string,
  Month: string,
  Year: string,
  "Proceed to checkout": string,
  "Get back to credits selection": string,
};

Contribution

Feel free to contribute to this project by sending your custom PR