Automated payments are no longer a fancy, it’s a necessity. Using the JetFormBuilder plugin’s functionality, you will be able to add the desired payment methods to your website. In this tutorial, you will how to activate the payment gateway option, how to add one to the form, and customize its settings.
How to enable the Payment Gateways option
Before JetFormBuilder v1.2.1, the Payment Gateways for both JetEngine and JetFormBuilder had to be set up manually. You were supposed to go to Appearance > Theme Editor, click on the functions.php file in the right sidebar, and add the filter:
add_filter( 'jet-form-builder/allow-gateways', '__return_true' );
With the latest update, there is a much more convenient way to enable the Payment Gateways option. Proceed to JetForms > Settings, locate the Payments Gateways tab, and click on it. Inside, you will see the Enable Gateways toggle switch. Once enabled, this option takes precedence over the manually added allow-gateways filter. This means that new users who haven’t enabled the gateways yet won’t have to alter the child theme file in any manner. For those users who had already added the filter by hand, there is no need to remove it from functions.php – the gateway will still be working. Turn the Enable Gateways toggle on to activate the functionality.
Below it, you will see another toggle – Enable Test Mode. Once enabled, this option takes precedence over PayPal’s sandbox-mode filter. Again, if you had that filter added to the code, it will continue working. So far, this option works for the PayPal payment system only.
Also, the Payments Gateways tab will output all the payment integrations you have added. By default, there is only one payment system – PayPal. All the new ones will land below it.
After you finish the Gateway activation, a new settings section called Gateways Settings will appear in the form editing interface. To find it, go to JetForms > Forms and open one of the created forms. In the right-side menu, you will see the Gateways Settings section.
Now, let’s go through the section settings.
- None. When selected, this option means none of the available checkouts will be attached to the current form;
- PayPal Checkout. Select this Radio button to create a connection between the PayPay checkout and the form you are currently editing;
- Stripe Checkout. If you want to connect the JetFormBuilder form to Stripe’s payment software, select this option;
- Edit. A button with a wrench icon on it opens the checkout additional settings pop-up window. This button can be active/inactive depending on the actions you set in the Post Submit Actions section;
- Please add ‘Insert/Update Post’ action. A service message that indicates the poorly configured post-submit actions.
NOTE. For proper functioning of the gateway, the form should contain at least one “Insert/Update Post” post-submit action. If it is missing, the form will not pass the Gateway and the “Edit” button will be unavailable.
How to configure the PayPal Gateway
In order to set it up properly, you need to register your PayPal app and receive the Client ID and Secret Key for your authentication.
How to obtain the PayPal API key
Go to the PayPal developer’s website and hit the “Log Into Dashboard” button. If you already have an account, log into it. Otherwise, create one.
NOTE. Please note that for a non-test form, you need to switch from “Sandbox” to “Live” in the PayPal Dashboard > My Apps & Credentials section, as stated in the official PayPal Developer tutorial.
For a form to work correctly in a live environment, make sure to set up the appropriate API credentials (Live or Sandbox, the instructions are here) and indicate a proper currency code (the list of codes can be found here).
Now, go to Dashboard > My Apps & Credentials and click on the “Create App” button. Give your new app a name and choose the “Merchant” App Type. Then click the “Create App” button once again.
You will be redirected to the app’s page. The Client ID and Secret Key are right there – just copy them.
Proceed to JetForms > Settings. In the Payments Gateways tab, find the PayPal Gateway API drop-down and click on it. Paste the obtained keys into the corresponding fields and press the “Save” button.
Now, go to JetForms > Forms and open one of the created forms. In the right-side menu, you will see the Gateways Settings section.Choose “PayPal Checkout” and click the “Edit” button to open its settings.
PayPal Checkout Settings
- Use Global Settings. Enable this toggle to pull the data from the PayPal Gateway API’s settings and pre-fill the Client ID and Secret Key fields;
- Client ID. Paste the Client ID that you obtained from PayPal into this bar;
- Secret Key. This is where you paste the Secret key, generated through the PayPal website;
- Currency Code. Type here a three-letter code that represents the currency used in your form;
- Before payment processed. Select here an action that you would like to be performed on the backend prior to processing the payment;
- On successful payment. In addition to showing the user a Payment success message, you can specify here the action that will be carried out after the payment went through;
- On failed payment. If the payment was not successful, you might want to send the user an email stating that the payment failed and suggesting how to fix that issue.
NOTE. The three advanced payment settings listed above appear if you add more than one action in the Post Submit Actions section and set them up.
- Create payment order notification. This is a Radio field type that will be shown when you create several “Insert/Update Post” actions. Choose the desired option here, and the form will execute it after the payment is carried out;
- Price/amount field. In this drop-down select, pick the corresponding price field within your form;
- Available macros list. These macros can be used in the Textarea fields below – Payment success message and Payment failed message – in case you would like to specify some details for the customer.
- %gateway_amount% – will provide the payment amount returned from the gateway template;
- %gateway_status% – will provide the payment status returned from the payment gateway;
- %field_name% – will provide any necessary details from the form field, the name of which you write instead of the “field_name”;
- Payment success message. This is a message that will be shown to the user after his/her payment is confirmed to be successful;
- Payment failed message. This message will be shown to the user in case his/her payment did not come through.
How to configure the Stripe Gateway
To set it up correctly, you need to register a new business on Stripe and receive the Publishable and Secret keys for your authentication.
How to obtain the Stripe API key
Go to the Stripe website and create a new account.
A confirmation letter will be sent to your email address. Proceed to the inbox and click the link in the email to pass the verification. Afterward, you’ll be redirected to Stripe’s dashboard page. Click on the New Business bar in the upper left corner of the sidebar, enter the account name and press the “Add name” button.
Good. Now, you will be able to locate two Stripe API keys – the first is Publishable key and the second is Secret key. Copy them
Proceed to JetForms > Settings. In the Payments Gateways tab, find the Stripe Gateway API drop-down and click on it. Paste the obtained keys into the corresponding fields and press the “Save” button.
Now, go to JetForms > 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.
Stripe Checkout Settings
The Stripe Checkout settings replicate the ones of PayPal Checkout except for one field. Instead of the Client ID field, there is the Public Key field. You are supposed to input here the Publishable Key obtained from Stripe. However, if you enable the Use Global Settings toggle, both fields with the keys will be pre-filled automatically.
That’s it. Now you know how to configure Payment Gateways and use them in JetFormBuilder forms.