React Native Element Custom Card Component

The Cashfree Custom Card Component lets you embed a secure, SDK-managed card input field directly into your React Native application UI. Because the CFCard component captures and processes the card number entirely within the SDK, your application never receives the raw card number. This makes the integration suitable for non-PCI merchants, that is, merchants who are not certified to store, process, or transmit raw cardholder data, and who rely on the SDK to handle card data securely on their behalf.

This page covers the custom card component integration only. For the full React Native Element integration, including raw card, net banking, and UPI Intent, see React Native Integration.

Prerequisites

Complete the following tasks before you start the integration:

Create a Cashfree Merchant Account.
Log in to the Merchant Dashboard and generate an App ID and Secret Key. Learn how to generate API keys.
Use Cashfree React Native SDK version 2.4.0 or above. Get it from npm.
Set your Android application’s minSdkVersion to API level 19 or higher.
Set your iOS minimum deployment target to 10.3 or higher.

The integration consists of three steps:

Step 1

Create an order

Step 2

Open the payment page

Step 3

Confirm the payment

Step 1: Create an order Server-side

Create an order from your backend server before you process any payment.

This API requires your secret key. Create orders through your server only. Do not call this API directly from your mobile application.

API request for creating an order

Here’s a sample request for creating an order using your desired backend language. Cashfree offers backend SDKs to simplify the integration process.

curl --location 'https://sandbox.cashfree.com/pg/orders' \
--header 'X-Client-Secret: {{clientKey}}' \
--header 'X-Client-Id: {{clientId}}' \
--header 'x-api-version: 2025-01-01' \
--header 'Content-Type: application/json' \
--header 'Accept: application/json' \
--data-raw '{
  "order_amount": 10.10,
  "order_currency": "INR",
  "customer_details": {
    "customer_id": "USER123",
    "customer_name": "joe",
    "customer_email": "joe.s@cashfree.com",
    "customer_phone": "+919876543210"
  },
  "order_meta": {
    "return_url": "https://b8af79f41056.eu.ngrok.io?order_id=order_123"
  }
}'

import { Cashfree, CFEnvironment } from "cashfree-pg";

const cashfree = new Cashfree(
	CFEnvironment.PRODUCTION,
	"{Client ID}",
	"{Client Secret Key}"
);

function createOrder() {
	var request = {
		order_amount: "1",
		order_currency: "INR",
		customer_details: {
			customer_id: "node_sdk_test",
			customer_name: "",
			customer_email: "example@gmail.com",
			customer_phone: "9999999999",
		},
		order_meta: {
			return_url:
				"https://test.cashfree.com/pgappsdemos/return.php?order_id=order_123",
		},
		order_note: "",
	};

	cashfree
		.PGCreateOrder(request)
		.then((response) => {
			console.log("Order created successfully:", response.data);
		})
		.catch((error) => {
			console.error("Error setting up order request:", error.response.data);
		});
}

from cashfree_pg.models.create_order_request import CreateOrderRequest
from cashfree_pg.api_client import Cashfree
from cashfree_pg.models.customer_details import CustomerDetails


Cashfree.XClientId = {Client ID}
Cashfree.XClientSecret = {Client Secret Key}
Cashfree.XEnvironment = Cashfree.XSandbox
x_api_version = "2023-08-01"

def create_order():
        customerDetails = CustomerDetails(customer_id="123", customer_phone="9999999999")
        createOrderRequest = CreateOrderRequest(order_amount=1, order_currency="INR", customer_details=customerDetails)
        try:
            api_response = Cashfree().PGCreateOrder(x_api_version, createOrderRequest, None, None)
            print(api_response.data)
        except Exception as e:
            print(e)

import com.cashfree.*;

Cashfree.XClientId = {Client Key};
Cashfree.XClientSecret = {Client Secret Key};
Cashfree.XEnvironment = Cashfree.SANDBOX;

