Category: Payments Integrations

Automated payments are no longer a fancy; it’s a necessity. Using the JetFormBuilder plugin’s functionality, you will be able to add the desired payment methods to your website. In this tutorial, you will learn how to activate the WordPress payment gateway option, add one to the form, and customize its settings.

• How to Enable the Payment Gateways Option
• How to Configure the PayPal Gateway
• How to Obtain the PayPal API Key
• PayPal Checkout Settings
• How to Configure the Stripe Gateway
• How to Obtain the Stripe API Key
• Stripe Checkout Settings
• Action Events Settings

How to Enable the Payment Gateways Option

Before JetFormBuilder v1.2.1, the WordPress Payment Gateways for both JetEngine and JetFormBuilder had to be set up manually. You were supposed to go to WordPress Dashboard > Appearance > Theme Editor, click on the functions.php file in the right sidebar, and add the filter:

add_filter( 'jet-form-builder/allow-gateways', '__return_true' );

There is a much more convenient way to enable the WordPress Payment Gateways option with the latest update. Proceed to WordPress Dashboard > JetFormBuilder > Settings, locate the Payments Gateways tab, and click on it. 

Inside, you will see the Enable Gateways toggle switch. Once enabled, this option takes precedence over the manually added allow-gateways filter. This means that new users who haven’t enabled the gateways yet won’t have to alter the child theme file in any manner. 

For those users who had already added the filter by hand, there is no need to remove it from functions.php – the gateway will still be working. Turn the Enable Gateways toggle on to activate the functionality.

Below it, you will see another toggle – Enable Test Mode. Once enabled, this option takes precedence over PayPal’s sandbox-mode filter. Again, if you had that filter added to the code, it would continue working. So far, this option works for the PayPal payment system only.

Also, the Payments Gateways tab will output all the payment integrations you have added. By default, there is only one payment system – PayPal. All the new ones will land below it. 

After you finish the Gateway activation, a new settings section called Gateways Settings will appear in the WordPress form editing interface. To find it, go to WordPress Dashboard > JetFormBuilder > Forms and open one of the created forms. In the right-side menu, you will see the Gateways Settings section.

Now, let’s go through the section settings.

• None — when selected, this option means none of the available checkouts will be attached to the current form; 
• PayPal Checkout — select this Radio button to create a connection between the PayPay checkout and the form you are currently editing; 
• Stripe Checkout — if you want to connect the JetFormBuilder form to Stripe’s payment software, select this option;
• Edit — a button with a wrench icon opens the additional checkout settings pop-up window.

How to Configure the PayPal Gateway

To set it up correctly, you need to register your PayPal app and receive the Client ID and Secret Key for your authentication.

How to Obtain the PayPal API key

Go to the PayPal developer’s website and hit the “Log Into Dashboard” button. If you already have an account, log into it. Otherwise, create one. 

For a form to work correctly in a live environment, set up the appropriate API credentials (Live or Sandbox, the instructions are in the Get started with PayPal Developer tutorial) and indicate a proper currency code (the list of codes can be found on the Country Currency Codes page).

Now, go to Dashboard > My Apps & Credentials and click on the “Create App” button. Give your new app a name and choose the “Merchant” App Type. Then click the “Create App” button once again.

You will be redirected to the app’s page. The Client ID and Secret Key are right there – just copy them.

Proceed to WordPress Dashboard > JetFormBuilder > Settings. In the Payments Gateways tab, find the PayPal Gateway API drop-down and click on it. Paste the obtained keys into the corresponding fields and press the “Save” button.

Now, go to WordPress Dashboard > JetFormBuilder > Forms and open one of the created forms. In the right-side menu, you will see the Gateways Settings section. Choose “PayPal Checkout” and click the “Edit” button to open its settings.

PayPal Checkout Settings

