Create an Online Payment System with Gravity Forms and Stripe

Accept payments with Gravity Forms & Stripe

I’ve grown tired of accepting payments via PayPal recently, so when I realised that one of my sites, which was running Restrict Content Pro, could receive payments using Stripe instead, I went for it and instantly fell in love with the service. Not only is it simple to use, both from a management, and a development standpoint, but they also send your money automatically to your bank: it’s a set-it-and-leave-it kind of system.

With that, I decided to extend the service to The UK Edge, my web development company. My previous set-up consisted of sending out invoices and asking people to send payment using PayPal to my email address. Aside from PayPal’s downfalls, that was just a clunky system, and while it worked, it doesn’t exactly scream professionalism.

So, I set about building a system using two of my favourite tools: Gravity Forms and Stripe.

Building the form

With Gravity Forms, I could easily build a payment form: all it needs is fields for the client’s name and email address (for identification, and for their receipt), the invoice number or other reference, the amount to be paid (use a Product field and set the price to “User Defined”), and then the credit card fields (from the Pricing Fields section).

Since you are handling credit card information, you will need to have an SSL certificate installed on your domain for this to work. Not only is it good practice, but Stripe (and any other payment processor that I’ve worked with) won’t accept requests that come from unsecure domains, so it’s not even an option.

So I quickly built the form, and it looked something like this:

Allowing people to pay invoices with Gravity Forms and Stripe

Integrating with Stripe

Now that the form is in place, we need to tie it in to Stripe, so that when someone submits the form, their information will be sent to Stripe for processing.

Download, install and activate the Gravity Forms + Stripe plugin (free).

First you need to enter your API keys from Stripe (Your Account > Account Settings > API Keys) into Gravity Forms (Forms > Settings > Stripe).

Now you need to create a new feed for Stripe. Go to Forms > Stripe and click on Add New. Select your form and match the appropriate fields together. Note that you don’t have to use all the fields (I only used Name and Email).

How to set-up a Stripe feed in Gravity Forms

Once you click Save, you’ll have a live, functional form. You might want to test it out, so make sure that Stripe is in Test Mode (Forms > Settings > Stripe) and use the test card numbers available from Stripe. Once you’re happy that everything’s working fine, go ahead and switch it to Live Mode and start accepting payments from your own domain, with your own payment processor – much more professional than asking for payment through PayPal!

Taking it to the next level

The first extra step you might want to do is to use the Notifications feature of Gravity Forms to set up an email notification to your client when payment is processed, as a record for both you and them. It’s basically an electronic receipt and can be very handy for settling disputes (and getting notified when you get paid!).

Also, since you already know most of the information that the client would be entering into the form when you send it their way, you can do them a favour by pre-filling the form for them.

For each of the fields, click on the Advanced settings and select “Allow field to be populated dynamically” and enter an appropriate parameter name. For example, I chose the following:

  • First name – fn
  • Last name – ln
  • Invoice amount – amount
  • Invoice number – invoice

Now when you send them their invoice, you can add query vars to the end of the payment link to pre-fill this information for them. This also ensures that the amount and invoice number are entered correctly (assuming you’re not drunk when sending it over!). An example of this would be:

Pre-fill the form fields to make life easier for your clients

Lastly, you might want to allow for recurring payment or discount coupons, and this is also possible, though you do have to pay for a premium add-on. You’ll want to get Gravity Forms + (More) Stripe and then all of that extra functionality will be yours too.

Start accepting payments

