react-native-easebuzz-customsdk

React Native Easebuzz Custom SDK for secure card payments integration leveraging native Easebuzz SDKs on Android and iOS.

Installation

npm install react-native-easebuzz-customsdk

Usage

Import components and context

import {
  EasebuzzPaymentContext,
  EBZCardNumberInput,
  EBZExpiryDateInput,
  EBZCVVInput,
  EBZCardNameInput,
  EBZSaveCardList
  initiateEasebuzzPayment
} from 'react-native-easebuzz-customsdk';

Usage Example

Wrap your card input components inside to manage validation state:

const binParams = {
    merchant_key: "",
    merchant_salt: "",
    encryption_key: "",
    encryption_iv: "",
    customer_unique_id: "" // Required only for saved card view
  };

<EasebuzzPaymentContext 
  onValidationChange={returns boolean value if all validation completed} 
	paymentOption={'creditcardview'} // Use "savedcardview" for saved cards
 	pay_mode={This will either be "test" or "production"}
 	binRequestParams={binParams} // which are mention above 
>


	 <EBZCardNumberInput
	  containerStyle={{ /* View style for container */ }}
	   textInputStyle={{ /* TextInput style */ }}
	   errorLabelStyle={{ /* Style for validation error text */ }}
	   placeholder=''
       placeholderTextColor=''
	   onBinDataReceived={(bindata: any) => yourFunction(bindata)}// BIN API response
	   cardLength={(length: any) => yourFunction(length)} // Card Number Length count
	   maskedCardDetails={(Digits: any) => yourFunction(Digits)} // Masked number preview
	   onFieldStateChange={({ isFocused, isEmpty }) => {
		console.log(isFocused);// true when focused, false on blur
		console.log(isEmpty);}} // true if input is empty, false otherwise
	   onCVVClear={({cvvCleared}) => {console.log(cvvCleared);}}// true if cvvinput get empty

	 />

	  <EBZExpiryDateInput
	   containerStyle={{ }}
	   textInputStyle={{ }}
	   errorLabelStyle={{ }}
	   placeholder=''
       placeholderTextColor=''
	   onFieldStateChange={({ isFocused, isEmpty }) => {
		console.log(isFocused);// true when focused, false on blur
		console.log(isEmpty);}} // true if input is empty, false otherwise
	 />
	 
	  <EBZCVVInput
	   containerStyle={{ }}
	   textInputStyle={{ }}
	   errorLabelStyle={{ }}
	   placeholder=''
       placeholderTextColor=''
	   onFieldStateChange={({ isFocused, isEmpty }) => {
		console.log(isFocused);// true when focused, false on blur
		console.log(isEmpty);}} // true if input is empty, false otherwise
	   onCVVValidated={({ last4Digit }) => {yourFunction(last4Digit)}}	// Card Last 4 digit 
	 />
	 
	  <EBZCardNameInput
	   containerStyle={{ }}
	   textInputStyle={{ }}
	   errorLabelStyle={{ }}
	   placeholder=''
       placeholderTextColor=''
	   onFieldStateChange={({ isFocused, isEmpty }) => {
		console.log(isFocused);// true when focused, false on blur
		console.log(isEmpty);}} // true if input is empty, false otherwise
	 />
	 
	    <EBZSaveCardList
		containerStyle={{ /* View style for container */ }}
		cardItemStyle={{ /* View style for list Item */ }}
		selectedcardItemStyle={{ /* style for slected item*/ }}
		cvvInputStyle={{/* CVV TextInput style */}}
		placeholder=''
        placeholderTextColor=''
		errorLabelStyle={{/* Style for validation error cvv text */}}
		cardTypeImageStyle={{/*  Network image style */}}
		cardNumberStyle={{/* Card number Text style */}}
		isSavedCardCallbackEnabled={(length: any) => console.log(length)} // Number of saved cards
	    onBinDataReceived={(bindata: any) => yourFunction(bindata)}// BIN API response
	 	onCvvFieldStateChange={({ isFocused, isEmpty }) => {
			console.log(isFocused);// true when focused, false on blur
		    console.log(isEmpty);}} // true if input is empty, false otherwise
	/>
      

</EasebuzzPaymentContext>

Initiate Payment

Use the initiateEasebuzzPayment method to process payment after collecting valid card details:

const response = await initiateEasebuzzPayment({
 accessKey: 'easebuzz_access_key',
 saveCardFlag:  "This will either be 'True' or 'False'",
});

Props & Parameters

• EasebuzzPaymentContext

  • onValidationChange: (boolean) => void — Callback fired when card form validation status changes.
  • payMode: 'test' | 'production' — Environment mode.
  • paymentOption: string — Payment UI option(creditcardview or savedcardview).
  • binRequestParams : Required for BIN Details as request param

• EBZCardNumberInput, EBZExpiryDateInput, EBZCVVInput, EBZCardNameInput

  • containerStyle — Style for the input container (View).

  • textInputStyle — Style for the TextInput.

  • errorLabelStyle — Style for the error text label.

  • placeholder - placeholder for specific textInput

  • placeholderTextColor - placeholder color for specific textInput

  • onFieldStateChange - will give focus(true) and blur(false) event and also field empty(isEmpty as true/false)

  • onBinDataReceived- (Only in EBZCardNumberInput) Callback with BIN data.

  • maskedCardDetails -(Only in EBZCardNumberInput) Callback with Last 4digit of card.

• EBZSaveCardList

  • containerStyle - Style for container (View)
  • cardItemStyle - Style for individual saved card items.
  • cvvInputStyle - Style for the CVV input field.
  • onBinDataReceived- Callback with BIN data from selected card.
  • onCvvFieldStateChange- will give focus(true) and blur(false) event and also field empty(isEmpty as true/false)
  • isSavedCardCallbackEnabled - Callback with count for savedcard in list.

• initiateEasebuzzPayment(params)

  • accessKey: string — Merchant access key.
  • saveCardFlag?: 'True' | 'False' — Whether to save card for future use.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library