> ## Documentation Index
> Fetch the complete documentation index at: https://cashfreepayments-d00050e9-theme-update.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Native OTP

> Authenticate card payments natively on your own website or app.

In a typical card payment flow, customers are redirected to the bank’s page to submit an OTP for authentication. With Cashfree’s Native OTP functionality, you can improve the customer experience by collecting the OTP directly on your website or app.

Benefits of Native OTP

* **No Redirects, No Friction**  - Eliminates redirects and reduces payment failures due to drop-offs or slow network
* **Single-Click OTP Experience** - Provides seamless single-click experience to customers via auto-read and auto-submit functionality

<Tip> Native OTP boosts SR by \~5% </Tip>

<Frame caption="Difference between Bank OTP payment and Seamless OTP payment">
  <img height="200" src="https://mintlify.s3.us-west-1.amazonaws.com/cashfreepayments-d00050e9-theme-update/static/payments/features/nativeotp/native-otp.png" />
</Frame>

<Note>Please reach out to [care@cashfree.com](mailto:care@cashfree.com) to get this feature enabled for your account</Note>

## Cashfree-Hosted Checkout

Native OTP functionality is supported by default on Cashfree Checkout. Cashfree displays the Native OTP screen directly within the checkout, allowing customers to submit the OTP without redirection.

<Tip> Cashfree's Native OTP is also enriched with **OTP auto-read and auto-submit** functionaltiy, enabling **single-click OTP experience** for customers </Tip>

## Seamless Checkout

To implement Native OTP on Seamless Checkout, merchants must build their own custom Native OTP interface and use Cashfree’s APIs to perform authentication.