• Use Global Settings — enable this toggle to pull the data from the PayPal Gateway API’s settings and pre-fill the Client ID and Secret Key fields; 
• Client ID — paste the Client ID that you obtained from PayPal into this bar;
• Secret Key — this is where you paste the Secret key generated through the PayPal website; 
• Gateway Action — pick a payment scenario that will perform once the form is submitted;
• Request Button — press the “Sync Access Token” button to work on the payment settings;

• Currency Code — type here a three-letter code that represents the currency used in your form; 
• Price/amount field — in this drop-down select, pick the corresponding price field within your form;

• Available macros list — these macros can be used in the fields below – Payment success message and Payment failed message – if you would like to specify some details for the customer:
  • %gateway_amount% — will provide the payment amount returned from the gateway template;
  • %gateway_status% — will give the payment status returned from the payment gateway;
  • %field_name% — will provide any necessary details from the form field, the name of which you write instead of the “field_name”;
• Payment success message — this is a message that will be shown to the user after their payment is confirmed to be successful;
• Payment failed message — this message will be directed to the user if their payment does not come through.

How to Configure the Stripe Gateway

You need to register a new business on Stripe and receive the Publishable and Secret keys for your authentication to set it up correctly.

How to Obtain the Stripe API Key

Go to the Stripe website and create a new account. 

A confirmation letter will be sent to your email. Proceed to the inbox and click the link in the email to pass verification. Afterward, you’ll be redirected to Stripe’s dashboard page. Click on the New Business bar in the upper left corner of the sidebar, enter the account name and press the “Add name” button.

Good. Now, you will be able to locate two Stripe API keys – the first is the Publishable key, and the second is the Secret key. Copy them.

Proceed to WordPress Dashboard > JetFormBuilder > Settings. Find the Stripe Gateway API drop-down in the Payments Gateways tab and click on it. Paste the obtained keys into the corresponding fields and press the “Save” button.

Now, go to WordPress Dashboard > JetForms > Forms and open one of the created forms. In the right-side menu, you will see the Gateways Settings section. Choose “Stripe Checkout” and click the “Edit” button to open its settings.

Stripe Checkout Settings

The Stripe Checkout settings are pretty similar to PayPal Checkout except for one field. Instead of the Client ID field, there is the Public Key field. You are supposed to input here the Publishable Key obtained from Stripe. 

However, if you enable the Use Global Settings toggle, both fields with the keys will be pre-filled automatically.

Action Events Settings

The Event logic for the Submit Actions is available after the 2.1.0 version of the JetFormBuilder plugin.

With this new feature, you can set the time and condition for every action in the form when it should be performed. If you use the PayPal or Stripe payment method in the form, you can also set what action should be executed after a successful or failed payment.

To set an action event, proceed to the Post Submit Actions tab of the form and hit the “Edit Conditions & Events” button.

In the Events match tab, you can add such events:

• DEFAULT.PROCESS – defines the time of action performance. This event is needed when the payment (PayPal/Stripe) function is included in the form so that the JetFormBuilder plugin can complete the submit actions with such an event before a user is redirected to the checkout page;
• BAD.REQUEST – is executed after processing the request if there are errors in the form fields (for example, when you filled out a Media field with the wrong format file or exceeded the file limit). Overtakes the DEFAULT.PROCESS event;
• DEFAULT.REQUIRED – is executed in any case, even if the form fields contain some errors or in case of unsuccessfully performed actions. This event runs at the end before the form response is sent. By default, this event is used by the Save Form Record action and cannot be added to other events through the form editor;

• GATEWAY.SUCCESS – replaces the former “On success payment” option for actions. It is executed after passing the checkout page on the side of the payment system if a payment or a subscription has been made;
• GATEWAY.FAILED – replaces the former “On failed payment” option for actions. It is performed when the user returns from the checkout page of the payment system without making a payment or subscribing.

After you select one or several events, hit the “Update” button. The event in the submit action will look like that:

Don’t forget to “Update” the form to save changes.

