Stripe Payment Form with JetFormBuilder PRO Addon

Create a Stripe payment form with the help of one of the JetFormBuilder PRO addons, Stripe Payments

What Stripe Payments PRO Addon Does

Stripe Payments is a JetFormBuilder addon that links JetFormBuilder and JetEngine forms to Stripe’s software, allowing you to carry out any payments online via Stripe Gateway.

With the help of this addon, your clients will be able to pay for product orders, all sorts of specialty services, tickets to various events, and so on. Stripe Payments will also come in handy if you offer booking and rental services.

Addon Functionality:

  • Stripe Gateway
  • AJAX redirect to Checkout
  • Actions before & after payment

How to Create a Stripe Payment Form

Before we begin, make sure you have the following plugins installed and activated:

  • JetFormBuilder — build a form, edit the post-submit actions, and add a CAPTCHA if needed;
  • JetEngine — create a CPT, add custom meta fields and taxonomies; 
  • Elementor free — add the created form into the editor to finalize the customization and style up the page. Alternatively, you can use Gutenberg block editor; it is fully compatible with the JetFormBuilder plugin.

1. Add Custom Post Type

Proceed to the WordPress Dashboard > JetEngine > Post Types directory. Add a new custom post type by pushing the “Add New” button or open one of the previously created CPTs.

custom post type

Once you open the custom post type editor and adjust the General Settings, scroll down to the Meta fields tab.

As your form will include fields for completing, some of them will repeat the CPT meta fields you edit here. That’s why you need to set up the potential form fields.

post type meta fields

After implementing the changes, press the “Add/Update Post Type” button.

2. Create New Form

Before we start, let’s check the Payments Gateways settings by navigating to WordPress Dashboard > JetFormBuilder > Settings

Here you can activate the Enable Gateways toggle to have the possibility to work with payments. 

The following Stripe Gateway API section includes two Public Key and Secret Key fields, which should be completed with the corresponding data from your Stripe account.

Press the “Save” button after you fill in all the fields.

enabling stripe gateway api

The following form will allow the user to register and enroll in an online course. 

Go to WordPress Dashboard > JetFormBuilder > Add New.

creating a new form

Give a title to the form and move on to the default Text Field.

Change the Field Label and Form field name values to “Username” and “user_name” accordingly.

text field name

Hit the plus-shaped button to add one more Text Field block for email.

Fill in the Field Label and Form field name accordingly, and don’t forget to select the right field type in the Field Settings.

field for email

There will be two more fields for the password; however, you are free to add any field you want.

password field

To store the price for this particular course and allow the form to carry out the payment, we need to create a field for the price.

To do it, click on the “Add Block” button and select a Hidden Field. Change the Form field name to “Price” and set its value to the “Manual Input” in the Field Settings.

price field

Enter the needed price in the Value field bar.

By the way, you can make the price field more secure by turning off the Render in HTML option. This way, a Hidden field will be invisible in the HTML markup.

price value and render in html

Finally, change the button label, and let’s proceed to the form settings.

3. Set Up Post-Submit Actions

To make a Stripe Payment form work properly, you need to set certain actions. 

Firstly, there will be an Insert/Update Post action needed to enable the “Stripe Checkout” settings option. 

Secondly, you will need to set the Stripe Checkout settings, where you will find one more action, Create payment order notification. This one is crucial, as it stores the order data and the service information for confirming the payment status.

Open the JetForm tab and scroll down to the Gateways Settings section. Check the Stripe Checkout radio button.

gateways settings

As this option needs an “Insert/Update Post” action to be added, proceed to the Post-Submit Actions section and unfold it.

post-submit actions

Click on the “Edit Action” button. In the Post Type field, select the custom post type you’ve previously created and set the Post Status to “Published.”

Don’t forget to hit the “Update” button before closing the window.

insert update post settings

If you want to allow the users to register on the website, add the Register User action and set it up.

register user action

Add other actions by clicking the “New Action” button if needed and go back to the Gateways Settings section.

Now we can press the “Edit” button under the “Stripe Checkout” option and find out about all the fields we need to complete in the Stripe Checkout Settings.

edit stripe checkout settings
  • Use Global Settings — toggle it on to pull out the Public Key and Secret Key if you have entered this information in the JetFormBuilder > Settings > Payments Gateways directory;
  • Public Key — complete this field with the Client ID that you can find in your PayPal account;
  • Secret Key — fill in the Secret Key attached to your PayPal account;
  • Currency Code — add the needed global currency code.

The next three options allow you to select the scenario that will be performed Before payment processed, On successful payment, and On failed payment

For example, you can choose to create a post and register the user before the payment is processed or after a successful payment.

select the scenarios

You may omit the Insert/Update Post, as it duplicates the following option. 

Create payment order notification — make sure that you keep it turned on. Otherwise, the order information won’t be stored.

create payment order notification turned on

Price/amount field — you can choose a form field price from the fields list here.

stripe checkout price field

By default, JetFormBuilder redirects the user to the same page with the form after the payment. 

To enable the redirect to the needed page, you have to set the Redirect to Page action and turn on the Redirect to a page toggle.

use redirect to a page

Lastly, adjust the Payment success/failed messages and update the settings to save all the completed data. 

By the way, don’t forget to make the necessary fields required.

required fields

Push the “Publish/Update” button on the top of the form to publish the final result.

Add the Form to a Page in Elementor

Now decide where you want to place the newly built form. In the described case, we will place the form on a separate page.

So, we navigate to WordPress Dashboard > Pages. Open an existing page or create a new one and edit it with Elementor.

Customize it according to your needs and, right in the editor, look for the JetForm widget. Select the form you have just created in the Choose Form field.

jetform settings

Proceed to the next tab and style the form, so it matches your website’s design.

styled form

Add the Form Block in Gutenberg

JetFormBuilder works not only with the Elementor page builder. This plugin allows adding the form block using Gutenberg as well.

Open the page in the default WordPress Editor and add a JetForm block.

jetform block in gutenberg

Complete the Form

Open the page where you have placed the form on the front end.

As you can see, the page looks right as we adjusted. Complete the fields and press the button you have set as a submit one.

stripe form payment

Once the obligatory fields are completed correctly, the submitted form will redirect you to the Stripe payment page.

Here the user can fill in all the details needed for successful payment.

stripe payment page

Now you know how to adjust the form with the convenient Stripe payment using the JetFormBuilder plugin.