static void createOrder() {
  CustomerDetails customerDetails = new CustomerDetails();
  customerDetails.setCustomerId("123");
  customerDetails.setCustomerPhone("9999999999");

  CreateOrderRequest request = new CreateOrderRequest();
  request.setOrderAmount(1.0);
  request.setOrderCurrency("INR");
  request.setCustomerDetails(customerDetails);
  try {
    Cashfree cashfree = new Cashfree();
    ApiResponse<OrderEntity> response = cashfree.PGCreateOrder("2023-08-01", request, null, null, null);
    System.out.println(response.getData().getOrderId());

  } catch (ApiException e) {
    throw new RuntimeException(e);
  }
}

import (
  cashfree "github.com/cashfree/cashfree-pg/v3"
)

func createOrder() {

clientId := {Client ID}
clientSecret := {Client Secret Key}
cashfree.XClientId = &clientId
cashfree.XClientSecret = &clientSecret
cashfree.XEnvironment = cashfree.SANDBOX

request := cashfree.CreateOrderRequest{
		OrderAmount: 1,
		CustomerDetails: cashfree.CustomerDetails{
			CustomerId:    "1",
			CustomerPhone: "9999999999",
		},
		OrderCurrency: "INR",
		OrderSplits:   []cashfree.VendorSplit{},
	}
	version := "2023-08-01"
	response, httpResponse, err := cashfree.PGCreateOrder(&version, &request, nil, nil, nil)
	if err != nil {
		fmt.Println(err.Error())
	} else {
		fmt.Println(httpResponse.StatusCode)
		fmt.Println(response)
    }
}

using cashfree_pg.Client;
using cashfree_pg.Model;

Cashfree.XClientId = {Client ID};
Cashfree.XClientSecret = {Client Secret Key};
Cashfree.XEnvironment = Cashfree.PRODUCTION;
var cashfree = new Cashfree();
var xApiVersion = "2023-08-01";

void CreateOrder() {
    var customerDetails = new CustomerDetails("123", null, "9999999999");
    var createOrdersRequest = new CreateOrderRequest(null, 1.0, "INR", customerDetails);
    try {
        // Create Order
        var result = cashfree.PGCreateOrder(xApiVersion, createOrdersRequest, null, null, null);
        Console.WriteLine(result);
        Console.WriteLine(result.StatusCode);
        Console.WriteLine((result.Content as OrderEntity));
    } catch (ApiException e) {
        Console.WriteLine("Exception when calling PGCreateOrder: " + e.Message);
        Console.WriteLine("Status Code: " + e.ErrorCode);
        Console.WriteLine(e.StackTrace);
    }
}

\Cashfree\Cashfree::$XClientId = "<x-client-id>";
\Cashfree\Cashfree::$XClientSecret = "<x-client-secret>";
\Cashfree\Cashfree::$XEnvironment = Cashfree\Cashfree::$SANDBOX;

$cashfree = new \Cashfree\Cashfree();

$x_api_version = "2023-08-01";
$create_orders_request = new \Cashfree\Model\CreateOrdersRequest();
$create_orders_request->setOrderAmount(1.0);
$create_orders_request->setOrderCurrency("INR");
$customer_details = new \Cashfree\Model\CustomerDetails();
$customer_details->setCustomerId("123");
$customer_details->setCustomerPhone("9999999999");
$create_orders_request->setCustomerDetails($customer_details);

try {
    $result = $cashfree->PGCreateOrder($x_api_version, $create_orders_request);
    print_r($result);
} catch (Exception $e) {
    echo 'Exception when calling PGCreateOrder: ', $e->getMessage(), PHP_EOL;
}

After successfully creating an order, you will receive a unique order_id and payment_session_id that you need for subsequent steps. You can view the complete API request and response for /orders in the Create Order API.

Step 2: Open the payment page Client-side

After you create the order, set up the card component and open the payment page so the customer can provide their card details.

1. Set up the SDK

The React Native SDK is hosted on npm. You can get the SDK 2.4.0. The React Native SDK supports Android SDK version 19 and above and iOS minimum deployment target of 10.3 and above. Install the SDK in your React Native project:

npm install react-native-cashfree-pg-sdk@2.4.0

yarn add react-native-cashfree-pg-sdk@2.4.0

npx expo install react-native-cashfree-pg-sdk
npx expo install expo-dev-client
npx expo prebuild
npx expo run:android
npx expo run:ios

For iOS, run the following commands:

