Modules
...
Forms V2
Elements

Payment Button

8min

A Payment Button element is a UI component that serves as a seamless gateway to initiate a secure and efficient payment transaction within a website or application. Typically positioned on a checkout or payment page, this Payment Button seamlessly guides users to a highly secure payment gateway where they can effortlessly enter their payment information and successfully complete the transaction.

Element Details of Payment Button
Element Details of Payment Button
ο»Ώ
  • Payment Gateway: The payment gateway can be selected from the available options, i.e., Razorpay and MasterCard, and their settings can be configured.
  • Success Popup Text: The pop-up message for successful transactions can be configured from here.
  • Failure Popup Text: The pop message for failed transactions can be configured from here.
  • Pay Button Text: The text for the Pay button can be configured from here.

Payment Gateway Settings:

Razorpay:

Razorpay Settings
Razorpay Settings
ο»Ώ
  • Enable Third Party Validation: Enabling third-party validation helps validate that the merchant is making payment from the same account whose information they provided earlier. For Example, if a merchant has submitted a canceled cheque in the earlier steps for account information, then here it verifies that the amount is deducted/payment is made from the same account. For this, two more fields, account number, and IFSC code are added.
  • Enable E-mandate: Enabling e-mandate will allow the bank(s)/NBFC(s) to debit the specified amount from the bank account in case of recurring/scheduled payments.
  • Merchant Id: A merchant ID is given to the bank/NBFC by the payment gateway. That merchant id is entered here.
  • Organization Name: The Organization Name(bank/NBFC) for which the payment is made is entered here.
  • Description: The description mentions the reason/purpose of the payment.
  • Logo URL: The URL to enter for the bank/NBFC'c logo to display on the payment page.
  • Color: The desired color for the payment page can be chosen from the color palette.

Note: Both e-mandate and third-party validation will not work together

Pay by Link

This feature helps to:

  • Enable payment via QR code, in this, the merchant will scan the QR code present on the RM app and make his payments.
  • Enable payment via a link, in this the RM will trigger a payment link to the merchant’s device (via SMS, email) which the user can pay with.

Note:

  • The pay-by-link button should only be visible for the RM app
  • Partial payment is not allowed
  • UPI link is not sent, rather a standard payment link is sent.
  • Only valid for the elements in Forms V2ο»Ώο»Ώ
Document image
ο»Ώ

MasterCard:

MasterCard Settings
MasterCard Settings
ο»Ώ
  • Merchant Id: A merchant ID is given to the bank/NBFC by the payment gateway. That merchant id is entered here.
  • Currency: The currency in which the payment has to be made can be selected from the dropdown.
  • Description: The description mentions the reason/purpose of the payment.
Element Details of Payment Button
Element Details of Payment Button
ο»Ώ
  • Name: We can select the page for prefilling the name of the merchant(onboarding customer) and then choose the variable name for prefilling.
  • Email Id: We can select the page for prefilling the email ID of the merchant and then choose the variable to email ID from it.
  • Contact Number: We can select the page for prefilling the contact number of the merchant and then choose the variable to the Contact Number from it.
  • Amount: We can select the page for prefilling the amount that is to be paid by the merchant field and then choose the variable for the amount from it.

Extra fields are added when third party validation is enabled in Razorpay payment gateway settings:

  • Account Number: We can select the page for prefilling the Account Number of the merchant and then choose the variable to the Account Number from it.
  • IFSC: We can select the page for prefilling the IFSC of the bank to which the account is associated and then choose the variable for IFSC from it.
Add parameters for report
Add parameters for report
ο»Ώ
  • Add parameters for report: If we want to add parameters for the report of the payment, we can do so by clicking the plus icon. These parameters will not be reflected in backops. (Maximum 6 parameters can be added in this)
    • Key: The key name could be configured from here. The key name is the name of various parameters whose data will appear in the report. (It appears as column names in the report)
    • Prefill Page and Variable: We can select the page for prefilling the added keyΒ field and then select the variable name from it.
  • Mandatory to collect payment: Enabling this toggle will make it mandatory to collect payment in the journey.

Getting help

Please feel free to contact us if you have any questions, require clarification, or have ideas for how to make the documents or any of our services better.

You can reach out to us at [email protected].

ο»Ώ

Updated 27 Sep 2024
Did this page help you?
PREVIOUS
Location Dropdown
NEXT
Radio Button
Docs powered byΒ Archbee