PECreditCardForm class

A secure form for entering a customer's credit card information safely.

PECreditCardForm provides an interface for users to input their credit card details securely. It integrates with PayEngine to tokenize the card details and forward them to a PCI-compliant third party without storing sensitive information locally.

In addition to the standard credit card fields, developers can specify extra fields using PayEngineField.

How It Works

Create an instance of PECreditCardForm, optionally passing additional fields.
Display the form inside your UI.
Once the user enters their details, call tokenize to securely process and retrieve a tokenized version of the card.
Use showKeyboard and hideKeyboard to manually control the keyboard.

Example Usage

class CreditCardScreen extends StatefulWidget {
  const CreditCardScreen({Key? key}) : super(key: key);

  @override
  State<CreditCardScreen> createState() => _CreditCardViewState();
}

class _CreditCardViewState extends State<CreditCardScreen> {
  late PECreditCardForm creditCardForm;
  Map<dynamic, dynamic> result = {};

  @override
  void initState() {
    super.initState();
    var additionalFields = [
      PayEngineField('address_zip', 'text', 'Zip Code', true,
          keyboardType: PayEngineKeyboardType.number,
          pattern:
              r"^(?:\d{5}(?:-\d{4})?|[ABCEGHJKLMNPRSTVXY]\d[A-Z] ?\d[A-Z]\d)$"),
    ];
    creditCardForm = PECreditCardForm(additionalFields: additionalFields);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Credit Card')),
      body: SafeArea(
        child: Column(
          children: [
            const SizedBox(height: 20),
            Container(padding: const EdgeInsets.all(10), child: creditCardForm),
            OutlinedButton(
              onPressed: () async {
                creditCardForm.showKeyboard();
              },
              child: const Text('Show Keyboard'),
            ),
            OutlinedButton(
              onPressed: () async {
                creditCardForm.hideKeyboard();
              },
              child: const Text('Hide Keyboard'),
            ),
            OutlinedButton(
              onPressed: () async {
                final additionalData = {"address_street": "123 My Street"};
                try {
                  final response = await creditCardForm.tokenize(Config.merchantId, additionalData);
                  setState(() {
                    result = response.toJson();
                  });
                } catch (e) {
                  setState(() {
                    result = {'error': e.toString()};
                  });
                }
              },
              child: const Text('Tokenize'),
            ),
            Container(
              height: 300,
              padding: const EdgeInsets.all(20),
              color: Colors.yellow[100],
              child: Text("$result"),
            ),
          ],
        ),
      ),
    );
  }
}

Features:

Securely collects bank account details.
Supports additional customizable fields.
Provides methods to show/hide the keyboard.
Allows tokenizing the entered data for safe storage.

Inheritance

Implemented types

Widget

Constructors

PECreditCardForm({Key? key, List<PayEngineField>? additionalFields}): Creates a PECreditCardForm instance.

Properties

additionalFields → List<PayEngineField>?: Optional list of additional fields to include in the form.
final
hashCode → int: The hash code for this object.
no setterinherited
key → Key?: Controls how one widget replaces another widget in the tree.
finalinherited
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited

Methods

createElement() → StatefulElement: Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<PECreditCardForm>: Creates the mutable state for this widget at a given location in the tree.
override
debugDescribeChildren() → List<DiagnosticsNode>: Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void: Add additional properties associated with the node.
inherited
hideKeyboard() → void: Hides the keyboard for the input fields.
noSuchMethod(Invocation invocation) → dynamic: Invoked when a nonexistent method or property is accessed.
inherited
showKeyboard() → void: Shows the keyboard for the input fields.
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode: Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
tokenize([String? merchantId, Map<String, String>? additionalData]) → Future<PECard>: Tokenizes the entered card details and returns a PECard object.
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String: A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String: Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String: Returns a one-line detailed description of the object.
inherited
toStringShort() → String: A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool: The equality operator.
inherited