cd ios
pod install --repo-update

2. Complete the payment

To complete the payment, follow these steps:

Create a CFSession object.
Set up the payment callback.
Create a card number UI component (CFCard).
Build an ElementCard object and call doPayment() on the card component reference.

Create a session

The CFSession object holds the session context for the payment. It accepts the payment_session_id and order_id obtained from Step 1, and the Cashfree environment (CFEnvironment.SANDBOX or CFEnvironment.PRODUCTION).

import {
  CFEnvironment,
  CFSession,
} from 'cashfree-pg-api-contract';

try {
  const session = new CFSession(
    '<PAYMENT_SESSION_ID>',
    '<ORDER_ID>',
    CFEnvironment.SANDBOX // or CFEnvironment.PRODUCTION
  );
} catch (e: any) {
  console.log(e.message);
}

Set up the payment callback

The SDK exposes a CFCallback interface to receive callbacks from the SDK once the payment flow ends. The callback supports two methods:

onVerify(orderID: string): void
onError(error: CFErrorResponse, orderID: string): void

Set the callback in componentDidMount and remove it in componentWillUnmount. This configuration also handles activity restart cases and prevents memory leaks.

import { Component } from 'react';
import {
  CFErrorResponse,
  CFPaymentGatewayService,
} from 'react-native-cashfree-pg-sdk';

export default class App extends Component {
  componentDidMount() {
    CFPaymentGatewayService.setCallback({
      onVerify(orderID: string): void {
        // Verify the order status from your backend.
      },
      onError(error: CFErrorResponse, orderID: string): void {
        console.log(JSON.stringify(error), orderID);
      },
    });
  }

  componentWillUnmount() {
    CFPaymentGatewayService.removeCallback();
  }
}

Create a card number UI component

Pass a cfSession object and a cardListener callback to CFCard. Both parameters are mandatory. CFCard also accepts standard React Native TextInput props so you can style and control the input field.

export type CardInputProps = {
  cfSession: CFSession;
  cardListener: (response: string) => void;
} & TextInputProps;

Create a reference for the card component so you can call doPayment() later:

this.creditCardRef = React.createRef();

Add the CFCard component to your view:

import { CFCard } from 'react-native-cashfree-pg-sdk';

const cfCard = (
  <CFCard
    cfSession={this.getSession()}
    cardListener={this.handleCFCardInput}
    ref={this.creditCardRef}
    style={{ flex: 1 }}
    placeholder="Enter Card Number"
    placeholderTextColor="#0000ff"
    underlineColorAndroid="transparent"
    cursorColor="gray"
    returnKeyType="next"
    onSubmitEditing={() => console.log('onSubmitEditing')}
    onEndEditing={() => console.log('onEndEditing')}
    onBlur={() => console.log('onBlur')}
    onFocus={() => console.log('onFocus')}
  />
);

Card listener response

The cardListener callback is invoked on every key press. Until the customer enters 8 digits, the response contains only Luhn status and card length, because a minimum of 8 digits is required to identify the card BIN (Bank Identification Number).

{"luhn_check_info":"FAIL","card_length":1}
{"luhn_check_info":"FAIL","card_length":2}
{"luhn_check_info":"FAIL","card_length":3}
{"luhn_check_info":"FAIL","card_length":4}
{"luhn_check_info":"FAIL","card_length":5}
{"luhn_check_info":"FAIL","card_length":6}
{"luhn_check_info":"FAIL","card_length":7}

From the 8th digit onwards, the callback also includes tdr_info, card_bin_info, and card_network:

{
  "tdr_info": {
    "upfrontTransactionAmount": 2,
    "paymentCode": 10014,
    "serviceCharge": 0,
    "serviceTax": 0
  },
  "card_bin_info": {
    "scheme": "visa",
    "type": "credit",
    "subType": "retail",
    "brand": "visa rewards",
    "bankName": "axis bank"
  },
  "card_network": "visa",
  "luhn_check_info": "FAIL",
  "card_length": 8,
  "last_four_digit": "1234"
}

