How to Set Recurring Stripe Payments in a WordPress Form

The Stripe Payments add-on for JetFormBuilder links forms to Stripe’s software to facilitate online payments via the Stripe Gateway (including subscriptions, recurring payments, setting payment dates, etc.). It provides an AJAX redirect to the checkout page and enables specific actions before and after payments.

In this tutorial, we will consider a case of creating recurring payments using the “Sandbox” mode of Stripe functionality. This mode simulates transactions during payment processing without real payments. Follow the Stripe Payment Form with JetFormBuilder PRO Addon for more details.

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 according to the Stripe subscription settings (pricing plans, billing cycles, trial periods, subscription quantities, etc.). The add-on aggregates and manages subscription data through one dashboard.

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

Create a Product

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

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, Media Field, Radio Field, and Action Button.

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

Adjust 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 you entered earlier in the JetFormBuilder Settings tab.

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.

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

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

The next step is configuring the Action Events. 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 “DEFAULT.PROCESS” option from the Add Event drop-down menu to enable the “Register User” Post Submit Action after the payment system has verified the payment made or subscription issued.

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

Place the form on a page

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.

Test the Flow

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

Once the form is submitted, users will be redirected to the Stripe checkout page. Now, log in to your account and select the bank card, if needed. Press the “Continue” button.

Fill out the fields and scroll down the page. Finally, click the “Subscribe” button.

After that, you will be redirected to the form’s page.

Then, return to the Stripe account and navigate to the Stripe Dashboard > Subscriptions tab to observe if the subscription is added.

Also, the payment data will be collected in the WordPress Dashboard > JetFormBuilder > Payments tab.

The subscription data will be displayed in the WordPress Dashboard > JetFormBuilder > Subscriptions tab.