In the world of digital payments, AeroPay offers a robust solution for smart bank transfers and direct bank connections. With its easy-to-implement SDKs and APIs, AeroPay simplifies the payment experience for businesses and consumers alike. This blog will guide you through integrating the AeroPay SDK into a React Native application.
Why Choose AeroPay?
AeroPay provides:
Smart Bank Transfers: Seamless payment processing.
Direct Bank Connections: Secure and fast connections to banks.
Customizable Widgets: Tailored experiences for payment flows.
Step 1: Install the Required Dependencies
To start, install the AeroPay SDK and any additional libraries required for the project:
CODE
npm install aerosync-react-native-sdk react-native-dropdown-picker
Step 2: Implement the React Native Code
CODE
import React, { useState } from 'react';
import BankLink from 'aerosync-react-native-sdk';
import DropDownPicker from 'react-native-dropdown-picker';
import {
StyleSheet,
SafeAreaView,
Text,
View,
TextInput,
TouchableOpacity,
} from 'react-native';
const App = () => {
const [token, setToken] = useState('');
const [isSubmitted, setIsSubmitted] = useState(false);
const [consumerId, setConsumerId] = useState('');
const [open, setOpen] = useState(false);
const [value, setValue] = useState('staging');
const [items, setItems] = useState([
{ label: 'STAGING', value: 'staging' },
{ label: 'SANDBOX', value: 'sandbox' },
{ label: 'PRODUCTION', value: 'production' },
]);
const onLoad = () => console.log('Widget Loaded');
const onClose = () => {
console.log('Widget Closed');
setIsSubmitted(false);
};
const onSuccess = (event) => {
console.log('Success:', event);
setIsSubmitted(false);
};
const onError = (event) => console.log('Error:', event);
const onEvent = (event) => console.log('Event:', event);
if (isSubmitted) {
return (
<SafeAreaView>
<BankLink
token={token}
environment={value}
onError={onError}
onClose={onClose}
onEvent={onEvent}
onSuccess={onSuccess}
onLoad={onLoad}
deeplink="https://staging.aerosync.com/"
consumerId={consumerId}
style={{ width: '100%', height: '100%' }}
/>
</SafeAreaView>
);
}
return (
<SafeAreaView style={styles.container}>
<Text style={styles.title}>AeroPay React Native Integration</Text>
<View style={styles.dropdown}>
<DropDownPicker
open={open}
value={value}
items={items}
setOpen={setOpen}
setValue={setValue}
setItems={setItems}
placeholder="Select Environment"
/>
</View>
<TextInput
style={styles.input}
placeholder="Enter Token"
onChangeText={setToken}
placeholderTextColor="#555"
/>
<TextInput
style={styles.input}
placeholder="Enter Consumer ID (optional)"
onChangeText={setConsumerId}
placeholderTextColor="#555"
/>
<TouchableOpacity
style={styles.button}
onPress={() => setIsSubmitted(true)}
>
<Text style={styles.buttonText}>Launch AeroPay Widget</Text>
</TouchableOpacity>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
},
title: {
fontSize: 22,
fontWeight: 'bold',
marginBottom: 20,
},
dropdown: {
width: '80%',
marginBottom: 20,
},
input: {
width: '80%',
borderColor: '#ccc',
borderWidth: 1,
borderRadius: 5,
padding: 10,
marginBottom: 20,
},
button: {
backgroundColor: '#24c3d2',
padding: 15,
borderRadius: 5,
},
buttonText: {
color: '#fff',
fontWeight: 'bold',
fontSize: 16,
},
});
export default App;
Vollständiger Original-Bericht
Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.
SOCIAL SHARE CARD GENERATOR