Field	Available from	Description
`card_length`	First digit	The number of digits entered so far.
`luhn_check_info`	First digit	Whether the current card number passes the Luhn algorithm check. Values: `SUCCESS` or `FAIL`.
`tdr_info`	8th digit	Transaction discount rate metadata for the card BIN.
`card_bin_info`	8th digit	Card network and issuer metadata.
`card_bin_info.scheme`	8th digit	Card network scheme (for example, `visa`, `mastercard`).
`card_bin_info.bankName`	8th digit	Issuing bank name (for example, `axis bank`).
`card_bin_info.type`	8th digit	Card type classification (for example, `credit`).
`card_bin_info.subType`	8th digit	Card sub-type classification.
`card_bin_info.brand`	8th digit	Card brand classification.
`card_network`	8th digit	Card network scheme string used for UI updates such as network icons.
`last_four_digit`	When Luhn passes	Last four digits of the card number.

tdr_info, card_bin_info, and card_network are only present after the customer has entered at least 8 digits. Always check that these keys exist before you access them.

Use the card_network value from the listener to update your UI. The following example shows how to map common networks:

handleCFCardInput = (data: string) => {
  console.log('CFCardInput FROM SDK', data);
  const cardNetwork = JSON.parse(data)['card_network'];
  switch (cardNetwork) {
    case 'visa':
    case 'mastercard':
    case 'amex':
    case 'maestro':
    case 'rupay':
    case 'diners':
    case 'discover':
    case 'jcb':
      // Update your card network image in the UI.
      break;
    default:
      break;
  }
};

Sample card form UI

Collect the remaining card fields (holder name, expiry, and CVV) in your own UI. The SDK manages only the card number through CFCard.

render() {
  const cfCard = (
    <CFCard
      cfSession={this.getSession()}
      style={{ flex: 1 }}
      cardListener={this.handleCFCardInput}
      placeholder="Enter Card Number"
      placeholderTextColor="#0000ff"
      underlineColorAndroid="transparent"
      cursorColor="gray"
      returnKeyType="next"
      ref={this.creditCardRef}
      onSubmitEditing={() => console.log('onSubmitEditing')}
      onEndEditing={() => console.log('onEndEditing')}
      onBlur={() => console.log('onBlur')}
      onFocus={() => console.log('onFocus')}
    />
  );

  return (
    <ScrollView>
      <View style={styles.container}>
        <View style={styles.cardContainer}>
          {cfCard}
        </View>
        <TextInput
          style={styles.input}
          placeholder="Holder Name"
          keyboardType="default"
          onChangeText={this.handleCardHolderName}
        />
        <View style={{ flexDirection: 'row', alignSelf: 'stretch' }}>
          <TextInput
            style={styles.input}
            placeholder="Expiry Month"
            keyboardType="numeric"
            maxLength={2}
            onChangeText={this.handleCardExpiryMM}
          />
          <TextInput
            style={styles.input}
            placeholder="Expiry Year"
            keyboardType="numeric"
            maxLength={2}
            onChangeText={this.handleCardExpiryYY}
          />
          <TextInput
            style={styles.input}
            placeholder="CVV"
            keyboardType="numeric"
            maxLength={3}
            secureTextEntry={true}
            onChangeText={this.handleCardCVV}
          />
        </View>
        <Button
          onPress={() => this.handleSubmit()}
          title="Card Payment"
        />
      </View>
    </ScrollView>
  );
}

Build the ElementCard object and initiate payment

When the customer enters all details and taps the pay button, create an ElementCard object and call doPayment() on the card component reference. ElementCard does not include the card number. The SDK retrieves the card number from the CFCard component, which keeps your application out of PCI scope for card data.

Field	Description
`cardHolderName`	Name printed on the card.
`cardExpiryMM`	Card expiry month in `MM` format.
`cardExpiryYY`	Card expiry year in `YY` format.
`cardCvv`	Card CVV.
`saveCard`	Set `true` to save the card for future payments.

import { ElementCard } from 'cashfree-pg-api-contract';

private handleSubmit = () => {
  if (this.creditCardRef.current) {
    const elementCard = new ElementCard(
      this.state.cardHolderName,
      this.state.cardExpiryMM,
      this.state.cardExpiryYY,
      this.state.cardCVV,
      false // set true to save the card
    );

    this.creditCardRef.current.doPayment(elementCard);
  }
};

