Category: Payments Integrations

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

In this case, we explain creating a subscription plan using the Sandbox mode of the PayPal functionality. This mode simulates transactions during payment processing without real payments. If you want to use the Live mode, you should upgrade your PayPal account. Nonetheless, the Subscription plan creation workflow is the same for both modes. Still, you should set the appropriate API credentials for each mode (Live or Sandbox). Follow the Get Started with PayPal REST APIs tutorial to learn how.

The PayPal Recurring Payments add-on is a PRO add-on for the JetFormBuilder plugin. The add-on integrates pre-created PayPal subscriptions to forms and manages payment settings. It also transfers payments according to the PayPal subscription settings (pricing plans, billing cycles, trial periods, subscription quantities, etc.). The add-on aggregates subscription data through one dashboard.

Add-on functionality includes:

• Recurring payments —  supports periodic payments of different types (fixed, quantity-based, volume-based, or tiered) with trial time consideration;
• Convenient subscriptions dashboard — allows viewing and editing subscription details (subscribers, billing cycle, status) and payment details (payer, payment shipping, dates, gross sums) through the dashboard;
• Refunds — carries out refund payment from the Subscriptions dashboard;
• Suspend or cancel subscriptions — sets the needed status for the user subscription from the dashboard;
• Action Events — applies different actions as form settings (events) instead of the callbacks as php-functions;
• Usability — applies PayPal gateway actions, syncs Access Token data, adds quantity fields, uses redirects, and creates custom payment success/failed messages.

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

Then, don’t forget to activate the add-on to get access to all of its features. 

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

Also, you can install and activate this add-on as any other WordPress plugin. 

Initially, log in to your PayPal Developer account. By default, you will be directed to the Sandbox test accounts page of your main PayPal account. On this page, your business and personal accounts are listed.

Unroll the needed business account to observe the sandbox account Login Info and REST API apps sections.

Then, enter the Sandbox PayPal account using the presented “Email” and “Password” Login info. Here, the “John Doe” username is set by default, but you can set the needed one.

In the account, move to the Business Tools tab.

If you have already built some plans, they will be suggested to you as options for selection in the Choose the subscription product you want to offer section. You can select the needed plan, scroll down the page, and click the “Next” button at the bottom of the page.

Or, just scroll this page down and press the “Create a subscription product” button to set the plan from scratch. 

You will be redirected to the Tell us about the subscription product you want to offer section, which has the obligatory Product name and Product type fields (scroll the page to see these fields). 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 next step.

After that, you will be redirected back to the Choose the subscription product you want to offer step. Here, the created plan will be added to the list of other plans. Tick the needed one, scroll the page down, and click the “Next” button.

In the next step, you will be redirected to the Choose the kind of subscription plan you want to offer section. This step is one of the most important for customization. Pick the pricing option that is most preferable for the subscription plan you create.

Then, push the “Next” button once again.

In this case, we chose the “Fixed pricing” option. To redirect to the following page, click the “Next” button at the button in the right corner of the page.

In the Tell us about the subscription plan you want to offer section, fill out the needed fields. In particular, the previously entered data will be transferred to the obligatory Product name field, and you can change this text. Also, the Plan name field is required. 

Finally, click the “Next” button to continue the setup.

In the next Define pricing for this subscription plan section, adjust the settings concerning pricing. Specify the currency and check the other available options.

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

The last step is called Review and save your new plan. Here, 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.

Last, you will be transferred to the Set up your PayPal Checkout experience for subscriptions page, which lets you copy the code and add it to your site.

If needed, set the layout options, scroll down the page, press the “Copy Code” button, and then the “Go to plans” link to be redirected to the Subscription plans page.

Otherwise, press the “Do it later” link to be redirected to the Subscription plans page. 

Now, your subscription plan is displayed on the Sandbox PayPal Dashboard > Sales > Subscriptions > Subscription plans page.

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

Toggle the Enable Gateways switcher. Optionally, activate the Enable Test Mode switcher if you test work with your PayPal account in the “Sandbox” mode.

Then, return to your main PayPal Dashboard > Sandbox test accounts page, which lists your business and live accounts. Next, unfold the business account you used while creating your subscription plan; after that, move to the REST API apps section and unroll the needed app.

Here, copy the Client ID and Secret key field values for further pasting.

Then, go back to the WordPress Dashboard > JetFormBuilder > Settings > Payments Gateways subtab, complete the Client ID and Secret Key fields and the corresponding data, and hit the “Save” button.

Add the form’s fields

Go to WordPress Dashboard > JetFormBuilder > Add New. The form will be opened in the Block Editor (Gutenberg). 

Select the needed embedded form in the Welcome block or build the form from scratch.

In this case, we type the form’s name (the “Subscription Form” text), press the “Start from Scratch” button, and create a form with the Text Fields, Image Field, Radio Field, and Action Button.

This form creation tutorial explains how to build forms from scratch.

Adjust the PayPal Checkout Settings

In this step, scroll the JetForm settings down to the Gateways Settings section. Enable the PayPal Checkout option and press the “Edit” button below to get to the settings.

After that, the Edit PayPal Checkout Settings pop-up will be opened.

First, in the newly opened Edit PayPal Checkout Settings window, enable the Use Global Settings toggle to inherit the Client ID and Secret Key you 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. Once the synchronization is successfully updated, the corresponding text will appear on this button.

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 the “Manual Input” option. Now, the last mentioned option is our case.

So, as we have picked the “Manual input” option, we need to specify the required plan in the SUBSCRIPTION PLAN drop-down list (here, we selected the “test” subscription plan we built earlier.)

As for the QUANTITY FIELD, we leave it with the default “Manual Input” value, but for the  MANUAL INPUT OF QUANTITY field, we type the “1” text.

Scroll down to available macros and change the messages shown to the user in the specific cases if needed.

Read the How to Build WordPress Registration Form With Payment tutorial to learn how to manage macros in settings.

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

Manage the Post Submit Actions

