Skip to content

Commit 83d79f8

Browse files
kishan-cashfreekishan-cashfree
committed
Android JS, WebJs integration
Default UPI with merchant handling Click
1 parent 54751be commit 83d79f8

20 files changed

+223
-95
lines changed

‎App.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,14 @@ import { createStackNavigator } from '@react-navigation/stack';
1010
import HomeScreen from './HomeScreen';
1111
import PaymentScreen from './PaymentScreen';
1212
import WebsitePaymentScreen from './WebSitePaymentScreen';
13+
import WebsiteDefaultUpiPaymentScreen from './WebsiteDefaultUPIScreen';
1314
const Stack = createStackNavigator();
1415
function App() {
1516
return (React.createElement(NavigationContainer, null,
1617
React.createElement(Stack.Navigator, { initialRouteName: "HomeScreen" },
1718
React.createElement(Stack.Screen, { name: "HomeScreen", component: HomeScreen }),
18-
React.createElement(Stack.Screen, { name: "PaymentScreen", component: PaymentScreen }),
19-
React.createElement(Stack.Screen, { name: "WebsitePaymentScreen", component: WebsitePaymentScreen }))));
19+
React.createElement(Stack.Screen, { name: "AndroidJsPaymentScreen", component: PaymentScreen }),
20+
React.createElement(Stack.Screen, { name: "WebsitePaymentScreen", component: WebsitePaymentScreen }),
21+
React.createElement(Stack.Screen, { name: "WebsiteDefaultUPIScreen", component: WebsiteDefaultUpiPaymentScreen }))));
2022
}
2123
export default App;

‎App.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { createStackNavigator } from '@react-navigation/stack';
1111
import HomeScreen, { RootStackParamList } from './HomeScreen';
1212
import PaymentScreen from './PaymentScreen';
1313
import WebsitePaymentScreen from './WebSitePaymentScreen';
14+
import WebsiteDefaultUpiPaymentScreen from'./WebsiteDefaultUPIScreen'
1415

1516

1617
const Stack = createStackNavigator<RootStackParamList>();
@@ -19,8 +20,9 @@ function App(): React.JSX.Element {
1920
<NavigationContainer>
2021
<Stack.Navigator initialRouteName="HomeScreen">
2122
<Stack.Screen name="HomeScreen" component={HomeScreen} />
22-
<Stack.Screen name="PaymentScreen" component={PaymentScreen} />
23+
<Stack.Screen name="AndroidJsPaymentScreen" component={PaymentScreen} />
2324
<Stack.Screen name="WebsitePaymentScreen" component={WebsitePaymentScreen} />
25+
<Stack.Screen name="WebsiteDefaultUPIScreen" component={WebsiteDefaultUpiPaymentScreen} />
2426
</Stack.Navigator>
2527
</NavigationContainer>
2628
);

‎HomeScreen.js‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,24 @@ import React from 'react';
22
import { View, Button, NativeAppEventEmitter } from 'react-native';
33
const HomeScreen = ({ navigation }) => {
44
const onClick = () => {
5-
navigation.navigate('PaymentScreen');
5+
navigation.navigate('AndroidJsPaymentScreen');
66
};
77
const websitePaymentScreen = () => {
88
navigation.navigate('WebsitePaymentScreen');
99
};
10+
const websiteDefaultUPIScreen = () => {
11+
navigation.navigate('WebsiteDefaultUPIScreen');
12+
};
1013
let paymentResponseFunction = (response) => {
1114
console.log('response is : ' + JSON.stringify(response));
1215
navigation.navigate('HomeScreen');
1316
};
1417
NativeAppEventEmitter.addListener("paymentResponse", paymentResponseFunction);
1518
return (React.createElement(View, { style: { flex: 1, justifyContent: 'center', alignItems: 'center' } },
16-
React.createElement(Button, { title: "Payment Page with Android JS bridge", onPress: onClick }),
19+
React.createElement(Button, { title: "Payment Page with Android JS Integration", onPress: onClick }),
20+
React.createElement(View, { style: { width: 50, height: 50, } }),
21+
React.createElement(Button, { title: "Website JS Integration PaymentScreen", onPress: websitePaymentScreen }),
1722
React.createElement(View, { style: { width: 50, height: 50, } }),
18-
React.createElement(Button, { title: "Website JS Integration PaymentScreen", onPress: websitePaymentScreen })));
23+
React.createElement(Button, { title: "Website JS Integration with Default UPI", onPress: websiteDefaultUPIScreen })));
1924
};
2025
export default HomeScreen;

‎HomeScreen.tsx‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@ import { StackNavigationProp } from '@react-navigation/stack';
44

55
export type RootStackParamList = {
66
HomeScreen: undefined;
7-
PaymentScreen: undefined;
7+
AndroidJsPaymentScreen: undefined;
88
WebsitePaymentScreen: undefined;
9+
WebsiteDefaultUPIScreen: undefined;
910
};
1011

