React Billing Card

React Billing Card is a lighweight and cusomizable React Component for handling credit card input and billing information in your web applications. This component simplifies the process of collecting and validating payment-related data from users, making it easier to integrate [ayment processing into your react application.

Installation

npm

npm install react-billing-card

yarn

yarn add react-billing-card

Usage

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

function MyBillingForm() {
  const [creditCard, setCreditCard] = useState({
    name: "John Doe",
    number: "4111 1111 1111 1111",
    expiry: "12/25",
    cvc: "123",
    focus: "",
  });

  function handleInputChange(k, v) {
    setCreditCard({
      ...creditCard,
      [k]: v,
    });
  }

  const style = {
    front: {},
    back: {},
    common: {
      backgroundColor: "rgba(80, 80, 0, .99)",
      backgroundImage:
        "linear-gradient(30deg, rgba(161, 98, 7, .99), rgba(161, 98, 7, .55), rgba(161, 98, 7, .99))",
    },
    text_styles: {
      color: "rgba(19, 6, 6, 0.685)",
      textShadow:
        "-0.04em -0.04em 0.04em rgba(192, 192, 192, .8), 0.04em 0.04em 0.04em rgba(0, 0, 0, 0.8)",
      fontWeight: "bold",
    },
  };

  return (
    <div>
      <CreditCard
        className="shadow-lg shadow-black text-gray-600 caret-slate-300 bg-gradient-to-tr from-lime-700 via-yellow-500 to-yellow-700"
        display="both"
        config={config}
        style={style}
        value={creditCard}
        onChange={handleInputChange}
      />
    </div>
  );
}

Props

CreditCard accepts the following props:

• display - (string, optional) A string indicating which phases to display:

  • both Diplay both phases(Front and Back)
  • front-only Display only the front phase
  • back-only Display only the back phase

• value - (Object, required) a state managed object representing the fields of a credit card:

    name: 'John Doe',
    number: '4111 1111 1111 1111',
    expiry: '12/25',
    cvc: '123',
    focus: ''

- **name** - The name of the CardHolder
- **number** - Sixteen digit code
- **expiry** - The expiry date of the card
- **cvc** - Card verification code

• onChange - (function, required) - Callback function to be called when an input value changes. The function is called with two arguments: the first is the key or name of the input field, the second is the value of the input field. Use these arguments to set state accordingly.

License

This package is open-source and available under the ISC License. Feel free to use and contribute to this project on GitHub: React Billing Card on GitHub.

Issues and Contributions

If you encounter any issues or have suggestions for improvements, please open an issue on GitHub. Pull requests are also welcome!

Credits

React Billing Card is developed and maintained by Erick Obuya. It relies on various open-source packages, including React and PropTypes.

Thank you for using React Billing Card! We hope it simplifies the integration of billing information into your React applications.