Build a WordPress form with the help of JetFormBuilder and its premium PayPal Recurring Payments addon.

Table of contents:

What PayPal Recurring Payments PRO Addon Does

PayPal Recurring Payments addon is a PRO feature available as a part of the JetFormBuilder plugin. Let’s find out how to adjust the recurring PayPal payments on the WordPress website step by step.
PayPal is one of the most used payment systems globally; with its help, you can receive payments from all over the world for any services or goods you provide.

Addon functionality:

  • Recurring payments. Set payments that will be charged automatically on a monthly, yearly, or any other basis;
  • Convenient subscriptions dashboard. Look through the available subscription details;
  • Refunds. If there is a situation when the costs should be returned to the user, you can do it without an effort;
  • Suspend or cancel subscriptions. Set the needed status for the user subscription right in the dashboard.

Install Addon

Head to WordPress Dashboard > JetFormBuilder > Addons. Among all the available items, find the PayPal Recurring Payments and press the “Install Addon” button.

install paypal recurring payments addon

Then don’t forget to activate the addon to get access to all of its features. 

To do so, proceed to WordPress Dashboard > Plugins and find the installed addon. Hit the “Activate” button.

installed plugins
NOTE

The addon should be installed and activated on the remote website. It is because PayPal sends information about the made subscriptions and payments that is possible only if the site is located on remote hosting.

How to Create a Subscription Plan

Initially, log in to your PayPal Developer account. Hover over the Pay & Get Paid section to see the available pages. The Subscriptions page is the one we need.

paypal pay and get paid dropdown menu

So, here we can see the PayPal subscription plans in the samely named tab. Click on the “Create Plan” button to build a new one.

manage subscriptions page

If you have already built some plans before, they will be suggested to you as options for selection. 

Or, press the “Create a subscription product” button to set a plan from scratch.

choose the subscription step

Fill in the suggested fields that correspond to the info about the product you will provide in a subscription.

the first part of the choose product step

You can complete the fields or leave some empty as they are not obligatory. Hit the “Next” button to proceed to the following step.

the second part of the choose product step

You can see the same window displayed before, but now the list includes the item we have just added. Select it and click the “Next” button.

new subscription product added

This step is one of the most important for customization. Pick the pricing option that is the most preferable for the subscription plan you create.

Then push the “Next” button once again.

create plan step

Give a name to the PayPal subscription plan and write a description. Click the “Next” button to continue the setup.

subscription plan description step

Adjust the settings concerning pricing. Specify the currency and check the other options available.

the first part of the pricing step

Don’t forget to specify the price in the corresponding field and decide how it will be charged. Hit the “Next” button to review the plan you have just customized.

the second part of the pricing step

It is the last step, now check the details and push the “Update” button next to the information if it needs to be edited.

the first part of the review step

Once done, hit the “Turn Plan On” button to make the plan live.

the second part of the review step

How to Create a Form with Plans

Before building the form, ensure that the PayPal gateways are activated for your website. Open the WordPress Dashboard > JetFormBuilder > Settings directory and check the Payments Gateways settings.

Toggle the Enable Gateways switcher. Optionally, you can also activate the Enable Test Mode feature.

Also, mind filling in the following Client ID and Secret Key fields. Complete them with the corresponding data and hit the “Save” button.

payment gateways settings

Go to WordPress Dashboard > JetFormBuilder > Add New. Give a title to the form and delete the default fields if you don’t need them.

form with default fields

Add all the desired fields to the form. For instance, our form includes a Hidden Field, several Text Fields, and one Action Button.

form fields added

Navigate to the Post Submit Actions tab and select the “Save Form Record” option from the available drop-down list. Otherwise, the PayPal Checkout settings will not be active.

Also, click on the pencil-shaped button to edit the action. In the appeared window, you can enable the “Store the IP address and other request headers” that will save the user’s IP address and User Agent data.

save form record settings

The “Edit” button next to the enabled PayPal Checkout becomes active. Press it to get to the settings.

gateways settings tab

Enable the Use Global Settings toggle to inherit the Client ID and Secret Key you have entered earlier in the JetFormBuilder settings.

Or, if you haven’t done it before or need to substitute data, you can do it right in the following fields.

Mind setting the Gateway Action by selecting the “Create a subscription” option from the drop-down menu. 

Push the “Sync Access Token” button to synchronize the data.

use global settings toggle enabled

As you see, the access token data is now updated. 

Select the needed option in the Subscription Plan Field. Here you can choose one of the fields you have added to the form or pick a “Manual Input” option. Now the last mentioned option is our case.

So as we have picked manual input, we need to specify the Subscription Plan we built earlier.

As for the Quantity field and Manual input of quantity fields, we leave them with the default values entered because, in our case, we don’t need to specify a quantity.

