Learn how to use the PayPal and Stripe functionality with the JetFormBuilder plugin for WordPress. In particular, the tutorial details how to obtain the API keys, configure the JetFormBuilder settings, and add the gateway functionality to a specific form.
Configure the PayPal Gateway
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.
Configure the Stripe Gateway
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 be added to 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’ 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 “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.
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.
- 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;
- 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.
- RENEWAL.PAYMENT — performs the specified Post Submit Action if the subscription is renewed and paid again.
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.
Tutorial requirements:
- JetFormBuilder plugin at least 2.1.0 version installed and activated;
- JetFormBuilder PayPal Recurring Payments addon at least 1.1.0 version installed and activated;
- Elementor or WordPress block editor;
- Created form for the Recurring PayPal payments;
- JetEngine plugin installed and activated;
- JetPopup plugin installed and activated (optional, compatible with Elementor only).
After the successful subscription payment in PayPal with the JetFormBuilder form, a user gets the content during the paid period. However, when the subscription expires, the user still will have access to the content. The easiest way to avoid it is to apply Dynamic Visibility rules to the content according to the user role condition and fine-tune the logic with the action events.
Step 1. Set the form
Proceed to the JetFormBuilder > Forms tab on the WordPress Dashboard and click to edit the form that you have customized for the recurring PayPal payments.
Add the Hidden Field to the form and select the “Current User ID” option as the Field Value.
Head to the Post Submit Actions tab in the JetForm section and push the “+ New Action” button. Select the “Update User” option in the drop-down menu, and hit the pencil-shaped button.
For the Hidden Field with the “Current User ID” value (named as the user_id in our case), select the “User ID (will update this user)” option in the Fields Map. Set other fields so that they’re assigned to the appropriate user fields.
In the User Role, we select the “Subscriber” option so that all users with the Customer role who submit the form and buy the subscription also upgrade their role to Subscriber.
You can also pay attention to the Messages Settings and change the text that appears when users submit the form.
After you finish customizing the action, don’t forget to press the “Update” button.
Push the “Edit Conditions & Events” button under the “Update User” action.
Move to the Events match tab and select the GATEWAY.SUCCESS event. With this event, the action will be executed only after a user passes the checkout page on the side of the payment system. So the user will change the status to the subscriber after the successful payment.
More about other events, you can learn in the Action Event Settings.
Press the “Update” button. The event in the submit action will look like that:
To change the user role back to customer when the subscription expired, add another the “Update User” action. The Field Map settings are the same as in the previous action, but set the “Customer” User Role and hit the “Update” button.
Push the “Edit Conditions & Events” button under the newly created “Update User” action, move to the Events match tab and select the GATEWAY.SUBSCRIPTION.CANCEL, GATEWAY.SUBSCRIPTION.EXPIRED, and GATEWAY.SUBSCRIPTION.SUSPENDED events. Press the “Update” button.
At the end, two “Update User” submit actions will look like that:
Finally, click the “Update” button to update the form settings.
Step 2. Set the page with content
How to set the page with the Elementor editor
Set a pop-up (optional)
You can place the form right on the page or can set a pop-up with it. If you have the JetPopup plugin installed and activated, proceed to the JetPopup > Create New Popup tab, enter the title, and hit the “Publish,” and then “Edit with Elementor” buttons.
Drag-n-drop the JetForm widget to the pop-up and select the recently updated form. When you finish, press the “Update” button.
Set Dynamic Visibility
Proceed to the page with the content that you want to show only to subscribers.
Place a new section with two columns in the editor. In the first column, add some Image or Button widget that will show the message that the content is locked and users have to subscribe to see it. In the second column, place the content (e.g., video, image) that will be shown to subscribers.
You can also place widgets above each other and align them in the center.
Click on the first column and navigate to the Advanced section. Go to the Dynamic Visibility tab, open it and enable the toggle.
Select the “Show element if condition met” Visibility condition type, “User Role is not” Condition and “Subscriber” User role.
Move to the JetPopup tab on the same widget and attach the recently created pop-up. Select the Trigger Type you need. For example, if you want to attach the pop-up to the Button widget, select the “Click on Button” option. We’re good with the “Click on Widget” type.
If you haven’t created a pop-up, you can place the JetForm widget in the column and apply the Dynamic Visibility condition to it.
Click on the second column and proceed to the Advanced section. Go to the Dynamic Visibility tab, open it and enable the toggle for the second time.
Select the “Show element if condition met” Visibility condition type, “User Role is” Condition and “Subscriber” User role. It may seem that the conditions for the two columns are the same, but be attentive.
At the end of customizing, hit the “Publish/Update” button.
How to set the page content with Dynamic Visibility in the WordPress block editor
Create a new page or click to edit the existed one. We place the JetForm block on the page and select the form for the PayPal payments. If we click on the form, we will see the Dynamic Visibility icon.
Click on the icon and enable the toggle. Leave the “Show element if condition met” Visibility condition type, hit the “Add new item” button, and select the “User Role is not” Condition and “Subscriber” User role.
Close the pop-up and proceed to the content for subscribers (to the Video or Image block, for example).
Press on the “Dynamic Visibility” icon and enable the toggle. Leave the “Show element if condition met” Visibility condition type, hit the “Add new item” button, and select the “User Role is” Condition and “Subscriber” User role. It may seem that the conditions for the form and content are the same, but be attentive.
When you finish customizing the page, push the “Publish/Update” button.
Condition is set so a user can see form or content on the page, according to the user role.
Step 3. Check the Results
Open the page with the form and content on the front end. Since the user role on our current account is the customer, we can see only the image with the pop-up yet.
We click on the image, fill out the form in the pop-up, and hit the “Submit” button.
Log in to the PayPal account and buy a subscription. After that, you will return to the page where the Dynamic Visibility will show the paid content. That means that the user role was successfully changed.
To ensure that the role was changed, we log into the administrator account and move to the Users tab on the WordPress Dashboard.
As we can see, the user truly gets the subscriber role after the PayPal payment.
That’s all. Now you know how to set the logic so that the user role changes after a successful subscription payment in PayPal with the JetFormBuilder plugin and the JetEngine Dynamic Visibility to show content only to subscribers.
The PayPal Recurring Payments 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.
- What PayPal Recurring Payments PRO Add-on Does
- Install the Add-on
- Create a Subscription Plan
- Configure the JetFormBuilder Settings
- Create a Form
- Place the Form on a Page
- Test the Flow
- Manage the Subscription
- Make a Refund
What PayPal Recurring Payments PRO Add-on Does
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.
Install the Add-on
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.
Create a Subscription Plan
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.
Configure the JetFormBuilder Settings
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.
Create a Form
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 one or more options 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 event that is performed if the subscription term of use has expired;
- 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.
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
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.
Manage the Subscription
You can manage the subscriptions via PayPal and 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.
Manage the submissions via JetFormBuilder
Let’s check the subscription status by heading to WordPress Dashboard > JetFormBuilder > Subscriptions.
The new subscription info is right here. We can also see that its status is set to active.
If we hover over the item, we can spot the “Suspend” and “Cancel” links below the subscriber’s name.
Open the created 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.
Make a Refund
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.
That’s it; now you know how to use the PayPal Recurring Payments add-on available with the JetFormBuilder PRO plugin for WordPress websites.
Create a Stripe payment form with the help of one of the JetFormBuilder PRO addons, Stripe Payments.
- What Stripe Payments PRO Addon Does
- How to Create a Stripe Payment Form
- Add the Form to a Page in Elementor
- Add the Form Block in Gutenberg
- Complete the Form
What Stripe Payments PRO Addon Does
Stripe Payments is a JetFormBuilder addon that links JetFormBuilder and JetEngine forms to Stripe’s software, allowing you to carry out any payments online via Stripe Gateway.
With the help of this addon, your clients will be able to pay for product orders, all sorts of specialty services, tickets to various events, and so on. Stripe Payments will also come in handy if you offer booking and rental services.
Addon Functionality:
- Stripe Gateway
- AJAX redirect to Checkout
- Actions before & after payment
How to Create a Stripe Payment Form
Before we begin, make sure you have the following plugins installed and activated:
- JetFormBuilder — build a form, edit the post-submit actions, and add a CAPTCHA if needed;
- JetEngine — create a CPT, add custom meta fields and taxonomies;
- Elementor free — add the created form into the editor to finalize the customization and style up the page. Alternatively, you can use Gutenberg block editor; it is fully compatible with the JetFormBuilder plugin.
1. Add Custom Post Type
Proceed to the WordPress Dashboard > JetEngine > Post Types directory. Add a new custom post type by pushing the “Add New” button or open one of the previously created CPTs.
Once you open the custom post type editor and adjust the General Settings, scroll down to the Meta fields tab.
As your form will include fields for completing, some of them will repeat the CPT meta fields you edit here. That’s why you need to set up the potential form fields.
After implementing the changes, press the “Add/Update Post Type” button.
2. Create New Form
Before we start, let’s check the Payments Gateways settings by navigating to WordPress Dashboard > JetFormBuilder > Settings.
Here you can activate the Enable Gateways toggle to have the possibility to work with payments.
The following Stripe Gateway API section includes two Public Key and Secret Key fields, which should be completed with the corresponding data from your Stripe account.
Press the “Save” button after you fill in all the fields.
The following form will allow the user to register and enroll in an online course.
Go to WordPress Dashboard > JetFormBuilder > Add New.
Give a title to the form and move on to the default Text Field.
Change the Field Label and Form field name values to “Username” and “user_name” accordingly.
Hit the plus-shaped button to add one more Text Field block for email.
Fill in the Field Label and Form field name accordingly, and don’t forget to select the right field type in the Field Settings.
There will be two more fields for the password; however, you are free to add any field you want.
To store the price for this particular course and allow the form to carry out the payment, we need to create a field for the price.
To do it, click on the “Add Block” button and select a Hidden Field. Change the Form field name to “price” and set its value to the “Manual Input” in the Field Settings.
Enter the needed price in the Value field bar.
By the way, you can make the price field more secure by turning off the Render in HTML option. This way, a Hidden field will be invisible in the HTML markup.
Finally, change the button label, and let’s proceed to the form settings.
3. Set Up Post-Submit Actions
Open the JetForm tab and scroll down to the Gateways Settings section. Check the Stripe Checkout radio button.
Proceed to the Post-Submit Actions section and unfold it. Now, you can add post-submit actions to the form. For example, you could add the Insert/Update Post action to create a new post.
Click on the “Edit Action” button. In the Post Type field, select the custom post type you’ve previously created and set the Post Status to “Published.” You will find more information on this action in the “Insert/Update Post” action tutorial.
Don’t forget to hit the “Update” button before closing the window.
If you want to allow the users to register on the website, add the Register User action and set it up.
Add other actions by clicking the “New Action” button if needed and go back to the Gateways Settings section.
Now we can press the “Edit” button under the “Stripe Checkout” option and find out about all the fields we need to complete in the Stripe Checkout Settings.
- Use Global Settings — toggle it on to pull out the Public Key and Secret Key if you have entered this information in the JetFormBuilder > Settings > Payments Gateways directory;
- Public Key — complete this field with the Client ID that you can find in your PayPal account;
- Secret Key — fill in the Secret Key attached to your PayPal account;
- Gateway Action — here, you can choose the payment scenario. Select the “Pay Now” action to enable further settings.
To further manage the Stripe payment settings, click the “Sync Access Token” button. Once the Access Token is updated, you will get access to more gateway settings.
- Currency Code — add the needed global currency code.
- Price/amount field — you can choose a form field price from the fields list here.
Lastly, adjust the Payment success/failed messages and update the settings to save all the completed data.
4. Set Up Action Events
Now, it is time to configure the scenario that will be performed before payment is processed, on successful payment and the failed payment. To do this, we need to give the post-submit actions certain Events.
For example, you can choose to create a post before the payment is processed, register the user after successful payment, and send an email if the payment failed.
Click on the “Edit Conditions and Events” button to add action events under the needed post-submit action.
In the popup, proceed to the Events Match tab. Select one or several events from the dropdown.
- DEFAULT.PROCESS – this is the moment when actions are processed. The current event will trigger the post-submit action before the payment gateway.
- BAD.REQUEST – this event is executed after request processing in case some of the fields in the form return errors. For example, the action will be triggered if the user uploads a file to the Media field in the wrong format or if the user exceeds the allowed number of files to upload. This event bypasses the DEFAULT.PROCESS event.
- DEFAULT.REQUIRED – this event is executed in any case. It is the last triggered event before the form response is submitted. The event runs even in case some of the other post-submit actions are not processed successfully. Note: if you set the DEFAULT.REQUIRED event to several actions and one of your actions is the Store Form Record action, make sure to put the Store Form Record action the last in the row.
- GATEWAY.SUCCESS – this one is executed after the user passes the checkout on the side of the payment system; if a payment is successful, the action will be triggered.
- GATEWAY.FAILED – It is performed when the user returns from the checkout page of the payment system without making a payment.
Note that the Store Form Record action does not require any Event.
Now that you have added Events to the post-submit actions, don’t forget to make the necessary fields in the form required.
Push the “Publish/Update” button on the top of the form to publish the final result.
Add the Form to a Page in Elementor
Now decide where you want to place the newly built form. In the described case, we will place the form on a separate page.
So, we navigate to WordPress Dashboard > Pages. Open an existing page or create a new one and edit it with Elementor.
Customize it according to your needs and, right in the editor, look for the JetForm widget. Select the form you have just created in the Choose Form field.
Proceed to the next tab and style the form, so it matches your website’s design.
Add the Form Block in Gutenberg
JetFormBuilder works not only with the Elementor page builder. This plugin allows adding the form block using Gutenberg as well.
Open the page in the default WordPress Editor and add a JetForm block.
Complete the Form
Open the page where you have placed the form on the front end.
As you can see, the page looks right as we adjusted. Complete the fields and press the button you have set as a submit one.
Once the obligatory fields are completed correctly, the submitted form will redirect you to the Stripe payment page.
Here the user can fill in all the details needed for successful payment.
Now you know how to adjust the form with the convenient Stripe payment using the JetFormBuilder plugin.
One of the most prominent JetFormBuilder features is the ability to receive PayPal payments just with the help of the correctly adjusted form. So let’s discover how you can set the needed form and keep all payments in a well-organized database table.
Build a WordPress Form
Initially, let’s check the Payments Gateways settings by navigating to WordPress Dashboard > JetFormBuilder > Settings.
Here you can activate the Enable Gateways toggle to have the possibility to work with payments. Enable Test Mode is another available toggle that can be activated to test the payment system.
The following PayPal Gateway API section includes two Client ID and Secret Key fields, which should be completed with the corresponding data from your PayPal account.
Press the “Save” button after all the fields have been filled in.
Go to WordPress Dashboard > JetFormBuilder > Forms and press the “Add New” button to build a form from the ground up.
Hover over the desired item to edit the existing form.
Adjust all the needed fields in the form. For instance, we use the Booking Form pattern that perfectly meets our needs.
Except for the form fields, we need to work on the settings of the entire form. So open the JetForm tab and scroll down to the Post Submit Actions section. Add some actions to the form by clicking the “New Action” button.
Go to the Gateways Settings section that precedes Post Submit Actions.
Here we pick the “PayPal Checkout” option and press the “Edit” button.
Now let’s find out about all the fields we need to complete in the PayPal Checkout Settings.
- Use Global Settings — toggle it on to pull out the Client ID and Secret Key if you have entered this information in the JetFormBuilder > Settings > Payments Gateways directory;
- Client ID — complete this field with the Client ID that you can find in your PayPal account;
- Secret Key — fill in the Secret Key attached to your PayPal account;
- Gateway Action — select the scenario that will be performed once the form is submitted;
- Request Button — push the “Sync Access Token” button to synchronize the data and proceed to the additional customization fields;
- Currency Code — add the needed global currency code;
- Price/amount field — select one of the form fields representing the final price for the rendered service.
Look at the Available macros list; you can select one of the presented options and paste them into the following fields.
- Payment success message — complete the field with the text that will be shown once the user makes a payment;
- Payment failed message — fill in a similar field. However, now it is meant for the unsuccessful payment.
Push the “Update” button to save all the completed data and the “Publish/Update” one on the top of the form to publish the final result.
Add the Form to a Page
Now decide where you want to place the newly built form. In the described case, we will put the form in a pop-up that will be triggered once the button on the single page is clicked. But don’t forget that you can place the form on the various pages.
So, we navigate to WordPress Dashboard > JetPopup > All popups. Here we can edit the existing popup or build a new one by pressing “Create New Popup.”
In the firstly appeared window, we select the layout preset of the pop-up.
Then click the “Create Popup” button, and, right in the editor, look for the JetForm widget. Select the form you have just created in the Choose Form field, and adjust the other settings if needed.
Also, we press the gear-shaped button to change the popup name in the Title field of the General Settings.
Press the “Publish/Update” button after all the customizations have been made.
Continue by following the WordPress Dashboard > Crocoblock > Theme Templates pathway and open the Single page editor.
Here, place a Button, set and style it, and open the Advanced tab. Find the JetPopup section and choose the created pop-up in the Attached Popup field.
Complete the following fields, and now you are free to push the “Update” button whenever you are satisfied with the result.
Complete the Form
As we work with tours, we head to the specific tour page. If you have placed the form on the other page, open this page on the front end.
As you can see, the page looks right as we adjusted. Press the button which triggers the popup with the form.
And the form is now shown in the popup. Complete the fields and press the button you have set as a submit one.
Yet, if all the obligatory fields are completed correctly, the submitted form will redirect you to the PayPal payment page.
Here the user can fill in all the details needed for successful payment.
Check the Payment
For now, if the user is still completing the required data, you can already see the order by going to WordPress Dashboard > JetFormBuilder > Payments.
The unfinished payment is now marked as “Created” and “Not attached.” The same situation will appear if the user closes the payment window.
Though, if the user completes a payment form successfully, the payment changes its status to “Completed” and gets a Payer.
You can also see the payment creation date in the Created tab, the total amount in the Gross tab, and the payment ID.
Switch pages with the help of pagination and set the desired amount of the Results per page.
Press the item’s title in the Payment type column to see the payment details.
Now all the needed information is shown in the database table.
Pay attention that Ip Address and User Agent are set as “Not recorded.” It is caused by the disabled “Store the IP address and other request headers” toggle in the Save Form Record post-submit action editor.
Moreover, we can head to the WordPress Dashboard > JetFormBuilder > Form Records to see more information regarding the completed form.
As you can see, the first form was created by the same author as the payment, so let’s check the additional information by pressing the title in the Form column.
Here you can see the data about the completed form in the Form Fields, General Values, and Related Payment fields.
Now you know how to adjust the form with the convenient PayPal payment and store all the financial data in one systemized WordPress database table.