Native OTP on Android Custom Checkout
Integrate the Razorpay Native OTP feature with Android custom checkout to avoid customer payment issues such as payment failures due to low internet speeds and bank page redirects.
Curlec Payment Gateway supports one-time passwords (OTPs) at the Checkout itself, preventing the customers from being redirected to the ACS page of their respective issuing banks.
Using the Native OTP feature, you can:
- Increase success rates by up to 4%.
- Reduce payment failures due to low internet speeds.
- Avoid failures due to redirects to bank pages.
- Offer a consistent experience on mobile and web checkout.
Before implementing the Native OTP feature, check the following prerequisites:
- Create a .
- Generate the on the Curlec Dashboard.
- Integrate with the .
1.1
.1.2
.1.3
1.4
.1.5
.1.6
.Update the
. This feature is available from version 3.9.3 and above.Implement the CardsFlowCallback
interface in the getCardsFlow
function in the payment activity.
The SDK fires the isNativeOtpEnabled
function and determines whether the native OTP flow is enabled for the BIN.
razorpay.getCardsFlow(payload, new CardsFlowCallback() {@Overridepublic void isNativeOtpEnabled(boolean isNativeOtpEnabled) {if (isNativeOtpEnabled) {//this generates the OTP for the card holderrazorpay.getCardOtpData(this);}else{//use your normal payment flow heresendRequest();}}
If Native OTP is enabled for BIN, you should call the razorpay.getCardOtpData(CardsFlowCallback)
function. The SDK then fires the otpGenerateResponse(boolean otpGenerated)
function and confirms if the OTP was successfully sent to the customer. Based on this information, you can display the generated OTP UI to the customer.
After entering the OTP, the customer can either:
-
Submit OTP
The customer needs to submit the OTP for authenticating the payment. The customer receives the OTP through your application frontend. For card payments, the customer receives the OTP via their preferred notification medium, SMS or email.Handy Tips
Do not perform any validation on the length of the OTP since this can vary across banks. However, the OTP should not be blank.
-
Request for OTP to be resent
There could be situations when customers have to re-enter the OTP sent to them. The bank determines the number of retries that the user is allowed. -
Cancel OTP
Cancel the payment by cancelling the OTP.
@Overridepublic void otpGenerateResponse(boolean otpGenerated) {//check if otp was generated successfully and show UIif (otpGenerated) {//show UI to the user here//will have submit_otp btn resend_otp btn & redirect_to_bank_page buttonrazorpay.otpSubmit(otpEnteredByUser,this);//for submitting OTP entered by USER, if payment was successful, the onPaymentSuccess function will be called.razorpay.otpResend(this);//for resending the OTP to the userrazorpay.redirectToBankPage();//to open webview and redirect the user to bank page no callback for this}else {//otp wasn't generated call getCardOtpData againrazorpay.getCardOtpData(this);}}@Overridepublic void otpResendResponse(boolean otpResent) {//status response for otp_resend function, change UI accordingly}@Overridepublic void onOtpSubmitError(boolean otpSubmitError) {//status response for error during otp submit. Wrong OTP, network issue, or timeout, this function will be called with the boolean//change UI accordingly}
You must handle the payment success and error events as shown in the code sample below:
try {razorpay.submit(data, new PaymentResultListener() {@Overridepublic void onPaymentSuccess(String razorpayPaymentId) {// Razorpay payment ID is passed here after a successful payment}@Overridepublic void onPaymentError(int code, String description) {// Error code and description is passed here}});} catch (Exception e) {Log.e(TAG, "Error in submitting payment details", e);}
Handy Tips
To reuse the Curlec Checkout web integration inside a web view on Android or iOS, pass a
along with other checkout options to process the desired payment.You have the option to implement PaymentResultListener
or PaymentResultWithDataListener
to receive callbacks for the payment result.
PaymentResultListener
provides only payment_id as the payment result.PaymentResultWithDataListener
provides additional payment data such as email and contact of the customer, along with theorder_id
,payment_id
,signature
and more.
razorpay.submit(data, new PaymentResultWithDataListener() {@Overridepublic void onPaymentSuccess(String razorpayPaymentId, PaymentData paymentData) {// Razorpay payment ID and PaymentData passed here after a successful payment}@Overridepublic void onPaymentError(int code, String description) {// Error code and description is passed here}});} catch (Exception e) {Log.e(TAG, "Error in submitting payment details", e);}
A successful payment returns the following fields to the Checkout form.
- You need to store these fields in your server.
- You can confirm the authenticity of these details by verifying the signature in the next step.
razorpay_payment_id
string
Unique identifier for the payment returned by Checkout only for successful payments.
razorpay_order_id
string
Unique identifier for the order returned by Checkout.
razorpay_signature
string
Signature returned by the Checkout. This is used to verify the payment.
This is a mandatory step to confirm the authenticity of the details returned to the Checkout form for successful payments.
To verify the razorpay_signature
returned to you by the Checkout form:
-
Create a signature in your server using the following attributes:
order_id
: Retrieve theorder_id
from your server. Do not use therazorpay_order_id
returned by Checkout.razorpay_payment_id
: Returned by Checkout.key_secret
: Available in your server. Thekey_secret
that was generated from the .
-
Use the SHA256 algorithm, the
razorpay_payment_id
and theorder_id
to construct a HMAC hex digest as shown below:generated_signature = hmac_sha256(order_id + "|" + razorpay_payment_id, secret);if (generated_signature == razorpay_signature) {payment is successful} -
If the signature you generate on your server matches the
razorpay_signature
returned to you by the Checkout form, the payment received is from an authentic source.
Given below is the sample code for payment signature verification:
RazorpayClient razorpay = new RazorpayClient("[YOUR_KEY_ID]", "[YOUR_KEY_SECRET]");String secret = "EnLs21M47BllR3X8PSFtjtbd";JSONObject options = new JSONObject();options.put("razorpay_order_id", "order_IEIaMR65cu6nz3");options.put("razorpay_payment_id", "pay_IH4NVgf4Dreq1l");options.put("razorpay_signature", "0d4e745a1838664ad6c9c9902212a32d627d68e917290b0ad5f08ff4561bc50f");boolean status = Utils.verifyPaymentSignature(options, secret);
After you have completed the integration, you can
, make test payments, replace the test key with the live key and integrate with other .After the integration is complete, a Pay button appears on your webpage/app.
Click the button and make a test transaction to ensure the integration is working as expected. You can start accepting actual payments from your customers once the test transaction is successful.
You can make test payments using one of the payment methods configured at the Checkout.
Watch Out!
This is a mock payment page that uses your test API keys, test card and payment details.
- Ensure you have entered only your in the Checkout code.
- No real money is deducted due to the usage of test API keys. This is a simulated transaction.
Following are all the payment modes that the customer can use to complete the payment on the Checkout.
Following are the payment methods supported as configured at Curlec Checkout.
You can select any of the listed banks. After choosing a bank, Curlec will redirect to a mock page where you can make the payment a success
or a failure
. Since this is Test Mode, we will not redirect you to the bank login portals.
You can select any of the listed wallets. After choosing a wallet, you will be redirected to a mock page where you can make the payment success
or a failure
. Since this is Test Mode, we will not redirect you to the wallet login portals.
We support
wallet.Watch Out!
iOS integration for Touch'n Go wallet is currently unavailable. We will be adding support for it soon.
You can use one of the following test cards to test transactions for your integration in Test Mode.
- Use any valid expiration date in the future in the MM/YY format.
- Use any random CVV to create a successful payment.
Check the list of
.Is this integration guide useful?
ON THIS PAGE