1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 | import React, { Component } from 'react';
|
8 | import {
|
9 | AppRegistry,
|
10 | StyleSheet,
|
11 | Text,
|
12 | View,
|
13 | TouchableHighlight,
|
14 | NativeModules,
|
15 | NativeEventEmitter
|
16 | } from 'react-native';
|
17 |
|
18 | import RazorpayCheckout from 'react-native-razorpay';
|
19 |
|
20 | class example extends Component {
|
21 |
|
22 | render() {
|
23 | return (
|
24 | <View style={styles.container}>
|
25 | <TouchableHighlight onPress={() => {
|
26 | var options = {
|
27 | description: 'Credits towards consultation',
|
28 | image: 'https://i.imgur.com/3g7nmJC.png',
|
29 | currency: 'INR',
|
30 | key: 'rzp_test_1DP5mmOlF5G5ag',
|
31 | amount: '5000',
|
32 | external: {
|
33 | wallets: ['paytm']
|
34 | },
|
35 | name: 'foo',
|
36 | prefill: {
|
37 | email: 'akshay@razorpay.com',
|
38 | contact: '8955806560',
|
39 | name: 'Akshay Bhalotia'
|
40 | },
|
41 | theme: {color: '#F37254'}
|
42 | }
|
43 | RazorpayCheckout.open(options).then((data) => {
|
44 |
|
45 | alert(`Success: ${data.razorpay_payment_id}`);
|
46 | }).catch((error) => {
|
47 |
|
48 | alert(`Error: ${error.code} | ${error.description}`);
|
49 | });
|
50 | RazorpayCheckout.onExternalWalletSelection(data => {
|
51 | alert(`External Wallet Selected: ${data.external_wallet} `);
|
52 | });
|
53 | }}>
|
54 | <Text style = {styles.text}>PAY</Text>
|
55 | </TouchableHighlight>
|
56 | </View>
|
57 | );
|
58 | }
|
59 |
|
60 | }
|
61 |
|
62 | const styles = StyleSheet.create({
|
63 | container: {
|
64 | flex: 1,
|
65 | justifyContent: 'center',
|
66 | alignItems: 'center',
|
67 | backgroundColor: '#F5FCFF',
|
68 | },
|
69 | text: {
|
70 | fontSize: 20,
|
71 | fontWeight: 'bold',
|
72 | }
|
73 | });
|
74 |
|
75 | AppRegistry.registerComponent('example', () => example);
|