Accepting payments used to be a challenging, time-consuming and expensive project for businesses: scope the project, interview a few web development shops, pay the web developer to create a payment form, wire your new form up to your payment gateway and hope that people find and use the payment feature. Those days are gone as it has never been easier to build a payment form on your WordPress-based website! This guide walks companies through the end-to-end process of taking donations online on their WordPress based website.

Pre-Requisites & Getting Started

This guide is assuming that you are already running your company website on WordPress.

Install the Heartland Plugin

You need to download the Heartland plugin for Gravity Forms. This will enable our payment engine and functionality within Gravity Forms.

For both plugins, snag your public and secret API keys from the Heartland Developer Portal. You can add the keys under Forms->Settings->SecureSubmit. This can be a “gotcha” as many people don’t realize they need to configure Heartland’s plugin before building a form.

Building a Form

Building a payment form using Gravity Forms is straightforward, but there are a few gotchas to be aware of. We will call those out as we progress through building the form. In our example, we would like to let the customer type in a dollar amount to pay rather than letting them select from some hard-coded options.

Create the Form

The fields we will be adding for this form are under the “Advanced Fields” drop down and the  “Pricing Fields” drop down on the right side of the form editor. Expand the “Advanced Fields” section first and drag over the following fields:

• Email
• Address

Next, expand the “Pricing Fields” section and drag over the following fields:

• Product
• Secure CC
• (Optional) Secure ACH

Your form should look similar to this at this point:

Configure the Fields

Now that you have created the basic form elements required to complete donation payments, we need to configure the fields to work as we expect. To configure a field, you click on the field you would like to configure.

Start by clicking on the “Product Name” field. Adjust the Field Type to “User Defined Price”. Now, change the Field Label to “Amount”. Finally, under “Rules”, click “Required” to force a customer to add a total before being able to submit the form.

Click “Update”.

Create a Feed

This is the most common gotcha. Under the “Settings” option for the form you just created you will see a “SecureSubmit” sub-menu option. Click it. Now click “Add New” to create a new feed for your payment. For this example, we are going to leave the default name, but change the “Transaction Type” to “Products and Services”. Select “Amount” from the “Payment Amount” field. In the “Other Settings” section, make sure you select the correct field on the right that matches the element on the left.

Test Donations

Your form is created and it is time to test. You can click “Preview” from the top menu of your Form. It should look like this:

Fill out the form using one of the test credit card numbers from our documentation.

Go Live & Collect Payments

Once you are happy with the way your form looks and have tweaked it enough to meet your needs, simply contact your Heartland representative to get your production credentials. Swap our your sandbox credentials for your production credentials and you will be taking live payments.