Products Technologies Demo Docs Blog Support Company

Building a Credit Card Payment Form with Conditional Instructions

You can use the Document Viewer to deploy document forms with form field elements that contain conditional instructions for users to complete. This article shows how to use the Document Editor to set up and deploy a credit card payment form with credit card validation logic.

Building a Credit Card Payment Form with Conditional Instructions

TX Text Control provides a unique way to create documents with fillable form elements such as form text boxes, checkbox fields, and drop-down elements. These forms can be created like mail merge templates and dynamically populated with values from form data sources. Using conditional statements, it is possible to add dependencies between fields based on logical operators. This allows you to add a complete workflow to forms by adding dependencies between form fields.

You can use the Document Viewer to deploy document forms with form field elements that contain conditional instructions for users to complete.

Smart Forms

Let's take a look at the simple payment form in the screenshot below:

Creating documents with TX Text Control

Creating this form layout is really easy using the word processing interface of the TX Text Control Document Editor. All you need to do is to create a document with a table structure and form fields that can be added using the Form Fields ribbon tab. This article does not describe that part, but the smart logic behind the form fields.

Download the sample form and load it into the Document Editor or the shipped Windows application TX Text Control Words.

Form Validation

In order to add conditional instructions to the form fields, you have to enable the validation by clicking the button Enable Form Validation in the Form Validation ribbon group.

Creating documents with TX Text Control

This form contains 11 conditional instructions to cover the logic and validation of a credit card. Open the instruction named Payment_Card_Number_GetValue by selecting it and clicking Edit....

Creating documents with TX Text Control

Regular Expressions

This instruction validates the payment_number form field by matching a regular expression for each payment method. For example: If the VISA checkbox is checked and the number matches the conditions that it starts with a 4 and is 12 digits long, the field is valid. Here are the characteristics of the credit cards used:

  • VISA
    • All VISA card numbers start with a 4.
    • New cards have 16 digits. Old cards have 13.
  • Mastercard
    • MasterCard numbers either start with the numbers 51 through 55 or with the numbers 2221 through 2720.
    • All cards have 16 digits.
  • AMEX
    • All AMEX cards start with 34 or 37
    • All cards have 15 digits.

Enable Checkboxes Automatically

To improve the user experience, the checkbox can be set automatically by matching the credit card number. This can be seen in the instruction Payment_Card_Number_VISA_SetValue for matching VISA credit card numbers:

Creating documents with TX Text Control

If the credit number is recognized as a VISA card, the appropriate checkbox is checked and others are unchecked. When you load a document with form fields and conditional instructions into the Document Viewer, the form fields are automatically enabled:

Creating documents with TX Text Control

The other conditional instructions are simpler and check for non-empty fields. The only more complex field is CCV, as the validity of this field again depends on the credit card selected. 3 digits for VISA and Mastercard and 4 digits for AMEX.

Creating documents with TX Text Control

Validate using JavaScript

If all fields are filled in correctly, the forms.validate JavaScript method can be used to validate the form fields.

Creating documents with TX Text Control

You can download this sample form here for your own testing.

Stay in the loop!

Subscribe to the newsletter to receive the latest updates.

Related Posts

ASP.NETASP.NET CoreForms

Streamline Data Collection with Embedded Forms in C# .NET

Discover how to enhance your C# .NET applications by embedding forms for data collection. This article explores the benefits of using Text Control's ASP.NET and ASP.NET Core components to create…


ASP.NETASP.NET CoreDocument Viewer

High-Performance Text Replacement in Large DOCX Files using C# .NET

Learn how to efficiently replace text in large DOCX files using C# .NET and the ServerTextControl component from Text Control. This article demonstrates the performance benefits of using the…


ASP.NETASP.NET CoreDocument Viewer

Document Viewer 33.2.1 Released: New Event and Bug Fixes

This service pack includes important bug fixes and improvements to enhance the stability and performance of the Document Viewer. In addition, a new event has been introduced to provide developers…


AngularASP.NETBlazor

Building an ASP.NET Core Backend (Linux and Windows) for the Document Editor…

This article shows how to create a backend for the Document Editor and Viewer using ASP.NET Core. The backend can be hosted on Windows and Linux and can be used in Blazor, Angular, JavaScript, and…


ASP.NETBlazorASP.NET Core

TX Text Control Document Editor and Viewer for Blazor Released

We are very happy to announce the immediate availability of TX Text Control packages for Blazor. This article gives an overview of the available packages and how to use them.