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).
So I quickly built the form, and it looked something like this:
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).
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:
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.