Native OTP Flow

This section describes what is Native OTP flow with benefits and how to implement Native OTP flow when collecting payments using BNPL.

What is Native OTP flow

In general, the transaction OTP is captured on Bank pages through multiple hops. With Native OTP Flow, it will be triggered and captured on merchants or the PayU Payment page. The customer stays on the merchant’s (or PayU’s) website/app and completes the Card authentication process of entering OTP on the merchant’s (or PayU) website itself, rather than redirecting the user to a 3d-secure page to complete the transaction. This reduces hops, points of failure, or drops in the checkout process hence faster completion of transactions, better experience, and improved success rate so preferred over OTP on Bank’s Page.

Benefits

What are the advantages and why should merchants integrate this flow with PayU?

• Native OTP flow improves Success Rates of card transactions by 3-5% depending upon the source of transactions.
• It improves the overall user experience since multiple redirections are removed. Also, the customer never leaves the merchant website, which helps in providing a seamless experience. It also reduces drop rates due to users’ fluctuating internet speed issues.
• PayU supports all major banks – 15+ banks including HDFC, AXIS, ICICI, SBI, KOTAK, RBL, etc. – on this flow for Cards, cardless, CC EMI, DC EMI’s, and BNPLs.

The flow supports the latest native OTP generation flows through the Payment (_payment)API, followed by Submit OTP API, to initiate an S2S=4 transaction.

📘

Note:

If you don’t have BNPL enabled, try requesting using Dashboard. For more information, refer to Checkout payment modes. If you could not request through Dashboard, contact your PayU Key Account Manager or PayU Support.

Steps to Integrate

1. Check the BNPL eligibility
2. Initiate the payment
3. Check the payment response from Payu
4. Submit the OTP

Step 1: Check the BNPL eligibility

For request parameters and response to perform BNPL Eligibility Check, refer to Get Checkout Details API.

Step 2: Initiate the payment

Along with the mandatory parameters mentioned in Collect Payments API - BNPL under API Reference, you must post the following parameters for the BNPL:

Checked the response mentioned inCollect Payments API - BNPL under API Reference..

Step 3: Check the payment response from PayU

Sample payment response

