As PCI Compliance Standards for merchants grows stricter, more and more merchants are turning to the gateway-hosted payment form to guarantee PCI Comliant security. NETbilling's hosted payment form has always had customizable parameters such as background color and merchant logo, but with the HTML Template editor merchants have full control over the exact HTML comprising the payment form hosted by NETbilling.
To begin, click on Form Editor, select the form you wish to edit, and click Execute. This brings you to the standard Form Editor. Now, click on Edit HTML Template to begin making changes to the HTML template.
to
and click Apply. Now click Test again. Assuming you have the billing state configured to appear on the form, you should now see the word Province where it once said State.
That's all there is to it! Following this same procedure you can change any of the HTML to meet your needs.
Here is a brief explanation of the elements of the template editor page, from top to bottom.
The payment form ID and Name are informational. The name can be changed using the Label field in the Form Editor. (Note that the Form Editor is not the same as the HTML Template Editor.) The third item on the list shows what you are currently editing. You can edit the HTML for the receipt page by clicking RCPT, and switch back again by clicking FORM. Just be sure to click Apply to save any changes you made before you switch.
Every time you click Apply, a few basic checks are done on the HTML you entered. Any errors that were found will be posted here in red. If an error is found, your form will not have been saved.
Warnings will appear in orange. If only warnings were found, your form will have been saved but certain elements will not appear. You should make sure to correct the HTML as needed until the parsing report shows "No Problems Found" in green.
This is the actual HTML for your form or receipt. Note that there are a few custom elements that are not standard HTML. More on these in section 2.0.
Reload last saved - This will abandon any changes you made on the page and load the most recently saved template.
Load default - This will load the default template used to show the standard payment form with no customizations. After clicking Load Default you will need to click Apply to confirm, or click your browser's back button if you changed your mind.
Apply - Parses the HTML and saves if no errors were found.
Test - Shows an example payment form using the most recently saved template.
Clicking on the blue links along the left will automatically insert the appropriate pseudo-HTML at your cursor's location. More on these in Section 2.0.
Most standard HTML, JavaScript, and CSS is accepted, except for cases when security is a concern.
In addition to standard HTML, custom pseudo-HTML fields are used to encapsulate all of the dynamic aspects of a payment form such as the card number input field. Section 1.1 demonstrated an example of one of these custom fields, in which a simple <input name=bill_to_state label="State"> is expanded to become the complete input necessary for customers to type in their billing state.
A complete reference of all of the possible inputs along with explanations for each is found in the Supported Custom HTML Fields section of the template editor page.
The default template is the best reference to see how each custom field can be used. All custom fields are utilized by the default template. To see how each field should be used, load the default template, Apply, click Test, and compare the test page with the text you see in the Form HTML window. If you like you can also use your browser's View Source feature to see the exact HTML that was generated.
Note that if you click RCPT to edit the receipt page, a different (and shorter) list of custom fields is available for use. You can click Test on the receipt page to see an example receipt and to see how the HTML template corresponds to the finished result.
All custom fields have the exact same appearance and behavior as the original default payment form. In most cases, though, the HTML elements encapsulated by the custom fields all have a unique id, so you can influence their appearances by manipulating the inner ids via CSS or JavaScript. The source code of the generated HTML should be used as a reference for the exact names of each id.
Input fields such as <input name=bill_to_state label="State"> generally accept some form input from the customer visiting the payment form, such as card number and billing address. Their layout may vary; for example, the billing state will include a dropdown to select the state as well as a text input field. An arrow will appear next to any field that was required but left blank.
General fields such as <var name=currency> are miscellaneous fields that will be dynamically substituted with the appropriate text or HTML (for example, USD).
"Default" HTML tags such as <default name=body> are used to generate the familiar HTML tags with dynamically generated attributes. For example, <default name=body> will create a body tag that has a background color corresponding to the Background Color specified in the Form Editor page.
The template editor supports four conditional expressions: if, elif, else, and endif. For example,
Additional examples of conditional expressions can be found in the default template. A full list of possible values to use with 'if' and 'elif' can be found at the bottom of the Supported Custom HTML Fields section.
The standard or default hosted payment payment forms and options are created with the full functionality of the gateway in mind. However, for some media and devices, this default configuration is not the optimal solution and a mobile hosted payment form option is available. For a custom mobile payment form, once you have the Template Editor open, clicking the 'Load default (mobile)' button will prompt you to overwrite the default template by clicking the 'Apply' button. After applying, the resulting HTML template will contain <mobile> and </mobile> pseudo-tags that forego the normal default formatting.
Removing this default formatting allows for more freedom in styling the various form elements in the device window. Additionally, attribute values that would've been previously overwritten or obviated by the default formatting, such as placeholder and autocomplete attributes for input elements, can be more directly handled by the gateway.
You can include your own images easily. Just use the standard <img src="http://...">. The image will be linked to in such a way as to avoid any browser warnings about security.