JSN UniForm Tutorials – Video 8: How To Create A Payment Form

JSN UniForm Tutorials – Video 8: How To Create A Payment Form


In this video we will learn about how to create a payment form with four simple steps using JSN Uniform. This is a payment form which allows the customer to select a product, choose the license and “Include JSN PageBuilder 3” option. Let’s try to select a product and make payments. lick the “Checkout” button to proceed to payment. The PayPal login page will be shown, you need to login to your PayPal account. After logging in, you can see your invoice. Now, let’s start to create a form like this. The first step is the general setting. Make sure JSN Uniform extension is installed on your Joomla admin site. Click on the Component menu item to work with JSN Uniform. Click the New button to create the payment form from blank form. In the General tab, you need to insert the title of your form and don’t forget to select Payment Integration. By default, PayPal is installed so we just need to select the settings for this Integration. Save and close the current form, go to Integrations tab to change the settings for your PayPal. In the Paypal row, click on Setting button, Payment Gateway Settings modal will be shown. You can select Payment Type as Standard or Express. In this video we will select Standard Turn on Test Mode and insert your Sandbox Merchant Email. And settings for extra options if you want. Click on the Save button to save all the settings. The second step is to design your form. In the Design tab, click on the Add Fields button to select the fields. The first field is Dropdown, select and edit this field. In the General tab, replace the name with the Product. In the Values tab, click on the Edit button to change the values of this field. The second field is Multiple Choice, This field allows you to choose only one item on the list. Replace the title, in the General tab and change the values in the Values tab. We will change the values by the licenses of JoomlaShine products. For example Free, Pro Standard, Pro Unlimited, click on the Done button after finishing. Now, we need to set the price for each license. Click on the Dollar icon to Add Price and Quantity for each item. Also you can hide or show fields when your customer selects items by clicking the Lightning icon. When the fields have prices added, don’t forget to enable the payment feature for those fields. And select “Yes” to show the price label. The last field is Pay With, select the Multiple Choice field, Replace the title, in the General tab and change the values in the Values tab. Click on the Dollar icon to Add Price and Quantity for each item. You can also edit the “Subtotal” and “Submit” buttons. Replace the “Submit” button with “Checkout”. Click the “Save” button and go to the next step to preview your form Click on the Preview button on the toolbar to preview the form on the frontend. In preview mode all the submit actions are disabled. Here you can see all the fields of your form as on the frontend. The final step is to show the form. On the toolbar, click on the Save & Show button JSN Uniform extension allows you to show the form via menu item, in the module position and inside the articles In this video we will show the form via menu item, select the menu you want to show, you should be redirected to the Menus: New Item page. Insert the Menu title, click on the save button. Go to the frontend to check the form has been created. Click on the “Payment Form” menu item This is the payment form like the form at the beginning of the video Let’s try to select a product and make payments. Let’s go to checkout So JSN Uniform helps you create a payment form in 4 simple steps and in only a few minutes. Try installing and creating your own payment form. Thank you for watching. Please check our other videos to learn more about how to work with JSN Uniform.

Leave a Reply

Your email address will not be published. Required fields are marked *