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 access an existing Payment Form?
Login to Sandbox/Production dashboard.
From the Navigation bar, select Payment Forms tab.
List View
This is the landing page once a user presses on the Payment forms tab. Following information can be seen:
payment form URL (which is clickable)
form creation date-time and
status (DRAFT, REVIEW, ACTIVE, INACTIVE, EXPIRED)
If there are a large number of forms, the listing is paginated with 10 rows per page. Sorting of forms based on status and creation date-time is possible. Filter is allowed on 2 parameters: form creation date-time range & form status.
Details View
On clicking on any of the existing payment form, some additional details about that form can be seen such as:
Payment Page ID - unique ID for each payment form
Page URL - this is the webpage for the payment form where user will land.
Return URL - this is the webpage where the user will be redirected to post completion of his/her payment journey
Created by - Merchant user who created the form
Email ID - Email of the merchant user who created the form
Expiry Date - Payment form expiry date if any date is set while configuring the Payment form
Survey Form - Denotes if the form created is payment form or survey form.
On this view, the user has an option to deactivate/delete a form. This comes with a warning prompt though to prevent inadvertent deletion/deactivation. Moreover, users can clone this form which can serve as base for a new form.
How to create a Payment Form?
Step 1: Form Configuration
On the List view, press on the Create Payment form button shown in blue on the top right corner.
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.
User provides redirectURL (optional) if he wants the customer to land on a webpage post completion of payment.
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.
Users can select an expiry period for the form (it is no expiry by default).
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.
Step 2: Form Input Details
Payment form Specifications
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
| Phone number without country code
|
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.
|
User can choose any image from his/her device for the icon and the banner.
.png)
Payment Form Structure Whatever gets added by the merchant is available for future reuse via ‘Choose Image’ popup.
.png)
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’.
.png)
Users can provide email address, phone number, address in ‘Contact Us’.
.png)
Users can embed links to various social media platforms such as Facebook, Twitter, Linkedin, Whatsapp.
.png)
User can provide terms and conditions for his/her product/service with desired formatting features available in a text editor.
.png)
User can mention heading and subheading. In the example below, we have captured heading as “Program Enrolment”.
.png)
Users can have 3 types of amount - fixed amount, amount within a range, fixed amount per unit with range of units purchased.
.png)
.png)
.png)
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.
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.
-LJunN.png)
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.
-hpLVp.png)
Users can also save the form as draft if he/she wants to come back to it later and make changes.
- Have questions?
- Need help? Contact support
- LLM? Read llms.txt