In the next step, navigate to the Post Submit Actions tab. Press the “+New Action” button and select the “Save Form Record” Post Submit Action in the newly appearing Add new action window. If the “Save Form Record” Post Submit Action is set by default, press the “pencil” icon to configure its settings.

After that, activate the Store the IP address and other request headers toggle to save the user’s IP address in the Edit Save Form Record window. 

Click the “Update” button.

After that, we add the “Register User” Post Submit Action since the form is intended to manage the subscribers. 

In the “Edit Register User” pop-up, we assign the corresponding FIELDS MAP fields to the form’s block fields. 

Once completed, press the “Update” button.

Read the Register Form tutorial to learn how to build register forms and manage their settings. 

Set the Action Events

The Action Events tool applies actions at different performing moments, e.g., during its execution, after request processing, after checkouts, etc.

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

Press the “Condition“ button to open the Edit Action Conditions & Events pop-up window. Here, select the Events Match tab and choose the needed subscription event(s) from the Add Event drop-down menu:

• DEFAULT.PROCESS ー the event that is performed simultaneously with the specified action. This event is executed before redirecting to check out if the PayPal/Stripe functionality is enabled;
• BAD.REQUEST ー the event that 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 that 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. This event runs before the form response is sent. By default, this event is used by the “Save Form Record” Post Submit Action and cannot be added to other events through the form editor;
• GATEWAY.SUCCESS ー the event that is performed after the payment system has checked up on the payment made or subscription issued;
• GATEWAY.FAILED ー the event that 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 that is performed if users have canceled the subscriptions;
• GATEWAY.SUBSCRIPTION.EXPIRED ー the subscription expiration event that is performed if the PayPal subscription expires;
• GATEWAY.SUBSCRIPTION.SUSPENDED ー the event that is performed if the subscription is suspended.
• RENEWAL.PAYMENT ー the event that performs the specified Post Submit Action if the subscription is renewed and paid again.

In this case, we set the “GATEWAY.SUCCESS” event and pressed the “Update” button.

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

Open an editor you prefer and find the JetForm widget/block/element. In this tutorial, we use Elementor.

Read the Displaying a JetFormBuilder Form in Any Page Builder tutorial to learn how to add the JetForm widget/block/element in Elementor, Block Editor, and the Bricks theme.

Complete the Form

Move to the front end, complete the form with the required information, and submit it by pressing the “SIGN UP” button.

Pay for the Subscription

Once the form is submitted, users 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.

After payment, you will be redirected back to the form.

You can manage PayPal subscriptions via PayPal and the JetFormBuilder Dashboard.

Manage the submissions via PayPal

Another way to suspend the subscription is through a PayPal account. Head to the Subscriptions tab and find the needed subscription (in the Sandbox mode, the PayPal Dashboard > Sales > Subscriptions tab).

This tab displays the subscriptions and their actual status. 

Press the “three dots” button and select the needed option. Since the submission is “ACTIVE,” you can change its status to “PAUSE” or “CANCELLED” by selecting the corresponding option from this list.

This way, you can change the submission’s status, i.e., reactivate it. However, you can only do this from your PayPal account. Click the “Activate Subscription” button next to the item to enable the subscription once again.

Also, you can cancel the submission.

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

The new PayPal 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” links below the subscriber’s name. 

Open the created PayPal subscription to see additional details.

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

Another section available is Notes. Here, you can see 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.

Press the “Suspend” button. If necessary, specify the reason or leave the default value and push the “Suspend Subscription” button.

Check the Status field. Now it is changed to “Suspended.”

Also, you can cancel the submission by pressing the “Cancel” button.

A refund can be made via PayPal as well. Go to Activity > All Transactions and click the “three dots” button next to the received payment. Then, select the “Refund” option to see the refund details.

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

The Stripe Payments & Subscriptions add-on links JetFormBuilder and JetEngine forms to Stripe’s software, allowing you to carry out any payments online via Stripe Gateway (E-commerce, subscriptions, marketplaces, SaaS, booking, etc.).

Scope of application: selling products, tickets, and memberships; offering booking, rental, and other specialty services; accepting donations, wholesale order forms, and more.

The add-ons functionality covers:

• seamless integration with WooCommerce, its add-ons, and platforms;
• AJAX redirection to the checkout cart;
• different payment methods (credit cards, Apple Pay, Google Pay, etc.);
• one-time and recurring payments with set periodicity;
• automatic filling in billing and shipping fields for a more convenient ordering experience;
• actions before and after payments;
• configuring global and per-form API keys options to connect Stripe keys either globally for the site or separately for each form – it is convenient for multi-brands/staging;
• application of webhook syncing back to WordPress;
• one dashboard for managing payments and their statuses;
• operation in the “Sandbox” Stripe mode, which allows money transfer testing;
• allowing users to select the desired pricing plan/interval (month/year) in the form and charge them accordingly;
• setting Currency Codes and choosing which one will be used for financial operations on the site;
• one-click refunds: refunds initiated in WordPress are immediately sent to Stripe, and the data shows in both systems.

With the cooperation of other JetPlugins:

