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 GiveWP 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. Let the user know that is why an email address is requested to offer reassurance and follow best practices.
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.
Wrapping Up
There are many newer and far easier solutions to collect payments. Your form plugin most likely has an upgrade that connects to payment gateways and does all the heavy-lifting for you. In addition, there are various resources for different types of payments or donations that provide robust benefits in their niche.
For more information on working with my on your website, please visit my web design and development page or contact me.