How to Set Up WordPress Stripe Payments Quickly with JetFormBuilder?

More than 10,000 websites already use JetFormBuilder, a new form plugin for WordPress. They have a reason: JetFormBuilder is beginner-friendly, flexible, and costs less compared to alternatives.

And, of course, adding payment methods like Stripe via JetFormBuilder is also much easier than using other WordPress form plugins. Let me clarify why I think so.

JetFormBuilder Key Features

JetFormBuilder from Crocoblock lets you make online forms of any kind, including booking, subscription, appointment, ordering, and user profile forms. It also provides a toolset for creating multi-step forms that have various fields to submit (like hotel or flight booking).

As well as other popular WordPress form builders, this plugin was initially created for Gutenberg. However, it works with Elementor, too.

Compared to alternatives, JetFormBuilder is:

  • Not a drag-and-drop type of WordPress form builder. Instead, JetFormBuilder suggests 18 form field blocks and 19 field types blocks. You may choose any from the list and customize them as you wish. This approach helps users to create any form literally in a few clicks.
  • Full of unique features. For example, JetFormBuilder lets edit the field’s labels directly from the Gutenberg editor or create invisible for some users forms. You won’t find such functions in other WordPress form builders. Also, JetFormBuilder developers provide full customer support. You may contact the manager via Zoom or online chat at any time. Other plugin developers don’t have a customer support service. Even if they have, it takes them a lot of time to answer your request.
  • Free to use. JetFormBuilder is available to download from the WordPress plugins library. The free version grants you basic functionality, which is enough to make a simple but effective contact form. However, adding the Stripe payment method (or other specific functions) requires upgrading JetFormBuilder to a pro version.
JetFormBuilder prices

What Is JetFormBuilder PRO?

JetFormBuilder PRO is an advanced version of the free plugin. It contains a pack of add-ons that expand basic functionality significantly. For example, only using JetFormBuilder PRO can you automate your subscribers’ management or connect your contact forms to payment services like PayPal and Stripe or CRMs like HubSpot.

To upgrade JetFormBuilder to the PRO version:

1. Buy a license on the official website.

2. Download plugin and install it on the WordPress admin panel.

3. Activate the WordPress pluginwith the help of the license key you get after purchasing.

Note#1:

You get all available add-ons by buying a license. Choosing just a few of them is impossible for now. But it doesn’t mean you should install all of them to your WordPress. You are totally free to use only those add-ons you need the most.

Note#2:

To link your contact form with Stripe, you need to install and activate the Stripe Payments addon. Also, it is preferable to install JetEngine, a WordPress plugin for website content creation. It helps to build any type of content (contact forms, media galleries, team descriptions, map listings, user profiles, and so on). With its help, it is also much easier to add custom post types and meta fields. And, as you probably know, without CPT, you can’t build a website on WordPress. So, to put it simply, JetEngine helps create any type of content faster and easier.

How to Add Stripe Payments to the Form via JetFormBuilder?

Here, I’ll show you how to make a contact form and connect Stripe to it. To achieve my goal, I need three plugins installed and activated:

- JetFormBuilder

- JetEngine

- Gutenberg/Elementor editor

Note:

You can add the Stripe payment method to your form without JetEngine, but in this case, some JetFormBuilder functions won’t be available to you. For example, you can’t use dynamic form builder functions or add post ID in your form. It is only possible with JetEngine.

1. Create a Custom Post Type and set up meta fields.

To do it, proceed to WordPress Dashboard > JetEngine > Post Types > Add New. Or, you may choose a custom post type you have already built before.

How to make CTP

Note for beginners: “post type” is a term to name all website content that is different from a usual blog post (like contact forms, about us pages, your service or product descriptions, and so on). By default, WordPress has a few post types, including Post and Page. If needed, you may create your own post types, also known as custom post types or CPT.

Let’s say you want to add an informational block about yourself to the website. To do it, you can create a new page and add it to your website. However, what if you don’t like this idea? What if you wanted to add the About Me section to the existing page? In this case, you should make a custom post type and add it to your page. WordPress plugins like JetEngine help with that.

To get more information, read How to make custom post type and How to add meta fields tutorials.

2. Build a WordPress form

Open the JetFormBuilder > Forms tab and click “Add new.” After that, you can create any form you wish.

As for me, I will create a form for training course registration. It consists of four fields: Name, E-mail, Password, and Re-type the Password (but you are free to add more if needed).

