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, and PayPal. The setup process is similar for all three options.
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.
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.
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.
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