Call doPayment() on the creditCardRef object, not on CFPaymentGatewayService. This is different from the raw card flow described in the React Native Integration page.

If you cannot create the order before rendering the card component, pass an initial session to CFCard for rendering, then call doPaymentWithPaymentSessionId() with the updated session when the customer pays:

this.creditCardRef.current.doPaymentWithPaymentSessionId(
  elementCard,
  this.getSession()
);

Sample code

The following example shows a complete custom card component payment flow, including session creation, card component setup, listener handling, and payment initiation.

Custom card component payment sample

import * as React from 'react';
import { Component } from 'react';
import {
  Button,
  ScrollView,
  StyleSheet,
  TextInput,
  View,
} from 'react-native';
import {
  CFCard,
  CFErrorResponse,
  CFPaymentGatewayService,
} from 'react-native-cashfree-pg-sdk';
import {
  CFEnvironment,
  CFSession,
  ElementCard,
} from 'cashfree-pg-api-contract';

export default class App extends Component {
  constructor() {
    super();
    this.creditCardRef = React.createRef();
    this.state = {
      cardHolderName: '',
      cardExpiryMM: '',
      cardExpiryYY: '',
      cardCVV: '',
      toggleCheckBox: false,
    };
  }

  handleCardHolderName = (name: string) => {
    this.setState({ cardHolderName: name });
  };

  handleCardExpiryMM = (month: string) => {
    this.setState({ cardExpiryMM: month });
  };

  handleCardExpiryYY = (year: string) => {
    this.setState({ cardExpiryYY: year });
  };

  handleCardCVV = (cvv: string) => {
    this.setState({ cardCVV: cvv });
  };

  handleCFCardInput = (data: string) => {
    console.log('CFCardInput FROM SDK', data);
    const cardNetwork = JSON.parse(data)['card_network'];
    // Update your card network icon using cardNetwork when available.
  };

  componentDidMount() {
    CFPaymentGatewayService.setCallback({
      onVerify(orderID: string): void {
        // Verify the order status from your backend.
        console.log('orderId is :' + orderID);
      },
      onError(error: CFErrorResponse, orderID: string): void {
        console.log(
          'exception is : ' + JSON.stringify(error) + '\norderId is :' + orderID
        );
      },
    });
  }

  componentWillUnmount() {
    CFPaymentGatewayService.removeCallback();
  }

  private getSession(): CFSession {
    return new CFSession(
      '<PAYMENT_SESSION_ID>',
      '<ORDER_ID>',
      CFEnvironment.SANDBOX
    );
  }

  private handleSubmit = () => {
    if (this.creditCardRef.current) {
      const elementCard = new ElementCard(
        this.state.cardHolderName,
        this.state.cardExpiryMM,
        this.state.cardExpiryYY,
        this.state.cardCVV,
        this.state.toggleCheckBox
      );
      this.creditCardRef.current.doPayment(elementCard);
    }
  };