That’s it. Now you know how to configure WordPress Payment Gateways and use them in JetFormBuilder forms.

Tutorial requirements:

• JetFormBuilder plugin at least 2.1.0 version installed and activated;
• JetFormBuilder PayPal Recurring Payments addon at least 1.1.0 version installed and activated;
• Elementor or WordPress block editor;
• Created form for the Recurring PayPal payments;
• JetEngine plugin installed and activated;
• JetPopup plugin installed and activated (optional, compatible with Elementor only).

After the successful subscription payment in PayPal with the JetFormBuilder form, a user gets the content during the paid period. However, when the subscription expires, the user still will have access to the content. The easiest way to avoid it is to apply Dynamic Visibility rules to the content according to the user role condition and fine-tune the logic with the action events.

• Step 1. Set the form
• Step 2. Set the page content 
  • How to set the page in the Elementor editor
    • Set a pop-up (optional)
    • Set Dynamic Visibility
  • How to set the page content with Dynamic Visibility in the WordPress block editor
• Step 3. Check the results

Step 1. Set the form

Proceed to the JetFormBuilder > Forms tab on the WordPress Dashboard and click to edit the form that you have customized for the recurring PayPal payments.

Add the Hidden Field to the form and select the “Current User ID” option as the Field Value.

Head to the Post Submit Actions tab in the JetForm section and push the “+ New Action” button. Select the “Update User” option in the drop-down menu, and hit the pencil-shaped button.

For the Hidden Field with the “Current User ID” value (named as the user_id in our case), select the “User ID (will update this user)” option in the Fields Map. Set other fields so that they’re assigned to the appropriate user fields.

In the User Role, we select the “Subscriber” option so that all users with the Customer role who submit the form and buy the subscription also upgrade their role to Subscriber.

You can also pay attention to the Messages Settings and change the text that appears when users submit the form.

After you finish customizing the action, don’t forget to press the “Update” button.

Push the “Edit Conditions & Events” button under the “Update User” action.

Move to the Events match tab and select the GATEWAY.SUCCESS event. With this event, the action will be executed only after a user passes the checkout page on the side of the payment system. So the user will change the status to the subscriber after the successful payment.

More about other events, you can learn in the Action Event Settings.

Press the “Update” button. The event in the submit action will look like that:

To change the user role back to customer when the subscription expired, add another the “Update User” action. The Field Map settings are the same as in the previous action, but set the “Customer” User Role and hit the “Update” button.

Push the “Edit Conditions & Events” button under the newly created “Update User” action, move to the Events match tab and select the GATEWAY.SUBSCRIPTION.CANCEL, GATEWAY.SUBSCRIPTION.EXPIRED, and GATEWAY.SUBSCRIPTION.SUSPENDED events. Press the “Update” button.

At the end, two “Update User” submit actions will look like that:

Finally, click the “Update” button to update the form settings.

Step 2. Set the page with content

How to set the page with the Elementor editor

Set a pop-up (optional)

You can place the form right on the page or can set a pop-up with it. If you have the JetPopup plugin installed and activated, proceed to the JetPopup > Create New Popup tab, enter the title, and hit the “Publish,” and then “Edit with Elementor” buttons.

Drag-n-drop the JetForm widget to the pop-up and select the recently updated form. When you finish, press the “Update” button.

Set Dynamic Visibility

Proceed to the page with the content that you want to show only to subscribers.

Place a new section with two columns in the editor. In the first column, add some Image or Button widget that will show the message that the content is locked and users have to subscribe to see it. In the second column, place the content (e.g., video, image) that will be shown to subscribers.

You can also place widgets above each other and align them in the center.

Click on the first column and navigate to the Advanced section. Go to the Dynamic Visibility tab, open it and enable the toggle.

Select the “Show element if condition met” Visibility condition type, “User Role is not” Condition and “Subscriber” User role.