• allows redirection to customized checkout pages;
• allows selection between payment gateways;
• applies macros (e.g., %gateway_amount%, %gateway_status%, and %field_name% macros to create custom payment success/failure messages;
• applies Calculate the total amount automatically based on the options selected in forms to allow users to select various additional services or products, and you need to update the total cost dynamically;
• configures the Conditional Logic for the payment form to customize the form to respond to user actions. For example, you can show or hide certain form fields depending on the options you choose.

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 Custom Post Type (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 the Gutenberg block editor; it is fully compatible with the JetFormBuilder plugin.

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 completion, 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.

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.

Read the How to Configure Payment Gateways tutorial to learn how to obtain the Stripe API keys, configure the payment gateways in JetFormBuilder settings, and add the gateway functionality to a specific form. If you intend to obtain recurring settings, learn how to configure Stripe’s Products, set up a custom recurring subscription, and configure recurring Stripe payments as the How to Set Recurring Stripe Payments in a WordPress Form tutorial explains.

 Also, more details on creating digital products and using Stripe for forms can be found in the How to Set Up Recurring Stripe Payments in WordPress Forms video. In addition, you can apply additional payment methods to your Stripe form as the How to Enable Klarna, SEPA, Sofort, and Other Extra Payment Methods in Stripe tutorial explains.

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

Also, you can create Stripe payment forms with the needed fields: e.g., a contact form, Stripe subscription form, register form, profile form, booking form, lead-capture form, t-shirt order form, job application form, RSVP form, evaluation form, donation form, login form, appointment form, and more.

Set Up Post-Submit Actions

To make a Stripe Payment form work properly, you need to configure the Post Submit 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.

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

You can add other Post Submit Actions, for example, the “Send Email,” change user role, redirect user to a page, send SMS after form submission, and more. Also, you can add action events to configure the scenario that will be performed before payment is processed, on successful payment, and on failed payment.

If you want to allow 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;
• 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.

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.

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

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.

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.

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.

Troubleshooting

Test vs live mode 

Since the “Sandbox” mode is Stripe’s official mode aimed at checking your workflow and/or simulating payments without real money transferring, the Stripe Payments & Subscriptions add-on allows operation in this mode. Nonetheless, the subscription plan creation workflow is the same for both modes.

To enable the “Sandbox” mode, activate the Enable Test Mode toggle in the WordPress Dashboard > JetFormBuilder > Settings > Payments Gateways tab.

Currency mismatch issues

The following currency mismatch cases are possible:

• the currency set in the CURRENCY CODE field of the Stripe Checkout Settings pop-up differs from the default currency set for your products, coupons, or in the Stripe account;
• bank or card restrictions set for the customer’s card.

Fixing Stripe webhook failures

Stripe webhook failures cover checking logs in the Developers > Webhooks tab for a particular endpoint, updating the endpoint URL, and ensuring your server returns a 200 OK status code within 10 seconds.

In this section, we explain how to obtain the API keys generated in your accounts. Providing the one-time PayPal payments does not require installing additional plugins (except for the recurring payments), as it is the default JetFormBuilder functionality, unlike the Stripe Payments add-on, which is needed for any payments. Read the How to Create a Stripe Payment Form Using Pro Addon tutorial to learn more about the Stripe gateway setup. 

Also, more details about configuring a custom recurring subscription plan for PayPal can be found in the How to Configure a Custom Recurring Subscription Form tutorial, and for Stripe 一 in the How to Set Recurring Stripe Payments in a WordPress Form tutorial.

Finally, you can expand the form’s functionality by adding additional payment methods, as the How to Enable Klarna, SEPA, Sofort, and Other Extra Payment Methods in Stripe tutorial explains.

Obtain the PayPal API Key

Go to the PayPal Developer website and hit the “Login” button if you already have an account, and log in to it. Otherwise, create a new one by pressing the “Get started” button.

Then, enter your account.

Unroll the App & Credentials tab and navigate to the REST API apps section. The Default Application is generated by default.

For a form to work correctly in a live environment, set up the appropriate API credentials (the “Live” or “Sandbox” mode; 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).

If you need another API Key, press the “Create App” button and fill in the fields of the newly appeared “Create App” pop-up.

Once created, the new REST API will be displayed on the app’s page. 

Return to the API Credentials tab that enlists all created REST API apps. Copy the Client ID and Secret Key of the needed REST API apps.

Obtain the Stripe API Key

Go to the Stripe website and enter your account or create a new one.

A confirmation letter will be sent to your email. Proceed to the inbox and click the “Verify email” link in the email to pass verification.

Afterward, you’ll be redirected to the Stripe dashboard page. In your Stripe account, move to the Developers > API keys tab and copy the Publishable key and the Secret key.

Proceed to the WordPress Dashboard > JetFormBuilder > Settings > Payments Gateways page. Here, activate the Enable Gateways toggle to allow payment operations. In addition, if you set the “Sandbox” mode in the PayPal and/or Stripe accounts, activate the Enable Test Mode toggle.

Since we intend to use the PayPal and Stripe functionality and have activated the Stripe Payments add-on, the Payments Gateways tab displays two tabs to insert the corresponding APIs: once the Stripe add-on is activated, the Stripe Gateway API drop-down will be added to the Payments Gateways tab.

In the Payments Gateways tab, find the PayPal Gateway API drop-down list and click on it. Paste the obtained Client ID and Secret Key into the corresponding fields and press the “Save” button.

Next, unroll the Stripe Payments Gateways tab, paste the copied Publishable key and Secret key into the corresponding fields, and press the “Save” button.

Now, go to WordPress Dashboard > JetFormBuilder > Forms and open one of the created forms. Here, we assume that the form is previously created and all necessary fields are inserted.

In the right-side menu, you will see the Gateways Settings section. Here, the following options are available:

• Manual 一 an option that allows users to select the preferred gateway;
• None 一 an option that prohibits the usage of the gateways in this form;
• PayPal Checkout and Stripe Checkout 一 options that, if enabled, allow configuring the corresponding gateway settings. If you select one of these options, the PayPal Checkout or Stripe Checkout sub-menus will be unrolled. Here, only one option can be selected 一 the PayPal Checkout or Stripe Checkout.

PayPal checkout settings

Once the “Edit PayPal Checkout Settings” option is selected, the “Edit” button to open its settings will appear. Here, you can configure the following settings:

• Use Global Settings — a toggle that pulls the data from the PayPal Gateway API’s settings and pre-fills the Client ID and Secret Key fields; 
• Client ID and Secret Key — automatically filled-in text fields that take data from the Client ID and Secret Key fields of the WordPress Dashboard > JetFormBuilder > Settings > Payments Gateways tab. Moreover, you can paste the corresponding data here manually;
• Gateway Action — a drop-down list that allows picking 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.

After that, the following fields will be added to this pop-up:

• Currency Code — a text field for typing a three-letter code that represents the currency used in your form. More details on getting payments in different currencies can be found in the Currency codes tutorial;
• Price/amount field — a drop-down list for selecting the corresponding price field within your form;

• Available macros list — a text block enlisting the macros that can be used in the Payment success message and Payment failed message fields. The following macros are available:
  • %gateway_amount% — a macro that will provide the payment amount returned from the gateway template;
  • %gateway_status% — a macro that will give the payment status returned from the payment gateway;
  • %field_name% — a macro that will provide any necessary details from the form field, the name of which you write instead of the “field_name”;
• Payment success message — a text field to add the message that will be shown to the user after their payment is confirmed to be successful;
• Payment failed message — a text field to add the message that will be directed to the user if their payment does not come through.

Finally, scroll down the pop-up and press the “Update” button. Then, “Save” the form.

Stripe checkout settings

Once the “Edit Stripe Checkout Settings” option is selected, the “Edit” button to open its settings will appear. 

The Stripe Checkout Settings are similar to PayPal Checkout. Instead of the Client ID field, there is the PUBLIC KEY field. You are supposed to input the Publishable Key obtained from Stripe here.

However, if you enable the Use Global Settings toggle, both fields with the keys will be pre-filled automatically. After that, press the “Sync Access Token” button for synchronization.

Other available settings are:

• GATEWAY ACTION — a drop-down list that allows picking a payment scenario that will be performed once the form is submitted. The following options are included:
  • Pay Now — an option that activates the CURRENCY CODE and PRICE/AMOUNT FIELD fields with similar functionality to the PayPal corresponding field(s);
  • Subscription — an option that activates the SUBSCRIPTION PLAN field with similar functionality to the PayPal corresponding field(s);
• PAYMENT METHOD — a drop-down list that allows picking the needed one(s) from the list (the “Select Manually” option) or enabling all of them (the “Auto” option).

The last section is the Available macros list, PAYMENT SUCCESS MESSAGE, and PAYMENT FAILED MESSAGE fields, with functionality similar to the PayPal fields.

Manual

If this option is selected in the Gateways Settings section, the PayPal Checkout and Stripe Checkout sub-menus will be unrolled. Here, enable both Show on frontend toggles and click the “Edit” buttons to open the corresponding settings if they are not configured previously.

Once the settings for both gateways are configured, press the “Add block” button below the “Manual” option to add the Payment Gateway field block to the form automatically to add the Stripe and PayPal checkout in a single form.

Also, you can find this JetFormBuilder payment methods block in the search bar and drag-and-drop where needed.

In addition, you can find more information on how to combine the JetFormBuilder multiple payment gateways in a form to let users select the preferred payment method (PayPal and Stripe in one form) before submitting in the How to Use Both Paypal and Stripe Payment Methods in a Form tutorial.

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

With this 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 — an event that 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 — an event that 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 file format or exceeded the file limit). It overtakes the DEFAULT.PROCESS event;
• DEFAULT.REQUIRED — an event that is executed in any case, even if the form fields contain some errors or if actions are unsuccessfully performed. This event runs 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 — an event that 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 — an event that 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;
• GATEWAY.EXPIRED — an event that is performed if the gateway sessions expire due to the configured idle time;
• GATAWEY.SUSPENDED — an event that is performed if the gateway sessions are suspended;
• GATEWAY.RENEW — an event that is performed if the gateway sessions are renewed;
• GATEWAY.SUBSCRIPTION.CANCELLED ー an event that is performed if users have canceled the subscriptions;
• GATEWAY.SUBSCRIPTION.EXPIRED ー an event that is performed if the subscription expires;
• GATEWAY.SUBSCRIPTION.SUSPENDED ーan event that is performed if the subscription is suspended.

If the PayPal Recurring Payments add-on for JetFormBuilder is installed and activated, and the PayPal Subscription plan is created, the RENEWAL.PAYMENT event will be added to all Post Submit Actions, except the “Save Form Record” action. 

• RENEWAL.PAYMENT — performs the specified Post Submit Action if the subscription is renewed and paid again.

Also, the JetFormBuilder plugin allows for setting the Events associated with the Render States. Read the How to Combine Registration and Login in One Form Using Render States tutorial for more details.

After you select one or several events, hit the “Update” button. The Post Submit Action will have the text that refers to the set Event.

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

Learn how to combine the JetFormBuilder multiple payment gateways in a form to let users select the preferred payment method (PayPal and Stripe in one form) before submitting. 

To provide this functionality, the PayPal Recurring Payments and Stripe Payments & Subscriptions add-ons for JetFormBuilder should be installed and activated.

Also, in this tutorial, we focus mainly on the multiple gateway settings and the allowance to choose the payment method. Therefore, steps such as obtaining API keys, JetFormBuilder setting configuration, adding the gateway functionality to a specific form, etc., should be performed first, as described in the How to Enable and Set Up Payment Gateways tutorial. 

Next, create a form with the needed fields or select a previously built one using a form’s layout or the Welcome block. 

In this case, we build a subscription form with the Text Fields, the Checkbox Field, and the Action Button.

Since the form will be used for payments, we set the Checkbox Field as the data source when configuring the payment settings in the Edit PayPal Checkout Settings and Edit Stripe Checkout Settings pop-ups. In particular, we select the “Manual Input” option in the FILL OPTIONS FROM drop-down, press the “Manage Items” button, and enter the required price in the VALUE field of the Checkbox Field’s Edit Options pop-up.

If needed, you can build a more detailed form, for example, as described in the How to Create a Subscription Registration Form tutorial. In addition, you can add specific fields, for example, to sign the form using the Signature Field, as the Quick Way to Collect Digital Signatures Using JetFormBuilder article explains.

Then, move to the JetForm > Gateway Settings section and unroll it. The block contains a radio with the gateway options: “None” (default option), “PayPal Checkout,” “Stripe Checkout,” and “Manual.”

In this section, to allow users to select the needed gateway, pick the “Manual” option. Next, the PayPal Checkout and Stripe Checkout sub-menus will be unrolled. Here, enable both Show on frontend toggles and click the “Edit” buttons to open the corresponding settings.

Next, the checkout settings pop-ups will appear.

In these pop-ups, we enable the Use Global Settings toggle to automatically fill out the CLIENT ID and SECRET KEY fields. 

Next, we select the GATEWAY ACTION scenario (we set the “Pay Now” option), and press the Sync Access Token button near the REQUEST BUTTON field.

Then, we set the CURRENCY CODE and choose the form field representing the final price for the rendered service in the pop-up’s PRICE/AMOUNT FIELD (here, we choose the form’s Checkbox Field).

Then, scroll the pop-ups down and save the changes.

Read the How to Create a Stripe Payment Form Using Pro Addon and How to Store PayPal Payments in Custom Database Tables tutorials to learn how to configure these settings, add the specific subscriptions to forms, manage subscriptions, keep them up to date, and track all payments.

Once the settings for both gateways are configured, press the “Add block” button below the “Manual” option to add the Payment Gateway field block to the form automatically to add the Stripe and PayPal checkout in a single form.

Also, you can find this JetFormBuilder payment methods block in the search bar and drag-n-drop where needed.

In the last step, add the Post Submit Actions. For example, you can “Send Email,” “Register User,” “Send SMS After Submission,” or use the WooCommerce Cart & Checkout Action add-on to create a checkout page.

Since you are applying two payment methods, you should add Events related to both of them while configuring the Post Submit Actions. 

Press the “Edit Conditions and Events” button under the needed Post Submit Action to unroll the pop-up, open the Events match tab, and select the required options in the ADD EVENT drop-down. 

For example, you can add the “GATEWAY.SUCCESS” event to the Post Submit Action that will be executed after the user passes the checkout on the side of the payment system; if a payment is successful, the action will be triggered (the event is appropriate for both payment methods). Also, if you deal with subscriptions, add the events corresponding to them, e.g., the “STRIPE.RENEWAL.PAYMENT” for Stripe and “RENEWAL.PAYMENT” for PayPal if the subscription is renewed and paid again.

Also, read the WooCommerce Checkout and Order Form Optimization: The Crocoblock Way article to learn how to customize WooCommerce checkout and order forms with smart UX decisions and Crocoblock tools.

Finally, save the form.

Create a page in Elementor/Block Editor/Bricks. In the given case, we created the page in Elementor.

Also, check the Displaying a JetFormBuilder Form in Any Page Builder tutorial.

Find the JetForm widget and drag and drop it onto the page. Then, select the just-built form in the Choose Form field. 

Then, publish the page, and move to the front end to fill in the form.

After pressing the “SUBMIT” button, you will be redirected to the Stripe or PayPal checkout page, depending on your choice.

That’s it. Now you know how to add both PayPal and Stripe payment methods to one JetFormBuilder form, configure the payment gateways, and display multiple methods on the frontend to let users select PayPal or Stripe before submitting JetFormBuilder forms on your WordPress site.

In this tutorial, we focus on configuring a custom recurring subscription plan in the PayPal “Sandbox” mode and choosing it via the Select (Checkbox or Radio) Fields of the previously created form.

It allows the price range to depend on the number of ordered items (so-called tiered pricing); therefore, the chosen data will be transferred to the PayPal checkout page, and PayPal will provide tier-based payment.

Here, we assume that the PayPal Recurring Payments add-on for JetFormBuilder is installed and activated, and that the subscription plan and the form have been created. In addition, we primarily focus on configuring specific fields and settings. More details on configuring the required subscription plans, adjusting the Post Submit Actions, and managing the subscriptions via PayPal and JetFormBuilder Dashboard can be found in the How to Configure Payment Gateways and How to Set Recurring PayPal Payments in WordPress Form tutorials.

Table of Contents:

Initially, log in to your PayPal Developer account. By default, you will be redirected to the Sandbox test accounts page of your main PayPal account. Here, go to the Apps & Credentials tab and select the required credential from the unlisted options.

Then scroll down this page to view the Sandbox account info section to the Email and Password data.

Then, enter the Sandbox PayPal account using the provided Email and Password. Here, the “John Doe” username is set by default; you can enter your desired one.

Here, unfold the Business Tools tab and press the “Recurring payments dashboard” link.

After that, you will be redirected to the Manage subscriptions page.

Here, click the “Create subscription product” link, fill in the required fields, and proceed to the next page.

Once the product’s general data is complete, you will be redirected to the Create plan page to configure the subscription. On this page, select the “Tiered pricing” option and move to the next page.

Then, adjust the pricing on the Define pricing for this subscription plan page by filling out the Currency, Pricing, and other fields.

Also, scroll the page down and configure the Tier based planning section that is intended to specify the pricing range.

Once configured, press the “Next” button in the bottom-right corner of the page.

In the last step, after being redirected to the Review and save your new plan page, browse the options set, update them (if needed), scroll down the page, and press the “Turn Plan On” button in the bottom-right corner to make the plan live. 

Finally, on the Set up your PayPal checkout experience for subscriptions page (if needed), set the layout options, scroll down the page, click the “Copy Code” button, then click the “Go to plans” link to be redirected to the Subscription plans page. Otherwise, press the “Do this later” link to be redirected to the Subscription plans page. 

Your subscription plan is now displayed on the Sandbox PayPal Dashboard > Sales > Subscriptions > Subscription plans page. Further, the Plan ID (here, “P-647****”) will be entered into the form’s Radio Field.

Then, return to your PayPal Developer account.

Here, go to the Apps & Credentials tab and select the required credential from the listed options. After that, copy the Client ID and Secret key 1 data.

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

Toggle the Enable Gateways switcher. Optionally, activate the Enable Test Mode switcher if you test work with your PayPal account in the “Sandbox” mode and disable it if you work in the Live PayPal mode.

Then, in the WordPress Dashboard > JetFormBuilder > Settings > Payments Gateways subtab, complete the Client ID and Secret Key fields and the corresponding data, and hit the “Save” button.

Go to WordPress Dashboard > JetFormBuilder > Add New to create a new form. Use an embedded pattern or build it from scratch. Here, we create a custom “Subscription Form” with the Text Fields, Image Field, Radio Field, and Action Button. Also, the Select or Checkbox Fields can be used instead of the Radio Field.

This form creation tutorial explains how to build forms from scratch.

Next, move to the Gateways Settings section. Enable the PayPal Checkout option, then press the “Edit” button below to access the settings.

Here, in the newly opened Edit PayPal Checkout Settings window, enable the Use Global Settings toggle to inherit the Client ID and Secret Key you entered earlier in the JetFormBuilder settings.

Choose the “Create a subscription” GATEWAY ACTION from the drop-down menu. 

Push the “Sync Access Token” button to synchronize the data, and after successful synchronization, select the needed plan in the SUBSCRIPTION PLAN FIELD (here, we set the “test plan” subscription plan we built earlier). As for the QUANTITY FIELD, we leave it with the default “Manual Input” value.

As for the other fields, read the How to Build WordPress Registration Form With Payment tutorial to learn how to manage macros in settings that can be applied here.

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

In the next step, return to the form builder and insert the multiple-choice field. For instance, we added the Radio Field with the “Manual Input” option. Press the “Manage Items” button, then enter the required price range in the LABEL fields. Then, move to the “Sandbox” PayPal account: Sandbox PayPal Dashboard > Sales > Subscriptions > Subscription plans page, copy the required Plan ID (here, “P-647****”) and enter it into the VALUE fields.

Scroll the pop-up down and save the settings.

In the last step, insert the required Post Submit Actions: we keep the “Save Form Record” Post Submit Action and add the “Register User” Post Submit Action since the form is intended to manage subscribers. Once completed, press the “Update” button. 

Read the Register Form tutorial to learn how to build register forms and manage their settings. 

In the final stage, press the “Condition” button to open the Edit Action Conditions & Events pop-up window. Here, select the Events Match tab and choose the needed subscription event(s) from the Add Event drop-down menu: DEFAULT.PROCESS ー the event that is performed simultaneously with the specified action. This event runs before the redirect to check whether PayPal functionality is enabled.

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

Open an editor you prefer and find the JetForm widget/block/element. In this tutorial, we use Elementor. Read the Displaying a JetFormBuilder Form in Any Page Builder tutorial to learn how to add the JetForm widget/block/element in Elementor, Block Editor, and the Bricks theme.

Move to the front end, complete the form with the required information, and submit it by pressing the “SIGN UP” button.

After submission of the form, you will be redirected to the PayPal payment page. After logging in, if needed, select the appropriate options and press the “Continue” button. Finally, review the provided information and click the “Agree & Subscribe” button.

After payment, you will be redirected back to the form.

Finally, the submission will be displayed in the PayPal and JetFormBuilder Dashboard. That’s all about configuring the tiered pricing PayPal subscription plan and building the JetForm form to set a price range based on the items ordered using the PayPal Recurring Payment add-on for WordPress websites.

First, install and activate the Stripe Payments & Subscriptions add-on. Refer to the Stripe Payments & Subscriptions guide to learn how to set up integration between Stripe and JetFormBuilder correctly. 

Navigate to the WordPress Dashboard > JetFormBuilder > Settings > Payments Gateways tab and turn the Enable Gateways toggle on.

Unfold the Stripe Gateway API tab. Here, you can enter the Public Key and Secret Key copied from the Stripe website and “Save” them to use in the JetFormBuilder forms further.

To enable additional payment methods, the custom code should be added to the functions.php file of the child theme or the Code Snippets plugin. Use the following code on the site: 

<?php
add_filter(
    'jet-form-builder/stripe/payment-methods',
    function( $methods ) {
        return array('klarna');
    },
    10
);

Instead of “klarna,” use any needed payment method.

Click the “Save and Activate” button once you are ready.

Ensure that the required payment methods are listed in the Create a Payment Method guide. Methods mentioned only on the Stripe site can be integrated with JetFormBuilder forms.

Then, in your Stripe account, navigate to Settings > Payments > Payment methods and ensure that the required payment method is enabled.

Proceed to setting up a form. For that, we navigate to WordPress Dashboard > JetFormBuilder > Add New Form. 

Enter the form’s title — in this case, it is “Extra Methods in Stripe”.

The Welcome block appears by default. From here, you can select a form pattern or generate a form with OpenAI. Otherwise, you can hit the “Start from scratch” button and use the three fields added by default; otherwise, you can delete them to begin anew.

In this case, we built our form following the Stripe Payment Form with JetFormBuilder PRO Addon guide. 

Proceed to the JetForm settings tab and open the Gateways Settings. Enable the “Stripe Checkout” option.

Click the “Edit” button. In the newly opened Edit Stripe Checkout Settings pop-up, enable the Use Global Settings toggle. 

So the PUBLIC KEY and SECRET KEY are added automatically. Enter the needed CURRENCY CODE and ensure that it is supported by the payment method you use. Choose the needed field for the PRICE/AMOUNT FIELD.

You can change the PAYMENT SUCCESS or PAYMENT FAILED MESSAGES if needed. Then, click the “Update” button. 

Once you are ready, hit the “Publish” button.

Following the How to Display a Form on the Front End guide, we add the created form to the necessary page.

Click the “Publish” button once you are ready with the settings.

Let’s proceed to the front end and fill in the form.

Once we click the “Proceed with Payment” button, we are redirected to the Stripe Checkout page, where we can choose whether to pay with Stripe or Klarna.

In this tutorial, we consider creating recurring payments using Stripe’s “Sandbox” mode. This mode simulates transactions during payment processing without real payments. 

Here, we exemplify the use of the embedded Stripe Payments add-on’s specific events, which trigger the corresponding Post Submit Actions based on the payment status. 

In particular, after registering on a site, a user can pay for a subscription to access the specific content. In turn, the content will be visible if the subscription is renewed. For more details, watch the How to Set Up Recurring Stripe Payments in WordPress Forms video.

To implement this functionality, install the Stripe Payments add-on and the JetFormBuilder plugin, and activate the Dynamic Visibility Module of the JetEngine plugin. 

What Stripe Payments PRO Add-on Does

The Stripe Payments add-on is a PRO add-on for the JetFormBuilder plugin. 

The add-on integrates pre-created Stripe subscriptions to forms and manages payment settings. It also transfers payments based on Stripe subscription settings (pricing plans, billing cycles, trial periods, subscription quantities, etc.). The add-on aggregates and manages subscription data through one dashboard.

The Stripe Payments add-on for JetFormBuilder provides the following specific events: STRIPE.SUBSCRIPTION.CANCEL, STRIPE.SUBSCRIPTION.EXPIRED, STRIPE.SUBSCRIPTION.SUSPENDED, STRIPE.SUBSCRIPTION.REACTIVATED, and STRIPE.RENEWAL.PAYMENT. 

These events trigger specific Post Submit Actions based on the corresponding payment status. 

For example, if the subscription has expired or been cancelled, some content on the site can be blocked. Watch the How to Set Up Recurring Stripe Payments in WordPress Forms video tutorial for more details.

Add-on functionality includes:

• Seamless integration — links forms and the Stripe payment system;
• Different types of payments — supports recurrent payments and one-time payments;
• Convenient subscription and payment dashboards — allow viewing and editing subscription details (subscribers, billing cycle, status) and payment details (payer, payment shipping, dates, gross sums) through the dashboard;
• Action Events — applies different actions as form settings (events) instead of the callbacks as PHP functions;
• Stripe events — the specific Post Submit Actions that trigger actions based on the payment status;
• Usability — applies PayPal gateway actions, syncs Access Token data, adds quantity fields, uses redirects, and creates custom payment success/failure messages.

Head to WordPress Dashboard > JetFormBuilder > Addons. Among the available items, find the Stripe Payments add-on and press the “Install Addon” button.

Next, go to WordPress Dashboard > Plugins and find the installed add-on. Hit the “Activate” button.

Also, you can install and activate this add-on as any other WordPress plugin. Read a detailed tutorial to go through the installation process.

Initially, log in to your Stripe Account or create a new one. Here, the Welcome to Stripe pop-up will be opened. You can skip it or complete all necessary steps.

Then, you will be redirected to the Stripe Dashboard, and the “Sandbox“ mode will be set by default.

Also, you can switch the “Sandbox“ to “Live“ mode or vice versa by clicking the “Switch to live account“ button in the top right corner of the page.

Next, navigate to the Stripe Dashboard > Product catalog tab and click the “Create product” button in the top-right corner.

After pressing this button, the Add a product pop-up will be unrolled. Here, fill out the Name (required) field and, if needed, other fields (e.g., Description, Image).

After that, scroll the pop-up down to the More options section. Here, set the “Recurring” option in the drop-down list, enter the product price in the “Amount (required)“ field, and select the currency. Then, choose the Billing period (e.g., “Monthly” or “Yearly)”). Finally, press the “Add product” button.

