
Authorize.net for React Native / Expo SDK v49
Introduction
Introducing my first published node package: react-native-expo-authorize-net! This package allows you to easily integrate Authorize.net into your React Native / Expo app. It works for both Android/iOS, and is compatible with Expo SDK v49.
https://www.npmjs.com/package/react-native-expo-authorize-net
How did I do it?
It's based on a fork of react-native-reliantid-authorize-net, but I updated the native module code to implement the following changes:
- work with Expo SDK v49 local development builds
- promisify Auth.net response in both native modules, thus allowing for a more modern approach that works for both platforms using a single syntax.
- improved error handling for both Android / iOS
What have I learned?
This project challenged me to learn about building native modules for React Native. Also, I was able to get acquainted with some Java and Objective-C code in a react native context! It was very exicting to successfully update the native modules to accomodate the desired changes, and I'm incredibly proud of my work on this package! I hope someone finds it useful!
This was a painful, but insightful and rewarding experience 🤣 I feel much more comfortable working with Native Modules and troubleshooting build errors on both platforms! 😎
Usage
import { NativeModules } from 'react-native';
const { RNAuthorizeNet } = NativeModules;
const isProduction = process.env.NODE_ENV === 'production'; // true | false
const cardValues = {
LOGIN_ID: 'XXXX', // AUTH.NET LOGIN_ID
CLIENT_KEY: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', // AUTH.NET PUBLIC KEY
CARD_NO: '4111111111111111',
CVV_NO: '000',
EXPIRATION_MONTH: '11',
EXPIRATION_YEAR: '23'
};
RNAuthorizeNet.getTokenWithRequestForCard(cardValues, isProduction)
.then(response => {
console.log(response);
/*
example response:
{
DATA_DESCRIPTOR: 'COMMON.ACCEPT.INAPP.PAYMENT',
DATA_VALUE: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
}
*/
})
.catch((error: any) => {
if (Platform.OS === 'ios') {
const { code, message } = error;
const alertMsg: string = `${message}\n\nError Code: ${code}`;
Alert.alert('Error', alertMsg, [{ text: 'OK' }], {
cancelable: false
});
} else if (Platform.OS === 'android') {
const { userInfo } = error;
const { ERROR_TEXT, ERROR_CODE } = userInfo;
const alertMsg: string = `${ERROR_TEXT}\n\nError Code: ${ERROR_CODE}`;
Alert.alert('Error', alertMsg, [{ text: 'OK' }], {
cancelable: false
});
}
});
(Please note, error handling is slightly different on each platform and must be handled accordingly as demonstrated above.)
Now I have a working cross-platform Authorize.net integration for my React Native project and that is truly a milestone worth celebrating! I hope someone else finds this package useful, too!
If you need help with this package, please contact me.