How to create a payment form using JSN UniForm
Joomla core system allows users to create some types of basic form on their websites, excepting Payment form.
Today, let me introduce you an interesting feature of our powerful Joomla 3.x extension - JSN UniForm Pro edition: Payment integration. This feature allows you to create any form which needs a customer to pay directly via PayPal, Stripe, Authorize.net, or 2CheckOut. It’s very useful for businesses who sell only some products or services, as well as some organizations that want to get donations online via a payment form.
Now I will guide you step-by-step on how to use JSN UniForm to build a payment form in Joomla 3.x with PayPal plugin. In this article, I will create a form to order copywriting service as an example.
Step 1: Configure the PayPal gateway settings
1. Go to Components -> JSN UniForm -> Configuration
2. Choose the Payment Gateway in the “Integrations” section; you will see PayPal and the other payment plugins appears there.
- Please make sure that you enabled the PayPal plugin.
- Click the pencil button in the Action column to configure the settings.
" class="image-border" alt="Create a payment form in Joomla 3.x - Configure PayPal plugin" height="400" width="650" />
3. Follow the guidelines to get the API information.
4. Choose the currency as well as the position for the symbol currency to suit your needs.
5. Click Save to finish your configuration.
Step 2: Setup general properties of your payment form
1. Go to Components -> JSN UniForm -> Forms: Click the ‘New’ button and choose ‘Blank Form’ from the dropdown list.
2. Choose payment integration:
In the ‘General’ tab, section ‘Options’, please choose Payment integration as ‘PayPal’
Step 3: Design your payment form with fields include the price.
Now we will start to build the order form for copywriting service. My form includes 4 fields: Name, Email, Type of content with price, Details.
1. Add a Name field in the field list, and mark it as required.
2. Add an Email field, and mark it as required.
3. Add a field to show my service, here I choose Multiple choices. I edit the title and the item values and also mark this field as required. With JSN UniForm, you can edit the price by clicking the $ icon or input the syntax [PRICE:value] in the editor box.
Please make sure that you enable payment features on this field.
4. Add a paragraph field to make the details box, and it should be marked as required, too.
5. I changed the Submit Button Text to “Order NOW”
6. In the tab ‘Action’, I set up my form to redirect the customer to the "Thank you" page when they are done with the payment.
Step 4: Show your payment form in front-end
In this case, I will create a menu to show the form.
1. Go to Menus -> Main Menu -> Add new menu item
2. Choose the menu item type as JSN UniForm – Single form & select the Form as the Payment form you created, and Save the setting.
Step 5: Test your payment form
View the front-end and perform a test to see how it works. After you click the submit button, you will see the PayPal window appears and your customer can go ahead with the payment.
So, just within a few minutes, you can easily integrate the PayPal payment method into your JSN UniForm form. You also can create a form to ask about donations, or create a flexible products order form without any troubles based on the very-friendly user dashboard of JSN UniForm. Besides PayPal, JSN UniForm PRO edition is now also integrated with other most popular payment gateways, such as 2CheckOut, Authorize.net, and Stripe. And you don't have to pay an extra fee. Don’t miss the chance to increase your revenue with these powerful features.