  render() {
    const cfCard = (
      <CFCard
        cfSession={this.getSession()}
        style={{ flex: 1 }}
        cardListener={this.handleCFCardInput}
        placeholder="Enter Card Number"
        placeholderTextColor="#0000ff"
        underlineColorAndroid="transparent"
        cursorColor="gray"
        returnKeyType="next"
        ref={this.creditCardRef}
        onSubmitEditing={() => console.log('onSubmitEditing')}
        onEndEditing={() => console.log('onEndEditing')}
        onBlur={() => console.log('onBlur')}
        onFocus={() => console.log('onFocus')}
      />
    );

    return (
      <ScrollView>
        <View style={styles.container}>
          <View style={styles.cardContainer}>
            {cfCard}
          </View>
          <TextInput
            style={styles.input}
            placeholder="Holder Name"
            keyboardType="default"
            placeholderTextColor="#0000ff"
            underlineColorAndroid="transparent"
            cursorColor="gray"
            onChangeText={this.handleCardHolderName}
          />
          <View style={{ flexDirection: 'row', alignSelf: 'stretch' }}>
            <TextInput
              style={styles.input}
              placeholder="Expiry Month"
              keyboardType="numeric"
              maxLength={2}
              placeholderTextColor="#0000ff"
              underlineColorAndroid="transparent"
              cursorColor="gray"
              onChangeText={this.handleCardExpiryMM}
            />
            <TextInput
              style={styles.input}
              placeholder="Expiry Year"
              keyboardType="numeric"
              maxLength={2}
              placeholderTextColor="#0000ff"
              underlineColorAndroid="transparent"
              cursorColor="gray"
              onChangeText={this.handleCardExpiryYY}
            />
            <TextInput
              style={styles.input}
              placeholder="CVV"
              keyboardType="numeric"
              maxLength={3}
              secureTextEntry={true}
              onChangeText={this.handleCardCVV}
            />
          </View>
          <View style={styles.button}>
            <Button
              onPress={() => this.handleSubmit()}
              title="Card Payment"
            />
          </View>
        </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    padding: 24,
    backgroundColor: '#eaeaea',
    alignItems: 'center',
    flexDirection: 'column',
    flex: 1,
  },
  cardContainer: {
    flexDirection: 'row',
    borderWidth: 1,
    borderColor: '#000',
    justifyContent: 'center',
    alignItems: 'center',
    margin: 10,
    alignSelf: 'stretch',
  },
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,
    flex: 1,
  },
  button: {
    margin: 8,
    width: 200,
  },
});

Sample GitHub code

You can explore a working integration example on GitHub: GitHub sample

Step 3: Confirm the payment Server-side

After the SDK delivers a callback via onVerify, confirm the payment status from your backend before taking any action. The SDK callback signals only that the payment flow has ended. It does not guarantee a successful payment. To verify an order you can call our /pg/orders endpoint from your backend. You can also use our SDK to achieve the same.

curl --request GET \
     --url https://sandbox.cashfree.com/pg/orders/{order_id} \
     --header 'accept: application/json' \
     --header 'x-api-version: 2025-01-01' \
     --header 'x-client-id: "YOUR APP ID GOES HERE"' \
     --header 'x-client-secret: "YOUR SECRET KEY GOES HERE"'

cashfree
.PGFetchOrder("<order_id>")
.then((response) => {
	console.log("Order fetched successfully:", response.data);
})
.catch((error) => {
	console.error("Error:", error.response.data.message);
});

from cashfree_pg.models.create_order_request import CreateOrderRequest
from cashfree_pg.api_client import Cashfree
from cashfree_pg.models.customer_details import CustomerDetails
from cashfree_pg.models.order_meta import OrderMeta

Cashfree.XClientId = "<x-client-id>"
Cashfree.XClientSecret = "<x-client-secret>"
Cashfree.XEnvironment = Cashfree.SANDBOX
x_api_version = "2023-08-01"

try:
    api_response = Cashfree().PGFetchOrder(x_api_version, "order_3242X4jQ5f0S9KYxZO9mtDL1Kx2Y7u", None)
    print(api_response.data)
except Exception as e:
    print(e)

import com.cashfree.*;
//other code

try {
    Cashfree.XClientId = "<x-client-id>";
    Cashfree.XClientSecret = "<x-client-secret>";
    Cashfree.XEnvironment = Cashfree.SANDBOX;

    Cashfree cashfree = new Cashfree();
    String xApiVersion = "2023-08-01";

    ApiResponse<OrderEntity> responseFetchOrder = cashfree.PGFetchOrder(xApiVersion, "<order_id>", null, null, null);
    System.out.println(response.getData().getOrderId());
} catch (ApiException e) {
    throw new RuntimeException(e);
}

version := "2023-08-01"
response, httpResponse, err := cashfree.PGFetchOrder(&version, "<order_id>", nil, nil, nil)
if err != nil {
	fmt.Println(err.Error())
} else {
	fmt.Println(httpResponse.StatusCode)
	fmt.Println(response)
}

using cashfree_pg.Client;
using cashfree_pg.Model;

Cashfree.XClientId = "<x-client-id>";
Cashfree.XClientSecret = "<x-client-secret>";
Cashfree.XEnvironment = Cashfree.SANDBOX;
var cashfree = new Cashfree();
var xApiVersion = "2023-08-01";