In the next step, you will be redirected to the Stripe Dashboard > Product catalog tab, where all added products are listed.

Next, move to the Stripe Dashboard > Developers > API keys tab.

Here, the generated API keys will be shown.

Copy the keys from the Publishable key and Secret key fields.

Before building the form, ensure Stripe gateways are activated on your website. Open the WordPress Dashboard > JetFormBuilder > Settings page and check the Payments Gateways settings.

Toggle the Enable Gateways switcher. Optionally, enable the Enable Test Mode switcher if you test with your Stripe account in the “Sandbox” mode. Insert the copied data from the Stripe Dashboard > Developers > API Keys Publishable key and Secret key fields to the WordPress Dashboard > JetFormBuilder > Settings Public Key and Secret Key fields.

Finally, hit the “Save” button.

Create a CPT

In this section, we create a Custom Post Type (CPT) with a Radio, Checkbox, Switcher, or Select meta field that has two options: whether this post is visible when the subscription is not renewed. 

More details on adding meta fields can be found in the How to Add Custom Meta Fields to WordPress Post via Meta Boxes tutorial. 

In this case, we create the “News” CPT with the “Premium” Radio Field, which has two possible options 一 “yes” and “no”. These options control whether the post is visible to site visitors: if the “yes” option is set, the CPT post will be visible only to subscribers.

After that, we fill out the CPT posts with the corresponding data.

Build a query

In the next step, move to the WordPress Dashboard > JetEngine > Query Builder tab and create a “Posts Query” query with the following settings: first, insert the Name of the query (here, the “Query for Premium”) and set the “Posts Query” Query Type.

Next, move to the Posts Query section and specify the needed CPT in the Post Type field (here, the “News” CPT) of the General tab.

Then, unroll the Meta Query tab and press the “Add new clause” button. After that, click the “Dynamic Tag” icon in the Field key/name field. Here, select the “JetEngine meta field” macro from the list, choose the needed meta field (here, “Premium”) in the Field drop-down, and save the changes by pressing the “Apply” button.

In the last step, set the “Like” or “In the list” Compare operator and insert the “no” Value, which means that only non-premium CPT posts will be shown.

Finally, if required, limit the number of posts displayed per page in the Posts Per Page field in the Pagination tab, then save the query.

In addition, read the JetEngine Query Actions for JetFormBuilder article to learn how to connect custom queries made with JetEngine’s Query Builder with forms. 

Build a listing item

Proceed to the WordPress Dashboard > JetEngine > Listings/Components tab to create a Listing Item. Display the needed meta fields via the Dynamic Field, Dynamic Image, or other widgets. In particular, we add the Heading widget to indicate the premium posts.

