Last updated on February 20, 2019.

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. Many hosts offer a free SSL Certificate from Let’s Encrypt and will install it and keep it updated for you. If that is not an option, you can purchase an SSL certificate.

Login to the cPanel of your web host and look for the Security section. Click on Let’s Encrypt or SSL Manager to purchase an SSL Certificate.

If your hosting company does not offer the free Let’s Encrypt SSL certificate option, you may want to choose another host. See my post on How to Choose a Website Hosting Company.

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

I go into more details in my post on Securing Your Website with 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.

As I already use Gravity Forms, I purchased the elite license to get the Authorize.net capability. Most paid form plugins will offer a payment solution from Authorize.net.

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.

See my design notes for the site.