Payment Card UI Section

Overview

For applications where payment information needs to be captured this UI recipe provides a visual and interactive way for users to enter their credit or debit card details.

Key Features & Functionality

• It detects the type of the card as soon as the user starts typing the card number. Supported card types are American Express, Diners, Discover, JCB, Laser, Maestro, Mastercard, and Visa.
• It provides visual clarity to the user because the information entered will be reflected in the sample card displayed in the UI as soon as typed.
• Users will be able to flip the card and view the information on both sides.
• Since most of the validations are handled in this section itself, developers need not build individual validations for each field.

Note this section only provides an UI section for display. Security and backend considerations for storing and displaying this information should be accounted for by the developer.

Pre-requisites: 'Regular Expression Functions' plugin must be deployed in the environment