try {
    var result = cashfree.PGFetchOrder(xApiVersion, "<order_id>>", null, null);
    Console.WriteLine(result);
    Console.WriteLine(result.StatusCode);
    Console.WriteLine((result.Content as OrderEntity));
} catch (ApiException e) {
    Console.WriteLine("Exception when calling PGFetchOrder: " + e.Message);
    Console.WriteLine("Status Code: " + e.ErrorCode);
    Console.WriteLine(e.StackTrace);
}

$x_api_version = "2023-08-01";
try {
    $response = $cashfree->PGFetchOrder($x_api_version, "<order_id>");
    print_r($response);
} catch (Exception $e) {
    echo 'Exception when calling PGFetchOrder: ', $e->getMessage(), PHP_EOL;
}

Always verify the order status from your backend before you deliver goods or services to the customer. You can use the Get Order API for this. An order is successful when the order_status is PAID.

Testing

After you integrate the custom card component, verify that it behaves as expected. Follow these steps to test:

Enter a test card number in the CFCard field and confirm that cardListener returns BIN metadata after the 8th digit.
Enter the holder name, expiry, and CVV in your own input fields, then tap the pay button.
Confirm that onVerify or onError is called when the payment flow ends.

Use the sandbox environment to test payments before you go live.

Error codes

To confirm the error returned in your React Native application, you can view the error codes exposed by the SDK.

Show error codes

The following are some of the error codes that are exposed by the SDK:

Error code	Message
`MISSING_CALLBACK`	The callback is missing in the request.
`ORDER_ID_MISSING`	The “order_id” is missing in the request.
`SESSION_OBJECT_MISSING`	The “session” is missing in the request.
`PAYMENT_OBJECT_MISSING`	The “payment” is missing in the request.
`ENVIRONMENT_MISSING`	The “environment” is missing in the request.
`CARD_OBJECT_MISSING`	The card object is missing in the request.
`CARD_EXPIRY_MONTH_MISSING`	The “card_expiry_mm” is missing in the request.
`CARD_EXPIRY_YEAR_MISSING`	The “card_expiry_yy” is missing in the request.
`CARD_CVV_MISSING`	The “card_cvv” is missing in the request.

Affiliate partner program

As a developer building payment experiences for your clients, you can earn additional income while providing them with industry-leading payment solutions.

Join the Cashfree affiliate partner program and get rewarded every time your clients use Cashfree.

What you get:

Earn up to 0.25% commission on every transaction.
Become a trusted fintech partner for your clients.
Access to a dedicated partner manager for expert support.

What your clients get:

Instant activation and go live in minutes.
Industry-best success rate across all payment modes.
Effortless acceptance of international payments in 140+ currencies.

Get started today. Become a partner now.

Payments

Payment Gateway

Checkout

International Payments

Flowwise

RiskShield

Subscription

Other Products

Developer updates

React Native Element Custom Card Component

Prerequisites

Step 1

Step 2

Step 3

Step 1: Create an order Server-side

API request for creating an order

Step 2: Open the payment page Client-side

1. Set up the SDK

2. Complete the payment

Create a session

Set up the payment callback

Create a card number UI component

Card listener response

Sample card form UI

Build the ElementCard object and initiate payment

Sample code

Sample GitHub code

Step 3: Confirm the payment Server-side

Testing

Error codes

​Prerequisites

Step 1

Step 2

Step 3

​Step 1: Create an order Server-side

API request for creating an order

​Step 2: Open the payment page Client-side

​1. Set up the SDK

​2. Complete the payment

​Create a session

​Set up the payment callback

​Create a card number UI component

Card listener response

Sample card form UI

​Build the ElementCard object and initiate payment

​Sample code

​Sample GitHub code

​Step 3: Confirm the payment Server-side

​Testing

​Error codes

Prerequisites

Step 1: Create an order Server-side

Step 2: Open the payment page Client-side

1. Set up the SDK

2. Complete the payment

Create a session

Set up the payment callback

Create a card number UI component

Build the ElementCard object and initiate payment

Sample code

Sample GitHub code

Step 3: Confirm the payment Server-side

Testing

Error codes