Move to the JetPopup tab on the same widget and attach the recently created pop-up. Select the Trigger Type you need. For example, if you want to attach the pop-up to the Button widget, select the “Click on Button” option. We’re good with the “Click on Widget” type.

If you haven’t created a pop-up, you can place the JetForm widget in the column and apply the Dynamic Visibility condition to it.

Click on the second column and proceed to the Advanced section. Go to the Dynamic Visibility tab, open it and enable the toggle for the second time.

Select the “Show element if condition met” Visibility condition type, “User Role is” Condition and “Subscriber” User role. It may seem that the conditions for the two columns are the same, but be attentive.

At the end of customizing, hit the “Publish/Update” button.

How to set the page content with Dynamic Visibility in the WordPress block editor

Create a new page or click to edit the existed one. We place the JetForm block on the page and select the form for the PayPal payments. If we click on the form, we will see the Dynamic Visibility icon.

Click on the icon and enable the toggle. Leave the “Show element if condition met” Visibility condition type, hit the “Add new item” button, and select the “User Role is not” Condition and “Subscriber” User role.

Close the pop-up and proceed to the content for subscribers (to the Video or Image block, for example).

Press on the “Dynamic Visibility” icon and enable the toggle. Leave the “Show element if condition met” Visibility condition type, hit the “Add new item” button, and select the “User Role is” Condition and “Subscriber” User role. It may seem that the conditions for the form and content are the same, but be attentive.

When you finish customizing the page, push the “Publish/Update” button.

Condition is set so a user can see form or content on the page, according to the user role.

Step 3. Check the Results

Open the page with the form and content on the front end. Since the user role on our current account is the customer, we can see only the image with the pop-up yet.

We click on the image, fill out the form in the pop-up, and hit the “Submit” button.

Log in to the PayPal account and buy a subscription. After that, you will return to the page where the Dynamic Visibility will show the paid content. That means that the user role was successfully changed.

To ensure that the role was changed, we log into the administrator account and move to the Users tab on the WordPress Dashboard.

As we can see, the user truly gets the subscriber role after the PayPal payment.

That’s all. Now you know how to set the logic so that the user role changes after a successful subscription payment in PayPal with the JetFormBuilder plugin and the JetEngine Dynamic Visibility to show content only to subscribers.

The PayPal Recurring Payments addon for JetFormBuilder adds PayPal subscriptions to forms, manages their settings, keeps them up to date, and tracks all payments.

Table of contents:

• What PayPal Recurring Payments PRO Addon Does
• Install Addon
• How to Create a Subscription Plan
• How to Create a Form with Plans
• Action Events
• Place a Form on the Page
• How to Suspend a Subscription
• How to Activate a Subscription
• How to Cancel a Subscription

What PayPal Recurring Payments PRO Addon Does

Install Addon

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

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.

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.

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.

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.

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

You can complete the fields or leave some empty as they are not obligatory. Hit the “Next” button to proceed to the following 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.

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.

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

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

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.

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

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

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.

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

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

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.

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

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.

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.

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.

Action Events

This tool applies actions at different performing moments, i.e., during its execution, after request processing, after checkouts, etc.

Navigate to the Post Submit Action settings of the form settings and select the action you need from the appropriate drop-down menu. 

NOTE

Except for the Save Form Record option, the Action Event settings are available for all Post Submit Actions from the drop-down menu..

Press the Condition button to open the Edit Action Conditions & Events popup window. Here select the Events Match tab and choose one or some options from the Add Event drop-down menu:

• DEFAULT.PROCESS ー the event is performed simultaneously with the specified action. This event is executed before redirecting to check out if the PayPal/Stripe is functionality enabled;
• BAD.REQUESTー the event is performed after processing the request if the form fields have errors like the wrong field format of the media field or the field text exceeds the limit;
• DEFAULT.REQUIREDー the event is performed in any case, even if the form fields have errors or unsuccessfully performed actions. This event is launched at the end of the form response is submitted.

NOTE