Or, type “1” in the Manual input of quantity field, and it will work in the same way.

subscription plan settings

Scroll down to available macros and fill in the messages shown to the user in the specific cases.

Click on the “Update” button to save the adjusted settings.

That’s it for the form; now, you can hit the “Publish” button.

macros list and messages

Place a Form on the Page

You can place the form on the needed page or in the pop-up. Let’s take a look at the second case.

Navigate to WordPress Dashboard > JetPopup > Create New Popup. Give a title to the pop-up and push the “Edit with Elementor” button to open the Page Builder.

jetpopup create popup

Add the needed widgets to the pop-up and search for the JetForm one.

jetform widget in a pop-up
  • Choose Form — select the JetFormBuilder form you have just created;
  • Fields Layout — pick how the fields will be displayed, in a column or a row;
  • Required Mark — change the default mark for the obligatory fields if desired;
  • Fields label HTML tag — define the HTML tag used for the label of the fields;
  • Submit Type — select whether the page will be reloaded or the AJAX type will be applied once the form is submitted;
  • Enable form pages progress — activate the toggle if you have used Form Break Field in the form.

Publish the achieved result and head to the page editor where you want to place the button, which will lead to the pop-up. You can edit the existing one or create a new page. Once again, there are no limits; you can build a page both in Elementor and Gutenberg.

Form in Elementor

Add or search for the Button widget. Open the Advanced tab and find the needed item in the Attached Popup selector.

That’s it for the page editor, press the “Publish/Update” button and open the front end page.

button pop-up

Form in Gutenberg

As the JetPopup plugin is not available for Gutenberg, you can add a form there with the help of the JetForm block.

The settings presented here are the same as in Elementor.

jetform in gutenberg

We press the button to which we have attached a pop-up to see the form.

relaxing set on the front end

Complete the form with the required information and submit it by pressing the button below.

pop-up with a form

The user will be redirected to the PayPal payment page. Now log in to the account and select the bank card if needed. Press the “Continue” button.

paypal choose a way to pay

Check the provided info and press the “Agree & Subscribe” button.

paypal ship to window

Let’s check the subscription status by heading to WordPress Dashboard > JetFormBuilder > Subscriptions.

NOTE

The payment status may be updated several minutes after the payment is actually made.

The new subscription info is right here. We can also see that its status is set to active.

If we hover over the item, we can spot the “Suspend” and “Cancel” buttons. We will return to these features later. 

Open the created subscription to see additional details about it.

jetformbuilder subscriptions

Look at the several blocks presented here. It is Payer Info, Payment Shipping, Subscription Details, and not less critical Related Form Record.

the first part of active subscription details

One more section available is Notes. Here you can see the messages about subscription status changes or add your note by completing the field and pressing the “Add Note” button.

the second part of active subscription details

You may also notice the “Suspend” and “Cancel” buttons here.

How to Suspend a Subscription

Let’s take a look at the ability to suspend the subscription. Press the “Suspend” button.

Specify the reason or leave the default value and push the “Suspend Subscription” button.

suspend subscription window

Or, there is another way to suspend the subscription. You can do it right through the PayPal account. Head to the Subscriptions tab and find the needed subscription.

Press the three dots shaped button and hit “Pause Subscription” there. From now on, the subscription will be paused.

NOTE

If you suspend the subscription via PayPal, you need to wait a couple of minutes before the status will change on the WordPress website.

paypal subscriptions tab pause

Check the status; now it is changed to “Suspended.”

suspended subscription

How to Activate a Subscription

The subscription can be reactivated if needed. However, you can do it only from the PayPal account.

Click the “Activate Subscription” button next to the item to enable the subscription once again.

paypal subscriptions tab activate

How to Cancel a Subscription

Besides, you can discontinue the subscription. Press the “Cancel Subscription” button in the PayPal account.

paypal subscriptions tab cancel

Or, you can cancel the subscription from the WordPress Dashboard > JetFormBuilder > Subscriptions section.

NOTE

If you cancel the subscription, it can not be activated once again.

cancel subscription pop-up

How to Make a Refund

A refund can also be made via PayPal. Head to the Activity > All Transactions and find the “Refund” button next to the received payment. Click on it to see the refund details.

paypal refund button

Specify the total of the refund in the Total Refund Amount. Optionally, you can fill in the Invoice Number and leave the Note to Buyer.

paypal issue refund window

That’s it; now you know how to use the PayPal Recurring Payments addon available with the JetFormBuilder PRO plugin.

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.

The Repeater Field can be an advantageous option for your form when content needs to be repeated. One can’t deny that the ability to add as many fields as you need dynamically is really handy when it comes to similar data. Let’s look at how to add new fields to book additional places on tour just with one button click. 