24 thoughts on “Create an Online Payment System with Gravity Forms and Stripe”

  1. Gregg says:

    Hi Dave,
    Great tutorial. Got a little lost in the last part. “add query vars to the end of the payment link” where do you do this?

    1. Hi Gregg,

      So, by following my example, you take the link of the page that your payment form is on (in my case https://www.theukedge.com/pay-my-invoice/), add a question mark and start adding the “query vars”, separating each one with an ampersand. So in mine, I set the first name (fn) to John, Last name (ln) to Smith, the invoice amount (amount) to 500 and the invoice number (invoice) to 1000, hence the final link https://www.theukedge.com/pay-my-invoice/?fn=John&ln=Smith&invoice=1000&amount=500, which works if you try it. You can try changing the values as well and you will see how it works.

  2. Jeff says:

    Dave,

    I’ve been hearing a lot of things about Stripe. I didn’t know it was this easy with Gravity Forms. Did you experience any adversity from your clients by not offering Paypal anymore?

    1. I can’t say that I have yet. But I think that if it’s well presented, and easy to work with, and you take the stance that this is how you do business, clients won’t complain.

  3. Eric says:

    I think I did everything right, so why am I getting a warning label saying, “This page is unsecured. Do not enter a real credit card number. Use this field only for testing purposes.” ???

    http://knoxvilleplumbinginc.com/wp-content/uploads/Screen-Shot-2013-06-05-at-2.44.04-PM.png

    1. Do you have an SSL certificate installed for your domain? And have you set it to redirect the page to HTTPS?

  4. Any idea ow I could send additional form fields to stripe such as invoice#, company name?

    1. Stripe only accepts certain fields, ones that are going to help them process the payment. Why would you want to send the invoice number?

  5. Ray says:

    Are you able to send refunds to customers , similar to pay pal?

    1. You sure can. You can issue complete refunds, or partial refunds. And the fees for the transaction are refunded, so you pay $0 if you refund a payment.

  6. Hi Dave – thanks for posting this. Question though: I have two plans set up on Stripe with different pricing and two forms on Gravity Forms – how does Stripe know the difference between the two? How does it know a certain form correlates with a certain Stripe plan?

    1. This would be for taking one-time payments. The premium version of this plugin allows for recurring subscriptions and can be found at gravityplus.pro. You simple create a feed between Gravity Forms and Stripe, indicating which form is for which plan.

  7. Julian says:

    Has switching from Paypal to your own Gravity + Stripe saved you money at all?

    1. No, the fees are the same, but the experience for both me and my clients is much improved.

  8. I have an SSL and have used stripe last year with my site to collect payments. It has been many months since first setting up those and I can’t recall how to resolve the same issue of the WARNING UNSECURED DO NOT ENTER CC bit on my page fo rnew forms and pages created this season. Thanks for any help..

    1. You’ll want to check the “Force SSL” box in the Advanced tab of the Credit Card field in your Gravity Form.

  9. Jim Jeffry says:

    Hi Dave,
    Great review. With gravity forms + stripe, are you able to set an amount to be paid, rather than it just be “User Defined”? Also, I read somewhere else that your are able to charge pay pal simultaneously within Gravity Forms + Stripe. Is that correct?
    Thanks

    1. Hi Jim, yes, you can set the amount to be paid if you wish. Also, I don’t think that PayPal and Stripe can be active at the same time, and I’m not really sure why you’d want to charge both simultaneously, except for fraud…?

  10. Johnathan Evans says:

    I use Gravity Forms and Stripe for an all in one agreement/quote form. Most of these are partial payments. Is there a way to setup a partial payment within the form and then a client finishes paying the invoice later on off of the same form? I know gravity forms has the ability to add notes, etc. to a form submission. Any thoughts would be great. Thanks!

    1. Hmm, I don’t think you could use the same form, but you could probably provide a link or send an email once the initial form is sent out to calculate the balance and automatically fill that field in the second form.

  11. Steve says:

    Hi Dave – great article! So glad I stumbled across this – my new payments page works perfectly!

    I’m in the same boat as Edward re: passing on extra details to Stripe. I’d like to pass on the invoice / reference number field as the description in Stripe. If I can do this, then my integration is able to match up my Stripe charge within my accounts system automatically.

    There is a hook for the charge description: gfp_stripe_customer_charge_description but I would have no idea on how to actually implement it.

    Any ideas?

    1. I can give you some guidance, but don’t have the time to fully figure this out. You’d need to use a hook like gform_pre_submission to get the value of the field that you want to use as the description and then add it to the gfp_stripe_customer_charge_description filter using add_filter().

  12. Steve says:

    Cheers Dave, will see if I can read up how to do – appreciate the guidance!

Leave a Reply