The DEFAULT.REQUIRED event is a default event for the Save Form Record action and cannot be added to other events.

• GATEWAY.SUCCESSー the event is performed after the payment system has checked up on the payment made or subscription issued;
• GATEWAY.FAILED ー the event is performed if users have returned from the checkout page of the payment system without making a payment or subscribing.
• GATEWAY.SUBSCRIPTION.CANCELLEDー the event is performed if users have canceled the subscriptions;
• GATEWAY.SUBSCRIPTION.EXPIREDー the event is performed if the subscription term of use has been expired;
• GATEWAY.SUBSCRIPTION.SUSPENDED ー the event is performed if the subscription is suspended.

Users can add different actions with different events.

NOTE

If you have some actions referring to the DEFAULT.REQUIRED event, assigning the Save Form Record the last action is recommended. Otherwise, the completed action status can be saved incorrectly.

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.

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

• 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.

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.

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

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

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.

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

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

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.

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

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.

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.

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.

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

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.

How to Cancel a Subscription

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

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

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.

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.

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
• How to Create a Stripe Payment Form
• Add the Form to a Page in Elementor
• Add the Form Block in Gutenberg
• Complete the Form

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.

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.

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.

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

Go to WordPress Dashboard > JetFormBuilder > Add New.

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.

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.

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

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.

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.

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

3. Set Up Post-Submit Actions

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

Proceed to the Post-Submit Actions section and unfold it. Now, you can add post-submit actions to the form. For example, you could add the Insert/Update Post action to create a new post.

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.” You will find more information on this action in the “Insert/Update Post” action tutorial. 

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

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

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.

• 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;
• Gateway Action — here, you can choose the payment scenario. Select the “Pay Now” action to enable further settings.

To further manage the Stripe payment settings, click the “Sync Access Token” button. Once the Access Token is updated, you will get access to more gateway settings.

• Currency Code — add the needed global currency code.
• Price/amount field — you can choose a form field price from the fields list here.

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

4. Set Up Action Events

Now, it is time to configure the scenario that will be performed before payment is processed, on successful payment and the failed payment. To do this, we need to give the post-submit actions certain Events.

For example, you can choose to create a post before the payment is processed, register the user after successful payment, and send an email if the payment failed.

Click on the “Edit Conditions and Events” button to add action events under the needed post-submit action.

In the popup, proceed to the Events Match tab. Select one or several events from the dropdown.

• DEFAULT.PROCESS – this is the moment when actions are processed. The current event will trigger the post-submit action before the payment gateway.
• BAD.REQUEST – this event is executed after request processing in case some of the fields in the form return errors. For example, the action will be triggered if the user uploads a file to the Media field in the wrong format or if the user exceeds the allowed number of files to upload. This event bypasses the DEFAULT.PROCESS event. 
• DEFAULT.REQUIRED – this event is executed in any case. It is the last triggered event before the form response is submitted. The event runs even in case some of the other post-submit actions are not processed successfully. Note: if you set the DEFAULT.REQUIRED event to several actions and one of your actions is the Store Form Record action, make sure to put the Store Form Record action the last in the row. 
• GATEWAY.SUCCESS – this one is executed after the user passes the checkout on the side of the payment system; if a payment is successful, the action will be triggered.
• GATEWAY.FAILED – It is performed when the user returns from the checkout page of the payment system without making a payment.

Note that the Store Form Record action does not require any Event. 

Now that you have added Events to the post-submit actions, don’t forget to make the necessary fields in the form required.

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.

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

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.

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.

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.

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

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
• Add the Form to a Page
• Complete the Form
• Check the Payment

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.

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.

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. Add some actions to the form by clicking the “New Action” button.

Go to the Gateways Settings section that precedes Post Submit Actions.

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

Now let’s find out about all the fields we need to complete in the 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;

• 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.

• 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.

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.

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.

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.

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

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.

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.

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

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.

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.

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.

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.

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

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.