{ 
  "metaData": { 
    "message": null, 
    "referenceId": "6a037a290af9253a1d300c8ad0b24c94",// mihpayencoded payuid 
    "statusCode": null, 
    "txnId": "5b7d06c6bf7d4dc2d3a8", 
    "txnStatus": "pending", 
    "unmappedStatus": "pending" 
  }, 
  "result": { "acsTemplate": "PGh0bWw+PGJvZHk+PGZvcm0gbmFtZT0icGF5bWVudF9wb3N0IiBpZD0icGF5bWVu 12 dF9wb3N0IiBhY3Rpb249Imh0dHBzOi8vcHA5NHNlY3VyZS5wYXl1LmluL19wYXltZW50X29wdGlvbnM 13 /bWlocGF5aWQ9NzI0MGQ0OTE5NDJiYzg2NmE1ZTZiNDc2ZTNhZTVkODkmcmVzZW5kRWxpZ2liaWxpdHl 14 SZXM9MzU5NGM3M2IxOGY3Y2E5ZTgxNDZmMGJiM2QwYmQ4NDI5ZTVhMjBjMmY2MWQ3NzhiZmQwZmI0YjB 15 kNDMwZWJkMjFhOGQ4ZmYyMGU3Nzc1OGM5MDNhNzFmZTIyZDM5ZDE0OTQxMjcwMzRlZDdkNTA1MjM3Y2I 16 2ZjdiZjgwY2MzMTA3YTAyY2JkMjIyMTdjMTlmNjY2MmVmYWM4ZThmODNkY2E5MDI0NzBhOTgxYmRkMGE 17 wYzAzODQ3ZDU0NmY0MWFkOGYzMDY2YjJjY2M4YTM1OWUwMzAzMjk1M2YzNjExMmQwZTU1MWVjMTliYTc 18 xOTU0ZGZlNzg4ZDE4YTI4YWM3NjA5YmE1M2JkNzc1NDhjZmZiODE4ODIzNDdmYzhiOTczMTU1MDlhZmR 19 mOGEwODk0NDQzY2Y5MWUwYjFmZGU4NDU5NGJlZTZmYzlkMzlkYTg4NGYzMDIxZWIyMjI0NjE4ZTJjN2Y 20 xMTVhMDIwNTcwNTE5ODcyMjBlYzc4NjRlY2M0NGEwMTI0MTdlNDg4MGIxODdlZTFmMTIzNjNhMjVhNGJ 21 lYzYyZDgzMjJlYjFiMTg1MTk1YTcxNDEyNGI1ZGU5NDMwOWE2ZGNlNDJlZjQ0MTQ2NGQzNDYyZTc4MDk 22 2NzBjIiBtZXRob2Q9InBvc3QiPjwvZm9ybT48c2NyaXB0IHR5cGU9J3RleHQvamF2YXNjcmlwdCc+CiA 23 gICAgICAgICAgICAgICAgICAgICAgICAgICB3aW5kb3cub25sb2FkPWZ1bmN0aW9uKCl7CiAgICAgICA 24 gICAgICAgICAgICAgICAgICAgICAgICAgZG9jdW1lbnQuZm9ybXNbJ3BheW1lbnRfcG9zdCddLnN1Ym1 25 pdCgpOwogICAgICAgICAgICAgICAgICAgICAgICAgICAgfQogICAgICAgICAgICAgICAgICAgICAgICA 26 8L3NjcmlwdD48L2JvZHk+PC9odG1sPg==",// Base64 Encoded HTML 27 "otpPostUrl": "https://test.payu.in/ResponseHandler.php} 
} 

Handling payment response

This sub-section describes the components of the payment response received with Native OTP or Zero Redirection flow. It contains the metaData and result JSON as described in this subsection:

metaData JSON fields description

result JSON fields description

The result JSON contains the acsTemplate with base64 encoding.

📘

Notes:

To request OTP on a page, you can utilize the URLs in the response itself. There are two URLs to use:

• otpPostUrl (Merchant Hosted OTP page)
• acsTemplate (PayU Hosted OTP page) which acts as a fallback

If you are getting a URL in otpPostUrl, use otpPostUrl, otherwise, you can use acsTemplate, which acts as a fallback. In this scenario, use PayU (or WebView or Checkout) OTP page as this is a fallback case.

Hence, for cases where the above response is not successful, it could either be Failed or Pending. In the Pending state, you can send a fallback URL (as above) which can be shown to the customer.

acsTemplate

acsTemplate is base64 encoded, after decoding we’ll get an HTML like below:

<html> 
   <body> 
      <form name="payment_post" id="payment_post" action="https://test.payu.in/ 
      _payment_options?mihpayid=1983a7cf520b567155ed95ca181e37e3&resendEligibilityRes       =3594c73b18f7ca9e8146f0bb3d0bd8429e5a20c2f61d778bfd0fb4b0d430ebd21a8d8ff20e7775       8c903a71fe22d39d1494127034ed7d505237cb6f7bf80cc3107a02cbd22217c19f6662efac8e8f8       3dca902470a981bdd0a0c03847d546f41ad8f3066b2ccc8a359e03032953f36112d0e551ec19ba7       1954dfe788d18a28ac7609ba53bd77548cffb81882347fc8b97315509afdf8a0894443cf91e0b1f       de84594bee6fc9d39da884f3021eb2224618e2c7f115a02057051987220ec7864ecc44a012417e4      880b187ee1f12363a25a4bec62d8322eb1b185195a714124b5de94309a6dce42ef441464d3462e7 
      809670c" method="post"></form> 
      <script type='text/javascript'> 
         window.onload=function(){ 
             document.forms['payment_post'].submit(); 
         } 
      </script> 
   </body> 
</html> 

On opening the above HTML, you will get a PayU checkout OTP page similar to the following:

From here, the steps are as in PayU Hosted (non-seamless) or Merchant Hosted or Server-to-Server (seamless) transactions.

Handling Failure Response

This is a situation where the _payment API has a complete failure. Hence, you will be getting ‘failed’ in txnStatus and otpPostUrl is also not received in the result object.

{ 
  "metaData": 
  { 
    "message": "Transaction Failed at bank end.", 
    "referenceId": "ea68a970115a9d87c6ece8d0218e6c2a", 
    "statusCode": "E308", 
    "txnId": "54d2d883f8e4a3fff6ba", 
    "txnStatus": "failed", 
    "unmappedStatus": "failure" 
  }, 
  "result": {} 
} 

Step 4: Submit the OTP

After you have collected the OTP from the customer, the reference ID can be found in the Payment API (_payment) response. Submit the OTP that is entered by the customer is submitted along with the reference ID using the Submit OTP API.