Best Practice: adding credit card fields to forms

In order to comply with Payment Card Industry (PCI) data security standards, the credit card payment element of online transactions is distinct from the forms themselves. If a form is set up to collect a credit card payment, users click "Submit" and are then brought via a secure connection to a separate, short form where they fill out their payment information. If you've ever bought something from Amazon or most other e-commerce sites, you'll be familiar with the separated form process. (This compartmentalization allows the transaction details to be contained entirely within an isolated, secure environment, while the other form response details remain available on your server to be logged and reviewed at any time.)

One thing that you might do to ease the users' transition between these two forms is to change the text of the Submit button on your form to read something like "Continue to Payment >>". To find out how to do this, see our KB article, Changing the text of the Submit button.

NOTE: Do NOT add text fields to your forms meant for users to enter their credit card information. Forms Manager will store these values unencrypted, which can lead to major security issues.

The separated-forms procedure has been thoroughly tested for security, speed and convenience. Using this method, your users' credit card data and personal information is never exposed via an unsecured connection and PCI compliance is maintained. If, on the other, hand, you simply create text-entry fields on your form to capture credit card numbers, it is possible that that data could be read by a third party (think of the case of a user sitting at a coffee shop and using an open wifi connection to make a purchase from your site - there is a chance, however remote, that another customer with the right software could eavesdrop on your user's interactions with your website. Without a secured web connection, all of the information on your user's purchase could be read by the eavesdropper!)

The law is not often clear on these sorts of issues, but it is entirely possible that your institution would be liable for any financial loss incurred by a user whose identity or payment information is compromised in this manner - this is a mistake that could be very costly! For these reasons, finalsite insists that all credit card transactions take place through the established payment gateway. Fortunately, setting up a payment gateway is an easy process. Read the Knowledge Base article "Enabling payments on a form" for further details on how to setup payments on your website.

 

Accepting Payments on a Form

If you've already got a payment gateway set up, there are three simple steps to complete to designate any form for processing payments.

  • In the Payments tab, check the box for "Process payments with this form."  

  • Select the radio button of the payment gateway you want to use from the list. (In the above screenshot, the payment gateway is "Authorize.net." You might have different options depending on which payment gateway provided your school has chosen to work with, but chances are you've only got one option here.)

  • Mark at least one field as a currency field. This can be a text field, or a radio/checkbox/dropdown. This is done by adding the appropriate field to your form, hovering over the field, and clicking the yellow pencil icon to edit it. Scroll down to the "Currency Options" section, and select the checkbox there. See Adding fields to a form for more details about currency fields. 

That's all! There's no need to add anything to the form itself. If everything is set up correctly, as soon as the user clicks Submit they will be brought to the separate payment form automatically.

For more information about the various form elements available in Forms Manager and how they can be used to create payment options, read the "Adding fields to a form" Knowledge Base article.

Enable Secure Connections on the Form Page

After creating a form, you must place it in a Form element on a page in order to display it on your site. The best practice is to establish a secure connection with a user's browser whenever you display a form that collects payments. (Browsers always establish a secure connection already when connecting to the payment gateway. Establishing a secure connection with the page that the form is on wraps that secure payment connection, as well as the entire connection to your school's site, in another layer of encryption. This allows your site to secure not only the user's credit card information, but also any personal data you may collect on your form.) 

To do this, go to the page that displays your form, and click the pink gear icon at the bottom to bring up Page Settings.

2017-05-04_08-06-29.png

The Page Settings window pops up. On the "General" tab, select the checkbox labeled "Serve page over secure (SSL) connection":

2017-05-04_08-07-19.png

Save and publish the page. The browser should now show a green "Secure" indicator to the left of the site URL in the address bar. 

To allow users to pay with something other than a credit card, follow the steps in the article, "Configuring alternate payment methods?"

Was this article helpful?
2 out of 2 found this helpful
Have more questions? Submit a request

Comments

0 comments

Please Sign in to leave a comment if you don't see the comment box below.