1112
type HomeScreenNavigationProp = StackNavigationProp<RootStackParamList, 'HomeScreen'>;
@@ -16,13 +17,17 @@ interface HomeScreenProps {
1617

1718
const HomeScreen: React.FC<HomeScreenProps> = ({ navigation }) => {
1819
const onClick = () => {
19-
navigation.navigate('PaymentScreen');
20+
navigation.navigate('AndroidJsPaymentScreen');
2021
};
2122

2223
const websitePaymentScreen = () => {
2324
navigation.navigate('WebsitePaymentScreen');
2425
};
2526

27+
const websiteDefaultUPIScreen = () => {
28+
navigation.navigate('WebsiteDefaultUPIScreen');
29+
};
30+
2631
let paymentResponseFunction = (response: string) => {
2732
console.log('response is : ' + JSON.stringify(response));
2833
navigation.navigate('HomeScreen');
@@ -32,14 +37,19 @@ const HomeScreen: React.FC<HomeScreenProps> = ({ navigation }) => {
3237
return (
3338
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
3439
<Button
35-
title="Payment Page with Android JS bridge"
40+
title="Payment Page with Android JS Integration"
3641
onPress={onClick}
3742
/>
3843
<View style={{ width: 50, height: 50,}} />
3944
<Button
4045
title="Website JS Integration PaymentScreen"
4146
onPress={websitePaymentScreen}
4247
/>
48+
<View style={{ width: 50, height: 50,}} />
49+
<Button
50+
title="Website JS Integration with Default UPI"
51+
onPress={websiteDefaultUPIScreen}
52+
/>
4353
</View>
4454
);
4555
};

‎PaymentScreen.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import React from 'react';
2-
import CFWebView from './native/CFWebView';
2+
import CFWebView from './native/CFAndroidWebView';
33
const PaymentScreen = ({}) => {
4-
return (React.createElement(CFWebView, { paymentSessionId: "session_kY-tXlysx58bnK3kXrEagyeua0nZKynH9MlqgmqmVcRZVWT-GYKk3IgYF9wws47bDW7dScvudwkaG_BsbbfXFmrJn2Cpi4wAbAuaMIAbMmrU", style: { flex: 1 } }));
4+
return (React.createElement(CFWebView, { paymentInfo: {
5+
paymentSessionId: "session_kY-tXlysx58bnK3kXrEagyeua0nZKynH9MlqgmqmVcRZVWT-GYKk3IgYF9wws47bDW7dScvudwkaG_BsbbfXFmrJn2Cpi4wAbAuaMIAbMmrU",
6+
env: 'sandbox'
7+
}, style: { flex: 1 } }));
58
};
69
export default PaymentScreen;

‎PaymentScreen.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
import React from 'react';
2-
import CFWebView from './native/CFWebView'
2+
import CFWebView from './native/CFAndroidWebView'
33

44
const PaymentScreen: React.FC = ({ }) => {
55
return (
66
<CFWebView
7-
paymentSessionId={"session_kY-tXlysx58bnK3kXrEagyeua0nZKynH9MlqgmqmVcRZVWT-GYKk3IgYF9wws47bDW7dScvudwkaG_BsbbfXFmrJn2Cpi4wAbAuaMIAbMmrU"}
7+
paymentInfo={
8+
{
9+
paymentSessionId : "session_kY-tXlysx58bnK3kXrEagyeua0nZKynH9MlqgmqmVcRZVWT-GYKk3IgYF9wws47bDW7dScvudwkaG_BsbbfXFmrJn2Cpi4wAbAuaMIAbMmrU",
10+
env: 'sandbox'
11+
}
12+
}
813
style={{ flex: 1 }} />
914
);
1015
};

‎WebSitePaymentScreen.js‎

Lines changed: 2 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,6 @@
11
import React from 'react';
2-
import { Linking } from 'react-native';
3-
import { WebView } from 'react-native-webview';
2+
import CFWebView from './native/CFWebView';
43
const WebsitePaymentScreen = ({}) => {
5-
const checkIsUPIIntentLink = (link) => {
6-
if (link != undefined &&
7-
(link.startsWith("upi://pay")
8-
|| link.startsWith("tez://") || link.startsWith("gpay://")
9-
|| link.startsWith("paytmmp://")
10-
|| link.startsWith("phonepe://"))) {
11-
return true;
12-
}
13-
return false;
14-
};
15-
return (React.createElement(WebView, { source: { uri: 'https://internal.prodint.cashfree.com/checkout?pt=session_soPoDKVZ1XV3mC-fYzG1GLYcWvkgUEku2AC_9p5A1Gp_0XKZUkiXLXWTEMOvIg3pF0BwgvXsiY0a72b7GIPwhcyEfo_zSEQ_GZ5RtD3f7OxD' }, style: { flex: 1 }, onShouldStartLoadWithRequest: event => {
16-
console.log("Current URL Loading", event.url);
17-
if (checkIsUPIIntentLink(event.url)) {
18-
Linking.canOpenURL(event.url).then(supported => {
19-
if (supported) {
20-
Linking.openURL(event.url);
21-
}
22-
else {
23-
console.log("Not able to open");
24-
}
25-
});
26-
return false;
27-
}
28-
return true;
29-
} }));
4+
return (React.createElement(CFWebView, { source: { uri: 'https://discoverpilgrim.com/' } }));
305
};
316
export default WebsitePaymentScreen;

‎WebSitePaymentScreen.tsx‎

Lines changed: 6 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,13 @@
11
import React from 'react';
2-
import { Linking } from 'react-native';
3-
import { WebView } from 'react-native-webview';
2+
import CFWebView from './native/CFWebView';
43

54
const WebsitePaymentScreen: React.FC = ({ }) => {
65

7-
const checkIsUPIIntentLink = (link: string)=>{
8-
if(link != undefined &&
9-
(link.startsWith("upi://pay")
10-
|| link.startsWith("tez://")|| link.startsWith("gpay://")
11-
|| link.startsWith("paytmmp://")
12-
|| link.startsWith("phonepe://"))
13-
){
14-
return true
15-
}
16-
return false
17-
}
18-
return (
19-
<WebView
20-
source={{ uri: 'https://internal.prodint.cashfree.com/checkout?pt=session_soPoDKVZ1XV3mC-fYzG1GLYcWvkgUEku2AC_9p5A1Gp_0XKZUkiXLXWTEMOvIg3pF0BwgvXsiY0a72b7GIPwhcyEfo_zSEQ_GZ5RtD3f7OxD' }}
21-
style={{ flex: 1 }}
22-
onShouldStartLoadWithRequest={event => {
23-
console.log("Current URL Loading", event.url)
24-
if(checkIsUPIIntentLink(event.url)) {
25-
Linking.canOpenURL(event.url).then(supported => {
26-
if (supported) {
27-
Linking.openURL(event.url);
28-
}else{
29-
console.log("Not able to open")
30-
}
31-
});
32-
return false;
33-
}
34-
return true;
35-
}}
36-
/>
37-
);
6+
return (
7+
<CFWebView
8+
source={{uri: 'https://discoverpilgrim.com/'}}
9+
/>
10+
);
3811
};
3912

4013
export default WebsitePaymentScreen;

‎WebsiteDefaultUPIScreen.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react';
2+
import { Linking } from 'react-native';
3+
import { WebView } from 'react-native-webview';
4+
const WebsiteDefaultUpiPaymentScreen = ({}) => {
5+
const checkIsUPIIntentLink = (link) => {
6+
if (link != undefined &&
7+
(link.startsWith("upi://pay")
8+
|| link.startsWith("tez://") || link.startsWith("gpay://")
9+
|| link.startsWith("paytmmp://")
10+
|| link.startsWith("phonepe://"))) {
11+
return true;
12+
}
13+
return false;
14+
};
15+
return (React.createElement(WebView, { source: { uri: 'https://internal.prodint.cashfree.com/checkout?pt=session_soPoDKVZ1XV3mC-fYzG1GLYcWvkgUEku2AC_9p5A1Gp_0XKZUkiXLXWTEMOvIg3pF0BwgvXsiY0a72b7GIPwhcyEfo_zSEQ_GZ5RtD3f7OxD' }, style: { flex: 1 }, onShouldStartLoadWithRequest: event => {
16+
console.log("Current URL Loading", event.url);
17+
if (checkIsUPIIntentLink(event.url)) {
18+
Linking.canOpenURL(event.url).then(supported => {
19+
if (supported) {
20+
Linking.openURL(event.url);
21+
}
22+
else {
23+
console.log("Not able to open");
24+
}
25+
});
26+
return false;
27+
}
28+
return true;
29+
} }));
30+
};
31+
export default WebsiteDefaultUpiPaymentScreen;

‎WebsiteDefaultUPIScreen.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React from 'react';
2+
import { Linking } from 'react-native';
3+
import { WebView } from 'react-native-webview';
4+
5+
const WebsiteDefaultUpiPaymentScreen: React.FC = ({ }) => {
6+
7+
const checkIsUPIIntentLink = (link: string)=>{
8+
if(link != undefined &&
9+
(link.startsWith("upi://pay")
10+
|| link.startsWith("tez://")|| link.startsWith("gpay://")
11+
|| link.startsWith("paytmmp://")
12+
|| link.startsWith("phonepe://"))
13+
){
14+
return true
15+
}
16+
return false
17+
}
18+
return (
19+
<WebView
20+
source={{ uri: 'https://internal.prodint.cashfree.com/checkout?pt=session_soPoDKVZ1XV3mC-fYzG1GLYcWvkgUEku2AC_9p5A1Gp_0XKZUkiXLXWTEMOvIg3pF0BwgvXsiY0a72b7GIPwhcyEfo_zSEQ_GZ5RtD3f7OxD' }}
21+
style={{ flex: 1 }}
22+
onShouldStartLoadWithRequest={event => {
23+
console.log("Current URL Loading", event.url)
24+
if(checkIsUPIIntentLink(event.url)) {
25+
Linking.canOpenURL(event.url).then(supported => {
26+
if (supported) {
27+
Linking.openURL(event.url);
28+
}else{
29+
console.log("Not able to open")
30+
}
31+
});
32+
return false;
33+
}
34+
return true;
35+
}}
36+
/>
37+
);
38+
};
39+
40+
export default WebsiteDefaultUpiPaymentScreen;

0 commit comments

Comments
 (0)