Skip to content

Commit 2ff5bd9

Browse files
kishan-cashfreekishan-cashfree
authored
Custom Card Component Contract Update (#74)
1 parent 4f97ef6 commit 2ff5bd9

File tree

7 files changed

+419
-298
lines changed

7 files changed

+419
-298
lines changed

‎android/build.gradle‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ dependencies {
6666
implementation 'androidx.constraintlayout:constraintlayout:2.1.3'
6767
implementation 'androidx.gridlayout:gridlayout:1.0.0'
6868

69-
implementation 'com.cashfree.pg:api:2.1.25'
69+
implementation 'com.cashfree.pg:api:2.1.26'
7070

7171
implementation "com.facebook.react:react-native:+" // From node_modules
7272
}

‎example/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
"@react-native-community/checkbox": "^0.5.16",
1414
"react": "18.2.0",
1515
"react-native": "0.72.4",
16-
"react-native-cashfree-pg-sdk": "^2.1.18-dev.1"
16+
"react-native-cashfree-pg-sdk": "^2.1.19-dev.2"
1717
},
1818
"devDependencies": {
1919
"@babel/core": "^7.20.0",

‎example/src/App.js‎

Lines changed: 51 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
import * as React from 'react';
33
import { Component } from 'react';
44
import CheckBox from '@react-native-community/checkbox';
5-
import { Button, Image, Platform, ScrollView, StyleSheet, Text, TextInput, ToastAndroid, View } from 'react-native';
6-
import { CFPaymentGatewayService, CFCard } from 'react-native-cashfree-pg-sdk';
7-
import { Card, CFCardPayment, CFDropCheckoutPayment, CFEnvironment, CFPaymentComponentBuilder, CFPaymentModes, CFSession, CFThemeBuilder, CFUPI, CFUPIIntentCheckoutPayment, CFUPIPayment, SavedCard, UPIMode, ElementCard } from 'cashfree-pg-api-contract';
5+
import { Button, Image, Platform, ScrollView, StyleSheet, Text, TextInput, ToastAndroid, View, } from 'react-native';
6+
import { CFPaymentGatewayService, CFCard, } from 'react-native-cashfree-pg-sdk';
7+
import { Card, CFCardPayment, CFDropCheckoutPayment, CFEnvironment, CFPaymentComponentBuilder, CFPaymentModes, CFSession, CFThemeBuilder, CFUPI, CFUPIIntentCheckoutPayment, CFUPIPayment, SavedCard, UPIMode, ElementCard, } from 'cashfree-pg-api-contract';
88
const BASE_RESPONSE_TEXT = 'Payment Status will be shown here.';
99
export default class App extends Component {
1010
constructor() {
@@ -17,8 +17,8 @@ export default class App extends Component {
1717
cardExpiryMM: '',
1818
cardExpiryYY: '',
1919
cardCVV: '',
20-
orderId: 'order_101024392oVzaS8TCkH8psaTazGGKXFs3tL',
21-
sessionId: 'session_vbN9-FyxaT2EbPSnYnzTqQE54Hk1iaqtLrf_V0AtNRehSfMd4-eBaCtELA9sD9PwC8XmaLz8nU13YzmcurEdftD9w4FRAY-W9af3ZUQ4o2cl',
20+
orderId: 'devstudio_76123729',
21+
sessionId: 'session_8HWBj0N2H2PKwKntO6sz6-490xsXxjxx45wLvgywsyn_Uvzk6UlA5aRxc41wR5qDkUHRfaiuHwFIztUtOhQvpGv0I-VJDMy2DtNQheppAO7pAxDMiA0Vifcpayment',
2222
instrumentId: '',
2323
toggleCheckBox: false,
2424
cfEnv: '',
@@ -134,6 +134,9 @@ export default class App extends Component {
134134
},
135135
});
136136
}
137+
/**
138+
* @deprecated This is deprecated now. Please use WebCheckout or UPIIntentcheckout flow.
139+
*/
137140
async _startCheckout() {
138141
try {
139142
const session = this.getSession();
@@ -170,6 +173,9 @@ export default class App extends Component {
170173
console.log(e.message);
171174
}
172175
}
176+
/**
177+
* Use this method for card payment. This will require PCI-DSS certification to use.
178+
*/
173179
async _startCardPayment() {
174180
try {
175181
const session = this.getSession();
@@ -245,39 +251,42 @@ export default class App extends Component {
245251
}
246252
}
247253
getSession() {
248-
return new CFSession(this.state.sessionId, this.state.orderId, this.state.cfEnv === 'PROD' ? CFEnvironment.PRODUCTION : CFEnvironment.SANDBOX);
254+
return new CFSession(this.state.sessionId, this.state.orderId, this.state.cfEnv === 'PROD'
255+
? CFEnvironment.PRODUCTION
256+
: CFEnvironment.SANDBOX);
249257
}
250258
handleSubmit = () => {
251259
console.log('TYPE', this.creditCardRef);
252260
if (this.creditCardRef.current) {
253261
let nonPciCard = new ElementCard(this.state.cardHolderName, this.state.cardExpiryMM, this.state.cardExpiryYY, this.state.cardCVV, this.state.toggleCheckBox);
262+
this.handleSessionId('session_iZt0C2k4_50oExGN2WFOidE4Z5KbTIGC5BpNpf_qgztd-Yg-q1TpQ0-7jNeIR1UiRjWuI8jpDp3FgcRdBAI5uT8lmW-OEqFJ8tjbg4l4zA4R6lpO90Iipd8payment');
254263
console.log('KISHANTEST', JSON.stringify(nonPciCard));
255-
this.creditCardRef.current.doPayment(nonPciCard);
264+
this.creditCardRef.current.doPaymentWithPaymentSessionId(nonPciCard, this.getSession());
256265
}
257266
};
258267
render() {
259-
let cfCard = React.createElement(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: (e) => console.log('onSubmitEditing'), onEndEditing: (e) => console.log('onEndEditing'), onBlur: (e) => console.log('onBlur'), onFocus: (e) => console.log('onFocus') });
268+
let cfCard = React.createElement(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') });
260269
return (React.createElement(ScrollView, null,
261270
React.createElement(View, { style: styles.container },
262271
React.createElement(View, { style: {
263272
borderWidth: 1,
264273
alignSelf: 'stretch',
265274
textAlign: 'center',
266275
} },
267-
React.createElement(TextInput, { style: styles.input, placeholder: 'Session Id', keyboardType: 'default', onChangeText: this.handleSessionId }),
268-
React.createElement(TextInput, { style: styles.input, placeholder: 'Order Id', keyboardType: 'default', onChangeText: this.handleOrderId }),
269-
React.createElement(TextInput, { style: styles.input, placeholder: 'SANDBOX', keyboardType: 'default', onChangeText: this.handleEnv }),
270-
React.createElement(TextInput, { style: styles.input, placeholder: 'Enter VPA for Collect or PSP app package', keyboardType: 'default', onChangeText: this.handleUpi })),
276+
React.createElement(TextInput, { style: styles.input, placeholder: "Session Id", keyboardType: "default", onChangeText: this.handleSessionId }),
277+
React.createElement(TextInput, { style: styles.input, placeholder: "Order Id", keyboardType: "default", onChangeText: this.handleOrderId }),
278+
React.createElement(TextInput, { style: styles.input, placeholder: "SANDBOX", keyboardType: "default", onChangeText: this.handleEnv }),
279+
React.createElement(TextInput, { style: styles.input, placeholder: "Enter VPA for Collect or PSP app package", keyboardType: "default", onChangeText: this.handleUpi })),
271280
React.createElement(View, { style: styles.button },
272-
React.createElement(Button, { onPress: () => this._startCheckout(), title: 'Start Payment' })),
281+
React.createElement(Button, { onPress: () => this._startCheckout(), title: "Start Payment" })),
273282
React.createElement(View, { style: styles.button },
274-
React.createElement(Button, { onPress: () => this._startWebCheckout(), title: 'Start Web Payment' })),
283+
React.createElement(Button, { onPress: () => this._startWebCheckout(), title: "Start Web Payment" })),
275284
React.createElement(View, { style: styles.button },
276-
React.createElement(Button, { onPress: () => this._startUPICheckout(), title: 'Start UPI Intent Checkout Payment' })),
285+
React.createElement(Button, { onPress: () => this._startUPICheckout(), title: "Start UPI Intent Checkout Payment" })),
277286
React.createElement(View, { style: styles.button },
278-
React.createElement(Button, { onPress: () => this._makeUpiCollectPayment(), title: 'Make UPI Collect Payment' })),
287+
React.createElement(Button, { onPress: () => this._makeUpiCollectPayment(), title: "Make UPI Collect Payment" })),
279288
React.createElement(View, { style: styles.button },
280-
React.createElement(Button, { onPress: () => this._makeUpiIntentPayment(), title: 'Make UPI Intent Payment' })),
289+
React.createElement(Button, { onPress: () => this._makeUpiIntentPayment(), title: "Make UPI Intent Payment" })),
281290
React.createElement(View, { style: {
282291
borderWidth: 1,
283292
alignSelf: 'stretch',
@@ -296,29 +305,42 @@ export default class App extends Component {
296305
} },
297306
React.createElement(View, { style: styles.cardContainer },
298307
cfCard,
299-
React.createElement(Image, { color: '#000', style: {
308+
React.createElement(Image, { color: "#000", style: {
300309
margin: 5,
301310
}, source: this.state.cardNetwork })),
302-
React.createElement(View, { style: { flexDirection: 'column', alignSelf: 'stretch', textAlign: 'center' } },
303-
React.createElement(TextInput, { style: styles.input, placeholder: 'Holder Name', keyboardType: 'default', placeholderTextColor: '#0000ff', underlineColorAndroid: 'transparent', cursorColor: 'gray', onChangeText: this.handleCardHolderName })),
311+
React.createElement(View, { style: {
312+
flexDirection: 'column',
313+
alignSelf: 'stretch',
314+
textAlign: 'center',
315+
} },
316+
React.createElement(TextInput, { style: styles.input, placeholder: "Holder Name", keyboardType: "default", placeholderTextColor: "#0000ff", underlineColorAndroid: 'transparent', cursorColor: 'gray', onChangeText: this.handleCardHolderName })),
304317
React.createElement(View, { style: { flexDirection: 'row', alignSelf: 'stretch' } },
305-
React.createElement(TextInput, { style: styles.input, placeholder: 'Expiry Month', keyboardType: 'numeric', maxLength: 2, placeholderTextColor: '#0000ff', underlineColorAndroid: 'transparent', cursorColor: 'gray', onChangeText: this.handleCardExpiryMM }),
306-
React.createElement(TextInput, { style: styles.input, placeholder: 'Expiry Year', keyboardType: 'numeric', maxLength: 2, placeholderTextColor: '#0000ff', underlineColorAndroid: 'transparent', cursorColor: 'gray', onChangeText: this.handleCardExpiryYY }),
307-
React.createElement(TextInput, { style: styles.input, placeholder: 'CVV', keyboardType: 'numeric', maxLength: 3, secureTextEntry: true, onChangeText: this.handleCardCVV })),
308-
React.createElement(View, { style: { flexDirection: 'row', alignSelf: 'stretch', alignItems: 'center', textAlign: 'center' } },
318+
React.createElement(TextInput, { style: styles.input, placeholder: "Expiry Month", keyboardType: "numeric", maxLength: 2, placeholderTextColor: "#0000ff", underlineColorAndroid: 'transparent', cursorColor: 'gray', onChangeText: this.handleCardExpiryMM }),
319+
React.createElement(TextInput, { style: styles.input, placeholder: "Expiry Year", keyboardType: "numeric", maxLength: 2, placeholderTextColor: "#0000ff", underlineColorAndroid: 'transparent', cursorColor: 'gray', onChangeText: this.handleCardExpiryYY }),
320+
React.createElement(TextInput, { style: styles.input, placeholder: "CVV", keyboardType: "numeric", maxLength: 3, secureTextEntry: true, onChangeText: this.handleCardCVV })),
321+
React.createElement(View, { style: {
322+
flexDirection: 'row',
323+
alignSelf: 'stretch',
324+
alignItems: 'center',
325+
textAlign: 'center',
326+
} },
309327
React.createElement(CheckBox, { value: this.state.toggleCheckBox, onValueChange: this.handleSaveCardToggle }),
310328
React.createElement(Text, null, "Saved Card for future payment")),
311329
React.createElement(View, { style: styles.button },
312-
React.createElement(Button, { onPress: () => this.handleSubmit(), title: 'Card Payment' }))),
330+
React.createElement(Button, { onPress: () => this.handleSubmit(), title: "Card Payment" }))),
313331
React.createElement(View, { style: {
314332
borderWidth: 1,
315333
alignSelf: 'stretch',
316334
} },
317-
React.createElement(View, { style: { flexDirection: 'column', textAlign: 'center', alignSelf: 'stretch' } },
318-
React.createElement(TextInput, { style: styles.input, placeholder: 'Instrument Id', keyboardType: 'default', onChangeText: this.handleInstrumentId }),
319-
React.createElement(TextInput, { style: styles.input, placeholder: 'CVV', keyboardType: 'numeric', maxLength: 3, secureTextEntry: true, onChangeText: this.handleCardCVV })),
335+
React.createElement(View, { style: {
336+
flexDirection: 'column',
337+
textAlign: 'center',
338+
alignSelf: 'stretch',
339+
} },
340+
React.createElement(TextInput, { style: styles.input, placeholder: "Instrument Id", keyboardType: "default", onChangeText: this.handleInstrumentId }),
341+
React.createElement(TextInput, { style: styles.input, placeholder: "CVV", keyboardType: "numeric", maxLength: 3, secureTextEntry: true, onChangeText: this.handleCardCVV })),
320342
React.createElement(View, { style: styles.button },
321-
React.createElement(Button, { onPress: () => this._startSavedCardPayment(), title: 'Saved Card Payment' }))))));
343+
React.createElement(Button, { onPress: () => this._startSavedCardPayment(), title: "Saved Card Payment" }))))));
322344
}
323345
}
324346
const styles = StyleSheet.create({

0 commit comments

Comments
 (0)