Category: Payments Integrations

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

Obtain the PayPal API Key

Go to the PayPal Developer website and hit the “Login” button if you already have an account and log into it. Otherwise, create 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.

Configure the JetFormBuilder settings

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 Client ID and Secret Key into the corresponding fields and press the “Save” button.

Adjust the form’ settings

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 the “PayPal Checkout” option and click the “Edit” button to open its settings.

Then, the Edit PayPal Checkout Settings pop-up will appear.

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

Once synchronization is completed, the text on this button turns to “Access Token updated.”

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

Learn how to create a booking form, set the Post Submit Actions, and manage payment data via the WordPress dashboard from the How to Create a Booking Form tutorial.

Install and activate the Stripe add-on

Navigate to the WordPress Dashboard > JetFormBuilder > Addons tab and install and activate the Stripe Payments add-on.

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.

Configure the JetFormBuilder settings

Proceed to WordPress Dashboard > JetFormBuilder > Settings > Payments Gateways tab. Once the Stripe addon is activated, the Stripe Gateway API drop-down will appear on the Payments Gateways tab. Unroll this tab, paste the copied Publishable key and Secret key into the corresponding fields, and press the “Save” button.

Adjust the form’s settings

Now, go to WordPress Dashboard > JetFormBuilder > Forms and open one of the created forms. If you need to build a booking form with the payment functionality, refer to our How to Create a Booking Form guide.

In the right-side menu, you will see the Gateways Settings section. Choose “Stripe Checkout” and click the “Edit” button to open its settings.

Then, the PayPal Checkout Settings pop-up will be open.

The Stripe Checkout Settings are 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 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 and click the “Update” button in the pop-up.

Using WooCommerce for Payment Processing

If you prefer to process payments through WooCommerce instead of connecting payment gateways directly in JetFormBuilder, you can use the WooCommerce Cart & Checkout Action add-on.

This add-on sends the submitted form data to WooCommerce, where all payment gateways configured in your WooCommerce store (for example, Stripe, PayPal, or others) will be available during checkout.

Use this method if you already have WooCommerce set up with its own payment gateways and want JetFormBuilder to create orders or pass product data to WooCommerce, rather than processing payments directly through the form.

Action Events Settings

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 format file or exceeded the file limit). 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;

NOTE

If you use several actions with the DEFAULT.REQUIRED event, set the Save Form Record action last; otherwise, the status for the completed action will be saved incorrectly.

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

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.That’s it. Now you know how to configure WordPress Payment Gateways and use them in JetFormBuilder forms.

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” user name is set by default, but you can set the needed one.

Unroll the Sales tab and then observe available pages. The Subscriptions page is the one we need.

After that, you will be redirected to the Manage subscriptions page. Here, switch to the Subscriptions plans tab.

So, here we can see the PayPal subscription plans in the same named tab. 

Click on the “Create Plan” button to build a new one.

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