Let’s begin by proceeding to JetFormBuilder > Add New to create a form from scratch. For example, we will build a booking form with the repeater field that lets users register as many travelers as needed.

Initially, we delete the default Hidden Field, Text Field, and Action Button to avoid getting confused.

default form in gutenberg

Next, we give a title to the form and add general fields to create a canvas. Among them are Hidden, Heading, Date, Text, and Radio fields.

booking form in jetformbuilder

Then add the essential part of the form, the Repeater Field. Adjust the settings according to your demands.

Hit the plus-shaped button to add the first block to the Repeater.

repeater field general settings

We begin with the Heading Field to name the proceeding section.

heading field in the repeater

Then we add a couple of Text Fields specifying the information about the traveler.

text fields in the repeater

And the final fields we create in the Repeater are the Radio Field and one more Text Field.

Besides, don’t forget to change the button’s label located under the fields placed in the Repeater.

radio and text fields in the repeater

Once done, we’ll add an Action Button and two more Hidden Fields to complete the form. One represents the current post title.

current post title hidden field

And the other one’s Field Type is selected as “Current Post Meta.” Here the Meta Field to Get Value From is also specified. 

current post meta hidden field

Though don’t forget to adjust the JetForm settings. Especially, pay attention to the Post Submit Actions. Set the needed amount of actions taken once the form is submitted.

For instance, we add three post-submit actions, Insert/Update Post, Send Email, and Redirect to Page.

Finishing with all the settings, mind pressing the “Publish” button to make the form live.

jetformbuilder post submit actions

Head to the page on which you want to place the form. For instance, we will add the form to a single page. To do so, we open WordPress Dashboard > Crocoblock > Theme Templates and hit the “Edit” button that appears next to the needed template once we hover on it.

Mind that you can use both Gutenberg and Elementor for editing.

Moreover, you can add a new template by pressing the samely-named button.

NOTE

You can also add the form to the pop-up if the JetPopUp plugin is installed and activated.

crocoblock single templates

Find the JetForm block/widget, place it on the page, and work on the settings.

Press the “Update” button once the changes have been applied.

jetform settings in elementor

Or, look at the template made with Block Editor. The settings here are pretty much the same.

jetformbuilder form in gutenberg

Check the form on the front end. You can also observe the fields we have added to the Repeater.

booking form on the frontend

And after them, there is a button that duplicates the fields once the button has been pressed.

new repeater fields

That’s it; the fields can be repeated as many times as needed. Now you know in which cases and, most importantly, how to add the Repeater Field to the JetFormBuilder form.

One of the most prominent JetFormBuilder features is the ability to receive PayPal payments just with the help of the correctly adjusted form. So let’s discover how you can set the needed form and keep all payments in a well-organized database table.

Build a WordPress Form

Initially, 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. Enable Test Mode is another available toggle that can be activated to test the payment system.

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

Press the “Save” button after all the fields have been filled in.

jetformbuilder payments gateways settings

Go to WordPress Dashboard > JetFormBuilder > Forms and press the “Add New” button to build a form from the ground up.

Hover over the desired item to edit the existing form.

jetformbuilder forms add new

Adjust all the needed fields in the form. For instance, we use the Booking Form pattern that perfectly meets our needs.

Except for the form fields, we need to work on the settings of the entire form. So open the JetForm tab and scroll down to the Post Submit Actions section.

Among all the drop-down menu options, select the “Save Form Record.” It will save the needed information about the status of the completed form, its creation date, and the submitter on the separate Form Records page.

You can also press the pencil-shaped button to edit the action if needed.

save form record post submit action

In the opened editing window, you can see only one “Store the IP address and other request headers” toggle. You can activate it to save the IP address and User Agent information, as it is not saved by default. 

Also, keep in mind that the Text Field with the “Password” Field Type will not be stored on the Form Records page.

And don’t forget to hit the “Update” button before you close the window.

save form record post submit action editing window

Add other actions by clicking the “New Action” button if needed and go to the Gateways Settings section that precedes Post Submit Actions.

Here we pick the “PayPal Checkout” option and press the “Edit” button.

NOTE

The “Edit” button will be unavailable if you don’t select the Save Form Record post-submit action.

form gateways settings edit button

Now let’s find out about all the fields we need to complete in the PayPal Checkout Settings.

the first part of paypal checkout settings
  • Use Global Settings — toggle it on to pull out the Client ID and Secret Key if you have entered this information in the JetFormBuilder > Settings > Payments Gateways directory;
  • Client ID — 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;
  • Gateway Action — select the scenario that will be performed once the form is submitted;
  • Request Button — push the “Sync Access Token” button to synchronize the data and proceed to the additional customization fields;
