For an experienced developer, integrating payments is a pretty easy task these days. Payment gateways are coming up with new APIs, tools, and plugins to make payments simple to integrate. Now, integrating payment processing with WordPress is easy for everybody else.

I just took an in-depth look at the newly released PaymentSpring integration for WordPress and am very pleased. So now, I’ll explain how their integration works, go over a few features, and even dispel a few myths about payments in general.

We set up a full integration that you can play with over here.

You can’t run away from your PCI compliance obligations

If you plan to take payments in any form, you have to be willing and able to ensure a few minimum points of security. The good news is, this set of requirements is amazingly simple compared to the compliance obligations processors have to maintain.

1. Keep your server up-to-date. If you’re on a shared or managed host, they should be taking care of this for you, but if you’re on a bargain brand host, they may not do this for you.
2. Use proper SSL on any pages that host payment forms, even if the cardholder information is sent off-site and never touches your actual server.
3. Ensure that your WordPress plugins are always up-to-date. It is also a good idea to only use reputable plugins and read through the code when updates are released to make sure nothing bad slipped in.

Why PaymentSpring?

PaymentSpring is a local company here in Lincoln, and I spent about two years as the lead developer for the project before returning to my team at Market last summer. Payments had always been an area that fascinated and slightly terrified me, so it was a great opportunity to immerse myself in something new and learn.

Over the years, Market has hosted sites on a variety of platforms and we’re seeing a lot of demand for premium WordPress hosting, so we have recently needed to dive deep into the various payment options for our customers’ sites. I’m surely a little biased toward them because of our history, but I’m also familiar enough with the quirks of payment systems to understand what is needed for a great integration.

Why not Stripe, Braintree, PayPal, or some other processor?

I have used most of the new payment services, and for developers, they are pretty great. I’m sure getting any of them functioning nicely within WordPress would be easy. Log into WordPress and do a search for “payment form” in the plugins area. The list of options goes on forever, but most of them aren’t official plugins, and non developers can’t do much if they are buggy or broken.

I installed several of the more popular Stripe plugins, for instance, and was able to break their validation rather easily, which resulted in multiple charges and form submissions that didn’t have proper payment on the other side. Some of the plugins have really dense configuration processes and require you to map fields in some pretty bizarre ways. Dig around, and think about this from a non-dev perspective who already has a bias for one company or another. The PaymentSpring plugin has done the best overall job of simplifying the install, configuration, and integration while getting validation and security right.

Ready to go? Let’s do this.

The PaymentSpring WordPress integration uses Gravity Forms as its base. If you aren’t already using Gravity Forms, spend the $39 on a license (or if you are a designer/developer, you can pick up an unlimited license and use it on your customers’ sites).

To install Gravity Forms, log into your admin area and click ‘Plugins -> Add New.’ Upload the zip file Gravity Forms sent you, click ‘Activate,’ and then edit the gravityforms.php file and add your license.

Next, go to the GitHub repository for the PaymentSpring WordPress plugin and click the ‘Download Zip’ button to get the latest version. Back in your plugins area, click ‘Add New,’ choose the proper zip file and activate it.

Hop over to the PaymentSpring website real quick and sign up for a free account. Log into your new account and hit the ‘Account’ tab so we can get your test API keys. Scroll down and you’ll see an area with some masked keys.

For your safety, keys can only be displayed once, when they are initially created, so go ahead and click ‘Generate New Keys,’ then copy both the Test API Key and the Test Public API Key to somewhere safe. You’re done in there for now, but once you are finished testing this integration, you’ll go back into your PaymentSpring account to request activation so you can take real money.

Back in your WordPress admin area, dive into the settings for the PaymentSpring plugin and paste your API keys into the appropriate fields.

Your first payment form

Testing your form

If you did everything correctly and you’re using https properly, your form will look like the one on this demo page. If you aren’t using https properly, then you’ll see a big red alert telling you that it’s not safe. Also, you’ll see that your payments form is in Test Mode, which is perfect. Let’s submit the form using a test card:

When you click ‘Submit,’ you’ll see a nice ajax loader, and if you mistyped any fields, it’ll show you what went wrong so you can fix it quickly. Hop back into your WordPress admin, and go to the Forms area to view the entries it created. As you’ll see, you have your amount field along with a masked card number, which is exactly what you want.

You can log into the PaymentSpring management area to view the payment transaction details and to set up fun things like receipts and other goodness. If you’re happy with how everything is working, take a few minutes and flip your account to ‘Live,’ then in the PaymentSpring WordPress plugin settings, set it to ‘Live’ as well. Now you’re ready to take real money.

Some interesting bits I noticed

Our team tried to break this plugin and we threw some weird stuff at it. Overall, it dealt with that pretty nicely; I am especially impressed with the form validation. A few issues to note:

1. When browsing non-SSL, it shows a big red alert telling you to use SSL. Nice & obvious, so you aren’t going to skip on by and not get called out on it.
2. If you don’t hook up your amount field, it won’t process the payment. ‘Amount’ is required and I can’t imagine why you’d try to submit a charge without one, so just make sure you hook the amount field up to avoid any weirdness ;)
3. Validation rocked our socks off. I have seen other form plugins & payment integrations fall flat in the validation area, so we tested this one pretty hard

Validation so nice it deserves its own section

Form validation is a nice thing to have, but it can be poorly executed… Go to your bank’s website or fill out a job application using some form an IT department made for their HR department. It’s just going to be an obnoxious mess, I guarantee. Gravity Forms has a nice foundation for validation and the PaymentSpring plugin respects it while considering a few edge cases that will save your bacon someday.

Imagine this scenario: You have a payment or donation form and you ask for something like “shirt size” as a required field. For one reason or another, the visitor skips that field and submits payment.

What should happen is, the payment part of the form should go, “Whoa, hold on here… they didn’t do something up there properly, I won’t send this payment info on for processing.” We’ve seen other integrations not do this properly and it lead to customers being charged erroneously, and in one case, several times because they retried over and over. Yikes.

The PaymentSpring validation actually looks around to make sure things are OK before submitting, so you won’t end up with accidental charges that the customer will notice weeks later when they check their statement. Also, it is smart enough to prevent the rest of the form from going through if they couldn’t process the payment. That is the best way to handle this, and it’s clear that they spent serious effort in this area.

Building forms is complicated, especially in a CMS. I’ve built a few CMS’s and building custom forms is always terrible. Gravity Forms for WordPress makes it great and PaymentSpring’s plugin makes it secure. This is the first WordPress payment solution I’m really happy with.