I started by creating a new Canvas application, and adding the controls required for validation. I added a label and textbox for the Credit Card Number, and then an icon for showing valid number entry and another text box for displaying the proper results. This is shown in the screenshot below.
The Icon and Credit Card Type are hidden on the form, as they only get displayed based on the entry of the Credit Card number field.
For the icon property, I set the visible property to true if the length of the credit card number is between 13 and 16 digits. This is added using the following function:
For the Credit Card Type, I set the Default property to an If condition with an IsMatch function with multiple conditions.
Although this is not a complete solution as it requires some additional validation for other credit card types and support for different lengths, it is a good starting point for a solution that requires this sort of validation. The next task is to create a PCF control that provides similar functionality. The image below shows a sample of the working application.