kenresoft / payment_card

A custom widget for creating beautiful payment(eg. credit or debit) cards on flutter. The PaymentCard class is a Flutter widget that displays a payment card with customizable properties such as the card number, card type, card holder name, and background image.

PaymentCard

Overview

The PaymentCard widget is a flexible Flutter widget designed to display payment card information with customizable properties. It enables developers to showcase payment card details such as the card number, card type, cardholder name, and background image in a visually appealing manner.

Table of Contents

• Installation
• Usage
• Features
• Examples
• Screenshots
• Contributing
• License

Installation

To use PaymentCard in your Flutter project, add the following dependency to your pubspec.yaml file:

dependencies:
  payment_card: ^0.0.1

Then, run:

flutter pub get

Usage

Import the package:

import 'package:payment_card/payment_card.dart';

Add the PaymentCard widget to your UI, providing the necessary parameters:

PaymentCard(
  cardIssuerIcon: Icons.credit_card,
  backgroundColor: Colors.blue,
  currency: 'USD',
  cardNumber: '1234567890123456',
  validity: '12/24',
  holder: 'John Doe',
  cardType: CardNetwork.visa,
  cardTypeTextStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
  cardNumberStyles: CardNumberStyles.lightStyle1,
  margin: EdgeInsets.all(16),
)

Features

• Customization: Customize various aspects of the payment card, including the card issuer icon, background color, background image, currency, card number, validity, cardholder name, card type, and more.
• Flexible Design: The PaymentCard widget allows for flexible design configurations, enabling developers to tailor the appearance of the payment card to suit their app's visual style and branding.
• Easy Integration: Integrating the PaymentCard widget into Flutter projects is straightforward, making it accessible to developers of all skill levels.
• Highly Configurable: With support for customizing card number styles, card type text styles, and margins, developers can fine-tune the presentation of payment card details to meet specific requirements.

Examples

Here's a basic example demonstrating the usage of the PaymentCard widget:

import 'package:flutter/material.dart';
import 'package:payment_card/payment_card.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.black12,
        body: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                buildPaymentCardExample1(),
                const SizedBox(height: 16),
                buildPaymentCardExample2(),
                const SizedBox(height: 16),
                buildPaymentCardExample3(),
                const SizedBox(height: 16),
                buildPaymentCardExample4(),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget buildPaymentCardExample1() {
    return const PaymentCard(
      cardIssuerIcon: CardIcon(icon: Icons.credit_card),
      backgroundColor: Colors.blue,
      backgroundGradient: LinearGradient(
        colors: [Colors.purple, Colors.indigo],
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
      ),
      currency: Text('EUR'),
      cardNumber: '1234567890123456',
      validity: '10/24',
      holder: 'Jane Doe',
      isStrict: false,
      cardNetwork: CardNetwork.visa,
      cardTypeTextStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
      cardNumberStyles: CardNumberStyles.darkStyle4,
      backgroundImage: null,
    );
  }

  Widget buildPaymentCardExample2() {
    return const PaymentCard(
      cardIssuerIcon: CardIcon(icon: Icons.credit_card),
      currency: Text('GBP'),
      cardNumber: '1234567890123456',
      isStrict: false,
      validity: '08/23',
      holder: 'John Smith',
      cardNetwork: CardNetwork.mastercard,
      cardTypeTextStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: Colors.white),
      cardNumberStyles: CardNumberStyles.lightStyle2,
      backgroundImage: null,
      backgroundColor: Colors.grey,
    );
  }

  Widget buildPaymentCardExample3() {
    return const PaymentCard(
      cardIssuerIcon: CardIcon(icon: Icons.credit_card),
      backgroundColor: Colors.green,
      backgroundImage: null,
      currency: Text('USD'),
      cardNumber: '1234567890123456',
      validity: '06/22',
      holder: 'Alice Johnson',
      isStrict: false,
      cardNetwork: CardNetwork.americanExpress,
      cardTypeTextStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
      cardNumberStyles: CardNumberStyles.lightStyle3,
    );
  }

  Widget buildPaymentCardExample4() {
    return const PaymentCard(
      cardIssuerIcon: CardIcon(icon: Icons.credit_card),
      backgroundColor: Colors.orange,
      currency: Text('USD'),
      cardNumber: '1234567890123456',
      validity: '09/25',
      holder: 'Robert Brown',
      isStrict: false,
      cardNetwork: CardNetwork.discover,
      cardTypeTextStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
      cardNumberStyles: CardNumberStyles.darkStyle5,
      backgroundImage: null,
    );
  }
}

Screenshots

Screenshot 1	Screenshot 2	Screenshot 3

Screenshot 4	Screenshot 5	Screenshot 6

Contributing

Contributions are welcome! Feel free to open issues or submit pull requests.

• Issues: If you encounter any bugs, have feature requests, or want to suggest improvements, please open an issue on our GitHub repository. Provide as much detail as possible to help us understand the problem or idea better.

• Pull Requests: If you'd like to contribute code changes, feel free to submit a pull request. Before doing so, make sure to fork the repository and create a new branch for your changes. Follow the existing coding style and guidelines, and write clear and concise commit messages. Your pull request will undergo review, and we'll work together to ensure the changes align with the project's goals.

• Feature Requests: If you have ideas for new features or enhancements, please open an issue to discuss them. We value community feedback and want to ensure that new features align with the project's direction and objectives.

• Spread the Word: Help us grow the FontResoft community by sharing the project with others. Whether through social media, blog posts, or word of mouth, spreading the word about FontResoft helps attract more users and contributors.

License

This project is licensed under the BSD 3-Clause License - see the LICENSE file for details.

payment_card's Issues

Add input validation to ensure that the input argument is a valid string.

If the input argument in the space function is not a string, the function will throw an error.

Add a check to the space function to ensure that the number of divisions is not greater than the length of the input string.

If the input string has leading or trailing spaces, the space function will not remove them.

Add support for different card backgrounds such as gradients and images from URLs.

Add support for different card backgrounds such as gradients and images from URLs.

Check if the input string should be validated strictly.

Add logic which checks if the input string should be validated strictly using the first character of the input string.

Add support for different card types such as American Express, Discover, and JCB.

Add support for different card types such as American Express, Discover, and JCB.

Add support for different card issuer icons.

Add support for different card issuer icons.

If the cardNumber parameter is null, the widget will throw an error.

Add an optional argument to the space function to allow the user to specify the number of divisions.

If the divisions function returns 0, the space function will throw an error when trying to divide by 0.