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.