Also, my clients will have to pay for the course immediately after registration. That is why I add a payment option to the form. To do that:

Go to Add block > Text Field if you want users to tap a text or numbers to submit the form. Also, click “Browse all” to observe all elements you may add to the form except the text field. In my case, I need to add four text fields and one button by clicking to which users will be able to pay for the course online via Stripe payment API.

Fill in the Field Name and Field Label, then select the field type you need in the Field Settings.

How to make a form in JetFormbuilder, step 1

Set up the price you want your clients to pay. To do it, go to Add Block > Hidden Field. On the panel from your right, click the Form field name section and select “Price” from the list. Then go to the Field Settings and choose “Manual Input.”

How to make a form in JetFormbuilder, step 2

After finishing all these tasks, save your progress and prepare to go to the next point!

Note: Watch this video manual to get a complete idea of how to make a form in JetFormBuilder.

3. Set up Stripe Payments

First, you need to set up Stripe Checkout, an integration that unnoticeably redirects users to the Stripe website to pay for products and services. Many companies, including big brands like Amazon, use this tool to accept online payments.

Stripe Checkout customization requires setting up a Stripe payment gateway. You can do it in the same JetFormBuilder editor you use to create a form:

1. Click the “JetForm” button.

You will find it on the panel on your right just below the “Safe draft,” “Preview,” and “Publish” buttons of the JetFormBuilder interface.

2. Scroll down to the Gateway Settings menu.

After that, select “Stripe Checkout” from the list.

3. Click on the Post-Submit Action menu.

You will see it under the Gateway Settings. Select “Insert/Update Post.” Then, click on the square “Edit Action” button with a pen icon (it is located under the Post-Submit Action menu). A new window with few text fields will open. You need to submit two text fields — Post Type and Post Status.

How to set up Stripe Checkout, step 2.1

In the Post Type field, add the CTP you have made with JetEngine (Step 1 of this guide, remember?). In the Post Status field, select “Published.” After that, close the window by clicking “Update.”

How to set up Stripe Checkout, step 3

4. Go back to the Stripe Checkout section you previously chose in the Gateway Settings.

There is a square “Edit” button there. Can you see it? Tap it. Once again, you will see a new window full of text fields you need to fill out. Toggle on the Use Global Settings switcher to add the Public Key and the Secret Key you get after purchasing the pro version of the JetFormBuilder plugin.

edit stripe checkout settings

Note#1: To complete this task successfully, you must first activate the Stripe Payment Gateway. To do it, go to JetFormBuilder > Settings > Payments Gateways > Stripe Gateway API and paste your Keys to the specific fields. You will see them once you tap Stripe Gateway API, so it takes no time to finish the work.

Note#2: To submit the Currency Code field, choose the preferable global currency code.

5. After entering the Keys, scroll down to see other options.

Here you may set up redirection to the page you want after payment is complete, write messages to display after your clients fail or succeed in paying, and so on. Also, check the Create payment order notification. Activate it if you want to save information about each payment you get.

create payment message

6. Finish with Stripe Checkout Settings and save your progress by tapping the “Update” button.

That is all! Stripe Payments is successfully connected to your form. All you need to do now is add the form to the website.

Note:

It takes around 5–10 minutes to link the form with Stripe Payments using JetFormBuilder. Still, if you face problems, feel free to write to Crocoblock’s customer support. If needed, you may request a Zoom video call.

Facts About Stripe and JetFormBuilder You Should Know

  • JetFormBuilder provides a money-back guarantee past 30 days from purchase. It is the best offer compared to alternatives.
  • Stripe payment fees for online transactions are cheaper comparing to PayPal: 2.9% + $0.30 per transaction and 3.9% + $0.49, respectively.
  • Besides the Stripe Payment method, JetFormBuilder lets you link PayPal and WooCommerce checkout.
  • JetFormBuilder allows customizing every form’s field as you like.
  • According to this study, companies using Stripe increase their revenue by almost 7%. Also, they may lower their processing costs of online transactions by 24% by using Stripe for at least five years.

To Sum Up

The best WordPress form plugin is the one that provides lots of functions and is easy to use. That is exactly the way JetFormBuilder works. However, better to see it for yourself, right? That is why I recommend you download and test this WordPress form plugin. Try to build your own form, then share your experience here.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Lana Miro

Lana Miro

117 Followers

I’m passionate about website design & development. Working as Content Manager at @Crocoblock. Here is my Twitter account: @Lana_Miro