Creating the settings control

This configuration settings control is displayed in the backend page for creating a payment method. It contains the input fields for the properties of the payment settings class.

The control consists of a template, a class and a client component (.js file). In the template you define an UI input field for each property of the payment processor settings class. When the payment method is saved, the values in the input field get serialized into a string and set to the PaymentProcessorSettings property of the PaymentMethod instance. Basically, this control represents a field that consists of other fields.

To create the custom control, you must perform the following:

1. Create a class for the custom control.
   You have to create a class that inherits the FieldControl class. In it you will wire up the template and the client component.
2. Create a template for the control.
   In the template you create an input field for each property of the settings. These input fields will appear in the backend when you try to create a payment method of this type.
3. Create a script for the control.
   In the client script you read the values from each field and return them serialized as a string via a function.