Still need help?
This article explains the features of the Payment Gateway block in Clappia and how it can be used in your app for secure payment collection.
Go to Design App > Add field. Click on the Payment Gateway block and configure it by editing on the right panel.
The label is the name of the block that the end user sees in the app.
Example: Payment for Event or Click to Pay.
Clappia supports multiple payment gateways – Razorpay, Stripe, PayPal and ICICI Eazypay. The setup process is similar for all the options. You must first head over to the payment gateway website and have an account (if not already), without which you will not be able to integrate it with Clappia.
This guide will take Razorpay as an example.
You can configure the currency either manually or by using a field variable.
For manual entry, type in the currency code like "INR" or "USD".
If you have a dropdown or another field that defines the currency, you can use that field as the variable. For example, if the user selects a currency from a dropdown, use @ followed by the field name, as the variable.
Similar to currency, you can either manually enter the amount or pull it from another field.
For manual entry, type in a fixed amount, such as “50” for a standard fee.
You can use another field to dynamically generate the amount. For instance, if you have a product selection dropdown, the amount can be linked to the product’s price field.
Note: Any key generated must remain confidential to avoid any security risks.
This field is necessary to connect your Razorpay account for payment processing.
This field is also required for the Razorpay integration.
Enable this option if the payment is mandatory for the app submission. If enabled, users will not be able to submit the form unless a successful payment is made.
In App Home, if the payment button has not been clicked or the user skips the payment, they will not be able to make a submission if the Payment Gateway field is set as Required. This ensures that users must complete the payment process before submission.
The Advanced Label option allows you to change the label of a field dynamically based on a condition you define. Instead of always showing the same fixed label under the ‘Basic’ tab, the field can display different labels depending on requirements of the form. Use spreadsheet-like functions such as IF, AND, OR, etc. and make use of other field variables to set your conditions. Type @ and select the field.
This is useful when the meaning of a field changes based on context, business logic, or user choices.
For example:
If you have a dropdown called Payment with options “Subscription Fee” and “Service Charge”.
Label should match the payment context.
So:
– If Subscription Fee, show “Pay Subscription Fee”
– If Service Charge, show “Pay Service Charge”
Formula:
IF({payment} = "Subscription Fee", "Pay Subscription Fee", "Pay Service Charge")
This allows the same field to adapt its displayed purpose without needing multiple separate fields.
The Advanced Description option works exactly like Advanced Label, but it changes the description text instead. This is useful when guidance or instructions for a field need to change depending on earlier answers.
For example, using the same scenario from Advanced Label:
If you have a dropdown called Payment with options like “Subscription Fee” and “Service Charge”, you may want the description of your Payment Gateway field to guide the user differently depending on what they selected.
So:
– If the user selects Subscription Fee, the description could say: “Proceed to pay the subscription fee using the chosen gateway.”
– If the user selects Service Charge, the description could say: “Proceed to pay the service charge using the chosen gateway.”
Formula:
IF({payment} = "Subscription Fee", "Proceed to pay the subscription fee using the chosen gateway.", "Proceed to pay the service charge using the chosen gateway.")
This helps users understand what is required from them without showing unnecessarily long or irrelevant instructions.
Additional Examples (Apply to Both Advanced Label and Advanced Description)
1. Showing nothing until a selection is made
For example, if you have a dropdown field called Visit Category with options “Routine” and “Urgent”, you may want the label or description of a field to remain blank until the user first selects a category.
Once a selection is made:
Formula (can be used in either Advanced Label or Advanced Description):
{visit_category}The label/description stays empty until the dropdown has a selected value.
After the user picks an option, the selected text (Routine or Urgent) becomes the label or description.
2. Changing label/description based on language selection
For example, if your form includes a dropdown field called Select Language with options English, Spanish, and French, you can show the label or description in the selected language.
So:
Formula (can be used in either Advanced Label or Advanced Description):
IF({select_language} = "English", "Enter details", IF({select_language} = "Spanish", "Ingrese detalles", "Entrez les détails"))The formula returns the text for the selected language.
Only one label/description is shown at a time, depending on what the user picks in the Select Language dropdown.
1. Variables do not change
When a field is created, its variable name is derived from the label you set in the Basic tab. That variable name is what you must use in formulas, workflows, and other logic. The visible label or description shown by Advanced Label / Advanced Description does not change the variable name.
2. Submissions tab: table view vs right panel
In the Submissions area, the table view always displays the labels from the Basic tab. When you open an individual submission, the right panel shows the labels and descriptions as they appear in the form (i.e., the Advanced Label and Advanced Description applied for that submission). This keeps the submission list consistent while letting reviewers see the context-aware labels and descriptions when viewing a record.
3. Bulk Edit shows Basic tab labels and descriptions
When you need to Bulk Edit submissions, the spreadsheet you download shows the labels and descriptions from the Basic tab only. Advanced Label and Advanced Description are not applied in Bulk Edit, so keep that in mind when preparing bulk updates.
4. Some fields cannot be used inside Advanced Label/Description formulas
Certain block types do not expose a variable that can be referenced in Advanced Label or Advanced Description. If a block does not expose a variable, you cannot use it inside the formula.
Geo Address
GPS Location
PaymentGateway
Audio
Live Tracking
Signature
Code Scanner
NFC Reader
Get Data from RestApi
Get Data from Other Apps
Get Data from Google Sheets
Get Data from Database
AI Block
Text, HTML & Embedding
Attached Files
Image Viewer
Video Viewer
PFD Viewer
Code block
Progress Bar
Action Button
This is an optional field where you can provide the name of your company as registered in Razorpay. This may appear in the payment processing details provided to users.
You can provide a public URL of your company’s logo to be displayed during the payment process. This adds branding to the payment interface.
This option is used to conditionally display the Payment Gateway field based on user input in other fields. For example, you can configure it to show the payment block only if a certain selection is made.
Once the Payment Gateway field is configured and saved, an additional variable, {payment_ga#status}, is generated. This variable represents the payment status and can be used in fields such as the calculations & logic block or the validation block to ensure that the payment was successful or failed.
Payment Status Values:
You can configure the app to validate payments before allowing submission using the {payment_ga#status} variable.
Add a Validation block in the app. On the right panel:
This ensures that only submissions with successful payments are allowed to proceed when users click on the Submit button of the app.
Add a Validation block in the app. On the right panel:
If a payment fails, an error message will appear, and users will not be able to make a submission on the app.
In addition to the status variable, another variable is automatically generated when you configure the Payment Gateway block:
{payment_ga#transactionId}
This variable stores the unique transaction ID generated by the payment gateway (for example, Razorpay) after a successful payment.
To capture and display this transaction ID inside your app:
In Design App, add a Calculations & Logic block. In the right panel, go to the Formula field and type @ to bring up the list of available fields and variables.
Search for the label of your Payment Gateway block (for example, Payment) and select the variable ending with #transactionId.
Example: {payment_ga#transactionId}
Save the configuration.
Now, in App Home, whenever a user makes a successful payment, the generated transaction ID will automatically appear in the Calculations & Logic block.
If a user clicks on the payment button without selecting currency and amount, an error will appear. This will only happen if the Payment Gateway field is configured to take in currency and amount dynamically from other fields, and not if the values are pre configured. In the below image, the Payment Gateway field takes in the values from the ‘Select Currency’ and ‘Amount’ fields.
Once the fields are filled in, the user can then click on the payment button.
In case the currency is INR:
Once the payment button is clicked, a pop up window will appear.
Contact number needs to be filled in first.
Select the payment option to pay the amount.
If the payment is successful, there will not be any error message. In the below image, a successful validation message has also appeared since a validation block has been added to the app.
If the currency is in USD:
A slightly different payment window will appear.
In case of unsuccessful payment, an error message will appear at the bottom of the payment gateway button. In the below image, an unsuccessful validation message has also appeared since a validation block has been added to the app to show errors.
If the validation block is not added and the payment gateway field is not marked as ‘Required’ in its configuration, then users will be able to click on Submit even if the payment is unsuccessful. In case you do not want to use the validation block, simply enable the Payment Gateway field as ‘Required’ in the Design App and if the payment is unsuccessful, users will not be able to make a submission.
The payment gateway feature is available on the Professional and Enterprise plans, and cannot be used when link sharing is enabled.
You can use a Calculations & Logic block, and in the formula option, type in @ payment gateway status.
It will show \"Success\" for successful payments and \"Error\" for unsuccessful payments.
L374, 1st Floor, 5th Main Rd, Sector 6, HSR Layout, Bengaluru, Karnataka 560102, India
3500 S DuPont Hwy, Dover,
Kent 19901, Delaware, USA
.svg){kind=small}
3500 S DuPont Hwy, Dover,
Kent 19901, Delaware, USA
L374, 1st Floor, 5th Main Rd, Sector 6, HSR Layout, Bengaluru, Karnataka 560102, India