Next, apply the Dynamic Visibility conditions to this widget: move to the Advanced tab, open the Dynamic Visibility block, and enable the corresponding toggle. 

Here, set the “Show element if condition met” Visibility condition type. After that, select the following settings in the Conditions fields: “Equal” Condition, press the “Dynamic tag” icon, then choose the required Custom Field (here, “Premium”), and insert the “yes” Value of this field to specify that only specific posts should be shown (the “Premium” posts in this case).

Finally, publish the Listing Item.

Add the listings on a page

In this section, we add two Listing Grids to a page to display listings with different rules for showing items: the first shows only non-premium posts, and the second shows all posts.

First, open a page in your preferred editor and insert the first Listing Grid. We use Elementor and the Listing Grid widget correspondingly.

Then, after assigning the required listing, open the Custom Query tab, unroll it, enable the Use Custom Query toggle, and select the created query in the Custom Query drop-down.

After that, open the Advanced tab, then the Dynamic Visibility block, and enable the corresponding toggle. 

Here, set the “Hide element if condition met” Visibility condition type and select the “User Role is” Condition, and “Subscriber” User role.

Next, insert the second Listing Grid widget on the page and display the same listing via it. Then, open the Advanced tab, then the Dynamic Visibility block, and enable the corresponding toggle. 

