Create the client component of the settings control

In the client component of the settings field you get the values from the input fields and serialize them as a string. This string must then be returned as the value of the custom field control.

To create the client component, you must perform the following:

1. Create a new .js file.
   In the folder of your custom payment processor, add a new JScript file.
2. Mark the file as an embedded resource.
   Right-click on the file and select Properties. Set the Build Action property to Embedded Resource.
3. Register the namespace of your custom control class.
4. Define the client class.
   You must define a client class for your custom control. It must contain a component property for each of the input fields in the template. The values of these component properties will be the client IDs of the respective controls. Additionally you have to add a component property that will represent the delegate for the processing mode control. This will allow you to show/hide input fields when the  value of the processing mode field gets changed.
5. Define the prototype for the client class.
6. In the prototype definition create the needed functions.
   You will require the following functions:
• initialize
  This function is called when the control is initialized. In it you create the delegates and assign them to the respective events. In this example, you have to create a delegate for the ValueChanged event of the processing mode control.
• dispose
  In this function you have to call the base dispose method of the client class and to delete the delegate for the load event.
• validate
  In this function you validate the values in the input fields. It must return true if the values are valid. You can specify the validation rules in the template. For more information, see For developers: Create the template of the settings control.
• reset
  In this function you setup the default values for the fields.
• get_value
  This function must return a serialized string containing the values of the input fields.
• set_value
  In this function you set the deserialized sequence of values to the _state property. If the application is loaded, call the updateUI function.
• isChanged
  Implement this function if you want to specify whether the value has changed.
• _applicationLoaded
  This is an event handler for the load event of the application. In it, set the app_loaded flag to true and call the updateUI function.
• _processingModeControlHandler
  This is an event handler for the ValueChanged event of the processing mode field. Hide or show the respective section in the UI depending on the value of the processing mode control.
• updateUI
  Update the values of the fields and the visibility of the sections.
• _getSettingsObject
  In this function, get the values of the input fields and return them to the calling function.
• _isArray
  This is a helper function, that must determine whether a variable is an array or not. It is used in the _getSettingsObject.
7. Create getter and setter functions.
   Create a get and set function for each of the component properties that represent an input field.
8. Register the client class.
   To register the client class, call its registerClass function and the full name of its type, and its base type.

Use the following code sample: