I recently adding a payment form to WordPress using the Authorize.net payment gateway. I found some great resources that I want to share as well as the steps I took to implement the HTML5 payment form.

Four steps towards implementing the secure payment (or donation) form:
1. Get a dedicated IP address and SSL Certificate for your website from your web host.
2. Choose a WordPress plugin to provide the form and payment gateway connection.
3. Get the API login ID and Transaction Key from your Authorize.net account.
4. Create a Great User Experience.

1. Get a dedicated IP address and SSL Certificate for your website from your web host.

When taking payments or donations on your website it is very reassuring to your visitors to have a secure website with the green lock next to the URL. The easiest option is to purchase an SSL certificate from your hosting provider.

Login to the cPanel of your web host and purchase the SSL Certificate which will also automatically come with a dedicated IP address.

Next, there are 4 basic steps to configuring your WordPress website to use an SSL certificate and enforcing HTTPS for your whole site:

  • Update your site URL – go to “Settings > General” and change both the “WordPress Address” and “Site Address” urls to use “https://” instead of “http://”
  • Force HTTPS throughout the site – make sure that ALL of your traffic is loaded via https with the WordPress Force HTTPS plugin
  • Resolve any insecure elements on your pages – use the Better Search Replace plugin to update “http” to “https” on all images in your database
  • Update Google Webmaster Tools and Google Analytics – let Google know that your pages should be indexed using https

More detailed instructions and the source of these 4 steps are on this Give page.

Test your site at Why No Padlock to see if there are additional insecure elements.

2. Choose a WordPress plugin to provide the form and payment gateway connection.

There are many good plugins that offer payment and donation forms, as well as complete eCommerce solutions.

In my case, I needed a simple form where the customer could write in the amount themselves. Writing in a custom amount is an add-on for many plugins and also eliminated the Authorize.net Simple Checkout option.

I chose the wp-donate plugin for its simplicity and ease of use. Using this plugin, I added the shortcode [Display_Donate] to a new page and a form collecting name, address, and payment information was added to the page. The form uses the theme styles and integrates well.

3. Get the API login ID and Transaction Key from your Authorize.net account.

Log in to your Authorize.net account to get these and add them to the plugin. Please note that requesting a new transaction key invalidates the previous one within 24 hours.

Test the form and check that the payment details are processing in your Authorize.net account.

4. Create a Great User Experience.

Use these HTML5 Form Input Types for a better mobile friendly user experience:

  • Email input type ensures a valid email address will be added – input type=”email”
  • Tel input type utilizes the standard phone keyboard on mobile devices – input type=”tel”

Provide an email receipt.
My form collects email addresses in order to send a payment confirmation. Letting the user know that is why an email address is requested is reassuring and a good practice.

With Authorize.net, email receipts can be enabled directly in your account. Login to Authorize.net and go to the account page and find Email Receipt under the transaction format settings. Check to enable email confirmation and add a custom Email header and footer. An email receipt will go out to your customer with their order, payment, and merchant information.

View the SHED Children’s Campus payment form and see my design notes for the site.