Here, set the “Show element if condition met” Visibility condition type and select the “User Role is” Condition, and the “Subscriber” User role.

In this case, the functionality is implemented via two forms 一 one for registration of the user and the second for subscription to the premium news. Also, you can combine the registration and login forms as described in the How to Set Registration and Login in One Form Using Render States tutorial.

Build the registration form

Go to WordPress Dashboard > JetFormBuilder > Add New Form. The form will be opened in the Block Editor (Gutenberg). 

Select the needed pre-built form in the Welcome block or build the form from scratch.

In this case, we type the form’s name (the “Registration Form” text), press the “Start from scratch” button, and create a form with the Text Fields, Media Field, Radio Field, and Action Button.

This form creation tutorial explains how to build forms from scratch.

In the next step, navigate to the Post Submit Actions tab. Press the “+ New Action” button and select the “Save Form Record” Post Submit Action in the newly appearing Add new action window. If the “Save Form Record” action is set by default, press the “pencil” icon to configure its settings.

After that, activate a required toggle, for example, the Store the IP address and other request headers toggle to save the user’s IP address in the Edit Save Form Record window. 

Also, you can save the data from this Post Submit Action to Google Sheets, as the How to Save Form Records to Google Sheets tutorial explains.

Click the “Update” button.

After that, we add the “Register User” Post Submit Action since the form is intended to manage the subscribers. 

To provide a one-time payment using the Stripe gateway and configure the specific Post Submit Actions, read the Stripe Payment Form with JetFormBuilder PRO Addon tutorial.

In the Edit Register User pop-up, we assign the corresponding FIELDS MAP fields to the form’s block fields.

Read the Register Form tutorial to learn how to build register forms and manage their settings. 

After that, we scroll the pop-up down, set the “Contributor” USER ROLE, and enable the Log In User after Register toggle.

Once completed, press the “Update” button to close the pop-up.

The next step is configuring the Action Events. Navigate to the Post Submit Actions tab of the form settings and select the action you need from the corresponding drop-down menu. 

Hover over the action and press the crossed arrows-shaped button to open the Edit Action Conditions & Events pop-up window. Here, select the Events match tab and choose the “DEFAULT.PROCESS” option from the ADD EVENT drop-down menu.

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

Build the subscription form

We build this form from scratch. Here, we add the Hidden Field and set the “Current User ID” FIELD VALUE.

Next, we insert the Checkbox Field, type “Subscribe” as the LABEL, and set the “yes” VALUE.

The last field is the Action Button, whose text we change to “Subscribe”.

The next step is configuring the Stripe checkout settings. In this step, scroll down to the Gateways Settings section in the JetForm settings. 

Enable the Stripe Checkout option and click the “Edit” button below to access the settings. 

After that, the Edit Stripe Checkout Settings pop-up will be opened.

In this pop-up, you can add the API Keys to the specific form, in particular by pasting them into the PUBLIC KEY and SECRET KEY fields. In this case, we enable the Use Global Settings toggle to inherit the Public Key and Secret Key that we entered earlier in the JetFormBuilder settings.

After that, push the “Sync Access Token” button to synchronize the data. Once the synchronization is successfully updated, the “Refresh Plans From Stripe” button will appear.

Then, set the “Subscription” in the GATEWAY ACTION drop-down list and choose the “Manual Input” in the SUBSCRIPTION PLAN FIELD. Since we created only one subscription plan, it will be added automatically. Otherwise, select the needed one in the SUBSCRIPTION PLAN drop-down list.

In the next step, navigate to the Post Submit Actions tab. Press the “+ New Action” button and select the “Update User” Post Submit Action. In the newly appeared pop-up, assign the “User ID (will update the user)” option to the form’s Checkbox Field and set the “Subscriber” USER ROLE.

Press the “Update” button to close the pop-up.

After that, move to the “Update User” Post Submit Action for configuring the Action Events. 

Set the condition: hover over the action and press the “crossed arrows” button to open the Edit Action Conditions & Events pop-up window. Here, select the Events match tab and choose the “GATEWAY.SUCCESS” option from the ADD EVENT drop-down menu to enable the “Register User” Post Submit Action after the payment system verifies the payment.

Next, insert the second “Update User” Post Submit Action, assign the “User ID (will update the user)” option to the form’s Checkbox Field, and set the “Contributor” USER ROLE, which allows seeing the nonpremium content.

Press the “Update” button to close the pop-up.

After that, move to the “Update User” Post Submit Action for configuring the Action Events.

Next, set the condition: hover over the action and press the crossed arrows-shaped button to open the Edit Action Conditions & Events pop-up window. Here, select the Events Match tab and choose the “STRIPE.RENEWAL.PAYMENT” option from the ADD EVENT drop-down menu.

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

Place the forms on the page

Return to the page where you have previously inserted two Listing Grid widgets and place the created forms one under another via the JetForm widget.

Read the Displaying a JetFormBuilder Form in Any Page Builder tutorial to learn how to add the JetForm widget/block/element in Elementor, Block Editor, and the Bricks theme.

Test the Flow