Integrating AeroPay SDK in React Native: A Step-by-Step Guide

#reactnative #android #ios #aeropay

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:

npm install aerosync-react-native-sdk react-native-dropdown-picker

Step 2: Implement the React Native 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;