Stripe Payment Form with JetFormBuilder PRO Addon

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 check-out 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 transferring 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;
• apllies 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.

Additional benefits:

• fully fledged Stripe payment form tutorials;
• the Facebook Community;
• 24/7 support;
• a YouTube channel.

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. In case you intend to obtain recurring settings, learn how to configure Stripe’s Products, set up a custom recurring subscription, and 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.

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