Payment Gateway

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.

Use Cases

1. Event Registration: Collect payments for events such as workshops or webinars.
2. Collecting Payments for Service Requests: For collecting fees for services like consultations, audits, or repairs.
3. Vendor Payment Portal: Allow vendors or suppliers to pay for goods or services.
4. Course Registration Fees: Collect fees for courses, workshops, or training sessions.
5. License or Permit Fees: Collect fees for issuing licenses, permits, or certifications.

Help Videos

Editing the Block

Go to Design App > Add field. Click on the Payment Gateway block and configure it by editing on the right panel.

Label

The label is the name of the block that the end user sees in the app.

Example: Payment for Event or Click to Pay.

‍

Payment Gateway

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.

Currency

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.

‍

Amount

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.

‍

Razorpay Settings

Note: Any key generated must remain confidential to avoid any security risks.

‍

Razorpay Key ID

This field is necessary to connect your Razorpay account for payment processing.

• Sign up for an account at Razorpay if you don’t have one.
• Navigate to Account Settings > API Keys.
• Click on Generate Live Key to get your Razorpay Key ID.
• Enter the generated Key ID into this field.

‍

Razorpay Key Secret

This field is also required for the Razorpay integration.

• After generating the live key, you will also receive a Key Secret.
• Copy this key and enter it into the Razorpay Key Secret field in Clappia.

‍

Required

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.

‍

Advanced Options

Razorpay Company Name

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.

Public Link of Company's Logo

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.

Display this field if

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.

• Example: If the user selects "VIP Event" in a dropdown, the Payment Gateway field will appear, indicating that payment is required. To do this, use an Excel-like formula in this field: @ dropdown field name=“VIP Event”.

‍

Payment Status Variable

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:

• Success: Indicates a successful payment. Value is stored as "Success".
• Error: Indicates a failed payment. Value is stored as "Error".

Usage in Validation Block

Validation for Payment Success or Failure

You can configure the app to validate payments before allowing submission using the {payment_ga#status} variable.

Successful Payment Validation

Add a Validation block in the app. On the right panel:

• Type of Validation: Custom
• Validation Condition: {payment_ga#status} = "Success".
• Validation Level: Success.
• Validation Message: Example, “Payment Successful”

This ensures that only submissions with successful payments are allowed to proceed when users click on the Submit button of the app.

Failed Payment Validation

Add a Validation block in the app. On the right panel:

• Type of Validation: Custom
• Validation Condition: {payment_ga#status} = "Error".
• Validation Level: Error.
• Validation Message: Example, “Payment Unsuccessful”

If a payment fails, an error message will appear, and users will not be able to make a submission on the app.

‍

Transaction ID Variable

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.

‍

App Home

‍

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.

‍

‍

‍
Note

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.