--- page_source: https://docs.juspay.io/payment-form/docs/overview/create-payment-form page_title: Create Payment Form --- # Payment Forms Juspay payment form enables collecting payments from your customers on Web or Mobile. The form links may be directly emailed or messaged to your customers. ## How to create a Payment Form? ### Step 1: Form Configuration 1. On the List view, press on the Create Payment form button shown in blue on the top right corner. 1. User needs to provide a unique end-point for the form-path for the new form. There comes a green banner at the bottom if the form-path or end-point is available for use. 2. User provides redirectURL (optional) if he wants the customer to land on a webpage post completion of payment. 3. User needs to select a clientID. This governs how the payment flow UI will be for the customer and is merchant-specific. Merchants can configure the UI in Juspay Studio. Please check with your Juspay POC to get details about clientID and instructions for using Juspay Studio. 4. Users can select an expiry period for the form (it is no expiry by default). 5. By default, ‘survey form’ is toggled off. User can toggle this on if he/she just wants to collect some customer data and not ask for any payment from the customer. ![Image](https://dth95m2xtyv8v.cloudfront.net/tesseract/assets/resources/Screenshot%202023-08-25%20at%206.24.48%20PM.png) *Create Payment Form* ### Step 2: Form Input Details #### Payment form Specifications ![Image](https://dth95m2xtyv8v.cloudfront.net/tesseract/assets/resources/Screenshot%202023-08-25%20at%206.31.48%20PM.png) *Payment Form UI* Left Side | Field | Required field? | Specifications | |---|---|---| | Banner Image | Optional | Maximum Size 5MB. Aspect Ratio 6:1 | | Logo Image | Optional | Maximum Size 5MB. Aspect Ratio 1:1 | | Company Title | Optional | Maximum Character allowed 100 | | Page Name | Mandatory | Maximum Character allowed 100 | | Form Description | Optional | Maximum Character allowed 1500 | | Description Image | Optional | Maximum Size 5MB | | Contact Us - Email | Optional | Standard Email Syntax | | Contact Us - Phone Number | Optional | Standard 10 digits | | Contact Us - Address | Optional | No validation | | Follow Us | Optional | Standard URL pattern | | Terms & Conditions | Optional | Maximum Character allowed 1500. (This would be shared with Juspay’s Terms & Conditions) | Right Side | Field | Required? | Specifications | |---|---|---| | Heading | Optional | Maximum Character allowed 50 | | Subheading | Optional | Maximum Character allowed 100 | | User Input fields | Mandatory | Validation checks vary w.r.t. the type of input field selected. | 1. User can choose any image from his/her device for the icon and the banner. ![Image](https://dth95m2xtyv8v.cloudfront.net/tesseract/assets/resources/unnamed%20(14).png) *Payment Form Structure* * Whatever gets added by the merchant is available for future reuse via ‘Choose Image’ popup. ![Image](https://dth95m2xtyv8v.cloudfront.net/tesseract/assets/resources/unnamed%20(13).png) *Upload image as per need.* 2. Users can write a detailed form description with desired formatting features available in a text editor. Images could also be uploaded in the ‘Form Description’. ![Image](https://dth95m2xtyv8v.cloudfront.net/tesseract/assets/resources/unnamed%20(11).png) *Form Description* 3. Users can provide email address, phone number, address in ‘Contact Us’. ![Image](https://dth95m2xtyv8v.cloudfront.net/tesseract/assets/resources/unnamed%20(10).png) *Contact Details* 4. Users can embed links to various social media platforms such as Facebook, Twitter, Linkedin, Whatsapp. ![Image](https://dth95m2xtyv8v.cloudfront.net/tesseract/assets/resources/unnamed%20(9).png) *Add your Social media links* 5. User can provide terms and conditions for his/her product/service with desired formatting features available in a text editor. ![Image](https://dth95m2xtyv8v.cloudfront.net/tesseract/assets/resources/unnamed%20(3).png) *Add terms and conditions* 6. User can mention heading and subheading. In the example below, we have captured heading as “Program Enrolment”. ![Image](https://dth95m2xtyv8v.cloudfront.net/tesseract/assets/resources/unnamed%20(1).png) *Form Headers* 7. Users can have 3 types of amount - fixed amount, amount within a range, fixed amount per unit with range of units purchased. ![Image](https://dth95m2xtyv8v.cloudfront.net/tesseract/assets/resources/unnamed%20(4).png) *Price per item* ![Image](https://dth95m2xtyv8v.cloudfront.net/tesseract/assets/resources/unnamed%20(6).png) *Range price* ![Image](https://dth95m2xtyv8v.cloudfront.net/tesseract/assets/resources/unnamed%20(5).png) *Fixed Price* 8. Naming of each field could be varied as per user’s needs. These fields could also be hidden (removed from the payment form). It goes without saying that the amount field can’t be removed if ‘survey mode’ is off. 9. Users can add additional fields of various types such as date, url, PAN, email, city, pincode, etc. As of now, there is no support for dropdown-type fields but this will be added soon. ![Image](https://dth95m2xtyv8v.cloudfront.net/tesseract/assets/resources/unnamed%20(3)-LJunN.png) *Input Field Options* ### Step 3: Form Preview At this stage, users can try out newly created forms (in draft stage) in mobile or desktop view. He/she can switch to dark mode as well. These are possible via 2 toggle buttons at the top. If the user is satisfied with the form, he/she can submit the same for approval from Juspay SPOC. Once submitted, form status will change from DRAFT to REVIEW. ![Image](https://dth95m2xtyv8v.cloudfront.net/tesseract/assets/resources/unnamed%20(1)-hpLVp.png) *Final Review* Users can also save the form as draft if he/she wants to come back to it later and make changes. ![Image](https://dth95m2xtyv8v.cloudfront.net/tesseract/assets/resources/unnamed.png) *Approval from Juspay POC* ### PF report How to download PF order report? 1. Goto Monitoring → reports section on your EC dashboard 2. Select “Standard reports → Payment Form report“ 3. Select the form for which you want to download report along with date range and press on ‘Download‘ 4. Report will be downloaded to your device as a csv file. This will have all customer data (including PII) as separate columns. For normal user-case, report will have: order status, orderID, order amount, date created For tokenisation use-case, report will also have: tokenreference, tokenization status, card_brand, card_last_four_digits ![Image](https://dth95m2xtyv8v.cloudfront.net/tesseract/assets/add-ons/Screenshot%202024-05-22%20at%208.03.36%E2%80%AFPM.png)