access token updated
  • Currency Code — add the needed global currency code;
  • Price/amount field — select one of the form fields representing the final price for the rendered service.

Look at the Available macros list; you can select one of the presented options and paste them into the following fields.

the second part of paypal checkout settings
  • Payment success message — complete the field with the text that will be shown once the user makes a payment;
  • Payment failed message — fill in a similar field. However, now it is meant for the unsuccessful payment.

Push the “Update” button to save all the completed data and the “Publish/Update” one on the top of the form to publish the final result.

built form with payment

Add the Form to a Page

Now decide where you want to place the newly built form. In the described case, we will put the form in a pop-up that will be triggered once the button on the single page is clicked. But don’t forget that you can place the form on the various pages.

So, we navigate to WordPress Dashboard > JetPopup > All popups. Here we can edit the existing popup or build a new one by pressing “Create New Popup.”

In the firstly appeared window, we select the layout preset of the pop-up.

jetpopup layout presets

Then click the “Create Popup” button, and, right in the editor, look for the JetForm widget. Select the form you have just created in the Choose Form field, and adjust the other settings if needed.

jetform widget

Also, we press the gear-shaped button to change the popup name in the Title field of the General Settings.

Press the “Publish/Update” button after all the customizations have been made.

jetpopup settings

Continue by following the WordPress Dashboard > Crocoblock > Theme Templates pathway and open the Single page editor.

single page edit button

Here, place a Button, set and style it, and open the Advanced tab. Find the JetPopup section and choose the created pop-up in the Attached Popup field.

Complete the following fields, and now you are free to push the “Update” button whenever you are satisfied with the result.

button jetpopup settings

Complete the Form

As we work with tours, we head to the specific tour page. If you have placed the form on the other page, open this page on the front end.

As you can see, the page looks right as we adjusted. Press the button which triggers the popup with the form.

tour page with booking button

And the form is now shown in the popup. Complete the fields and press the button you have set as a submit one.

the first part of the form

Yet, if all the obligatory fields are completed correctly, the submitted form will redirect you to the PayPal payment page.

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

paypal payment page

Check the Payment

For now, if the user is still completing the required data, you can already see the order by going to WordPress Dashboard > JetFormBuilder > Payments.

The unfinished payment is now marked as “Created” and “Not attached.” The same situation will appear if the user closes the payment window.

Though, if the user completes a payment form successfully, the payment changes its status to “Completed” and gets a Payer.

You can also see the payment creation date in the Created tab, the total amount in the Gross tab, and the payment ID.

Switch pages with the help of pagination and set the desired amount of the Results per page.

Press the item’s title in the Payment type column to see the payment details.

jetformbuilder payments page

Now all the needed information is shown in the database table.

Pay attention that Ip Address and User Agent are set as “Not recorded.” It is caused by the disabled “Store the IP address and other request headers” toggle in the Save Form Record post-submit action editor.

jetformbuilder successful payment

Moreover, we can head to the WordPress Dashboard > JetFormBuilder > Form Records to see more information regarding the completed form.

As you can see, the first form was created by the same author as the payment, so let’s check the additional information by pressing the title in the Form column.

jetformbuilder form records page

Here you can see the data about the completed form in the Form Fields, General Values, and Related Payment fields.

form record page

Now you know how to adjust the form with the convenient PayPal payment and store all the financial data in one systemized WordPress database table.

Field validation is an automated process of determining that all fields contain correct values before the WordPress form is accepted.

First of all, you need to create a form. Here’s an example of a simple form with a Number field, a Select field, and a Checkbox and Calculated fields combo.

calorie calculator form

There is no “Submit” button, and if there are any conditions set to the fields, e.g., Min and Max value, it’s impossible to determine whether the user enters a correct value.

field settings min and max value

The second step is to either copy the post ID from the form’s URL or head back to the JetFormBuilder > Forms folder. Find the necessary form and get its ID from the Shortcode column.

id of the form

Now, to implement the fields validation without clicking the “Submit” button, you need to go to WordPress Dashboard > Appearance > Theme File Editor.

Then click on the functions.php file in the right sidebar.

functions file

Scroll down the file and add the filter where your-form-id will be the ID you previously copied:

add_action( 'wp_footer', function () { ?>
<script>
  jQuery( '.jet-form-builder[data-form-id="your-form-id"] input, .jet-form-builder[data-form-id="your-form-id"] select' ).on( 'blur', function() {
      this.reportValidity();
    } );
</script>
<?php } );
code for field validation

Don’t forget to click the “Update File” button. On the front end, a user will see a certain tooltip if the entered value is incorrect without clicking the “Submit” button.

incorrect value

Now you know the easiest way of implementing field validation without submitting the form.