<Steps>
  <Step title="Initiate Native OTP Request">
    Call the [Order Pay API](/api-reference/payments/latest/payments/pay) with `"channel": "post"` to request for Native OTP flow for authentication.

    ```shell Native OTP Request {9}
    curl --request POST \
      --url https://sandbox.cashfree.com/pg/orders/sessions \
      --header 'Content-Type: application/json' \
      --header 'x-api-version: <latest-version>' \
      --data '{
      	"payment_session_id": "session_Cke8Y9LKs2CQP9KuTzsomExG1x5CKBLo8MynNCv8QT",
      	"payment_method":{
      		"card":		{
              "channel":"post",	
              "card_number": "4111111111111111",
              "card_expiry_mm": "03",
              "card_expiry_yy": "25"	
              "card_cvv": "326", 
              "card_holder_name": "john"
      		}
      	}
      }'
    ```
  </Step>

  <Step title="Collect OTP">
    If Native OTP flow is enabled, the Order Pay API response will return `"action": "post"`. The merchant should then render Native OTP UI to collect the OTP and submit it on the link provided in `data.url` field for authentication.

    ```json Sample Response {2,6,10}
    {
       "action": "post",
       "cf_payment_id": "3991346241",
       "channel": "post",
       "data": {
           "url": "https://api.cashfree.com/pg/orders/pay/authenticate/3991346241",
           "payload": null,
           "content_type": "application/json",
           "method": "post",
           "redirect_to_bank": "https://api.cashfree.com/pg/view/redirecttobank/MV47yJlEMkr8X_Er5YDZ-uiKHU7IGrK2kH7CTtcjeaU8v10fAeLoLL9osqoUQrmBxnbV809FFzyQTKQy"
       },
       "payment_amount": 1.00,
       "payment_method": "card"
    }
    ```

    <Tip> Seamless merchants can also leverage **Cashfree's Seamless Native OTP SDK** which offers customisable UI and in-built **auto-read and auto-submit functionality**, enabling **single-click OTP experience** for customers</Tip>

    It's advisable to give an option to Redirect to Bank Page on the Native OTP screen, so that in case of any issues customers can choose to complete the payment on bank's ACS page instead. On click, redirect the user to `data.redirect_to_bank` URL provided in API response.

    <AccordionGroup>
      <Accordion title="Handling API Response for Native OTP Flow">
        When `channel = 'post'` is sent in Order Pay API request for Native OTP flow -

        * If Native OTP is supported, you'll receive `channel = "post"` and `action = "post"` in response → Render Native OTP UI and submit OTP to `data.url`; If user clicks on Redirect to Bank page, then redirect the user to `data.redirect_to_bank`

        ```json Sample Response {2,6,10}
        {
           "action": "post",
           "cf_payment_id": "3991346241",
           "channel": "post",
           "data": {
               "url": "https://api.cashfree.com/pg/orders/pay/authenticate/3991346241",
               "payload": null,
               "content_type": "application/json",
               "method": "post",
               "redirect_to_bank": "https://api.cashfree.com/pg/view/redirecttobank/MV47yJlEMkr8X_Er5YDZ-uiKHU7IGrK2kH7CTtcjeaU8v10fAeLoLL9osqoUQrmBxnbV809FFzyQTKQy"
           },
           "payment_amount": 1.00,
           "payment_method": "card"
        }
        ```

        * If Native OTP is not supported, you'll receive `channel = "post"` and `action = "link"` in response → Redirect the user to `data.url` or `data.redirect_to_bank` (both will have the same URL)

        ```json Sample Response {2,6}
        {
           "action": "link",
           "cf_payment_id": "3991389813",
           "channel": "post",
           "data": {
               "url": "https://api.cashfree.com/pg/view/gateway/session_N45NkEY97Jwp--7qMG88UI6gZ5etAqlxHAe-LqJf-tWCguYEZUehSvDhTeXoTFGEvHI1TzQ0Z1qHgTC9mBup0Zxn3NCYEvzo4kLajub-98c4QuN2bLnDWKdZ2a3dcde9-7080-451b-9dff-b57f03873c68",
               "payload": null,
               "content_type": "null",
               "method": "null",
               "redirect_to_bank": "https://api.cashfree.com/pg/view/gateway/session_N45NkEY97Jwp--7qMG88UI6gZ5etAqlxHAe-LqJf-tWCguYEZUehSvDhTeXoTFGEvHI1TzQ0Z1qHgTC9mBup0Zxn3NCYEvzo4kLajub-98c4QuN2bLnDWKdZ2a3dcde9-7080-451b-9dff-b57f03873c68"
           },
           "payment_amount": 1.00,
           "payment_method": "card"
        }
        ```

        When `channel = 'link'` is sent in Order Pay API request for non-Native OTP flow -

        * Redirect the user to `data.url` which will be the Bank ACS page or [Cashfree ACS](/api-reference/payments/features/native-otp#cashfree-acs) page if Cashfree ACS is enabled; `data.redirect_to_bank` will not be present in this case

        ```json Sample Response {2,6}
        {
           "action": "link",
           "cf_payment_id": "3991367114",
           "channel": "link",
           "data": {
               "url": "https://api.cashfree.com/pg/view/gateway/session_N45NkEY97Jwp--7qMG88UI6gZ5etAqlxHAe-LqJf-tWCguYEZUehSvDhTeXoTFGEvHI1TzQ0Z1qHgTC9mBup0Zxn3NCYEvzo4kLajub-98c4QuN2bLnDWKdZ4d4ecf9d-328a-4460-964b-df8d8096be6f",
               "payload": null,
               "content_type": "null",
               "method": "null"
           },
           "payment_amount": 1.00,
           "payment_method": "card"
        }
        ```
      </Accordion>
    </AccordionGroup>
  </Step>

  <Step title="Submit OTP">
    Once merchant collects the OTP on its Native OTP screen, they can submit it to Cashfree using the [Submit OTP API](/api-reference/payments/latest/payments/authenticate)

    ```bash Submit OTP {8-9}
    curl --request POST \
         --url https://sandbox.cashfree.com/pg/orders/pay/authenticate/{payment_id} \
         --header 'accept: application/json' \
         --header 'content-type: application/json' \
         --header 'x-api-version: <latest-version>' \
         --data '
    {
      "action": "SUBMIT_OTP",
      "otp": "111000"
    }'
    ```

    Also, give an option to Resend OTP on your Native OTP screen by calling this same API with `"action": "RESEND_OTP"`

    ```bash Resend OTP {8}
    curl --request POST \
         --url https://sandbox.cashfree.com/pg/orders/pay/authenticate/{payment_id} \
         --header 'accept: application/json' \
         --header 'content-type: application/json' \
         --header 'x-api-version: <latest-version>' \
         --data '
    {
      "action": "RESEND_OTP"
    }'
    ```
  </Step>
</Steps>

### Cashfree ACS

For seamless merchants who prefer not to build a custom Native OTP interface, they can redirect to Cashfree’s ACS Page where customers can submit the OTP. This offers a standardised experience equipped with auto-read and auto-submit functionality for smooth payment expeirence.

Call the Order Pay API [Order Pay API](/api-reference/payments/latest/payments/pay) with `"channel": "link"` to request Cashfree ACS for authentication → Redirect the user to `data.url` to open Cashfree ACS page. Cashfree will collect and submit the OTP for authentication.

```json Sample Response {2,6}
{
   "action": "link",
   "cf_payment_id": "3991367114",
   "channel": "link",
   "data": {
       "url": "https://api.cashfree.com/pg/view/gateway/session_N45NkEY97Jwp--7qMG88UI6gZ5etAqlxHAe-LqJf-tWCguYEZUehSvDhTeXoTFGEvHI1TzQ0Z1qHgTC9mBup0Zxn3NCYEvzo4kLajub-98c4QuN2bLnDWKdZ4d4ecf9d-328a-4460-964b-df8d8096be6f",
       "payload": null,
       "content_type": "null",
       "method": "null"
   },
   "payment_amount": 1.00,
   "payment_method": "card"
}
```
