Authorize Net For React Native Expo Sdk 49

Anthony Coffey
Category: Mobile Development
Tags:

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 and 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 a fork of react-native-reliantid-authorize-net. I updated the code to work with the latest Expo SDK and added the following features:

  • 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 and 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 exciting to successfully update the native modules to accommodate the desired changes, and I'm quite proud of my work on this package.

Now, 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) => {
    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
      });
    }
  });
⚠️

As you can see, error handling is slightly different on each platform and must be handled accordingly as demonstrated above.

expo-build-properties

Please note, the Android module includes some code that requires minSdkVersion 21, but Expo allows us to configure this in app.json via expo-build-properties.

{
  "expo": {
    "plugins": [
      "expo-router",
      [
        "expo-build-properties",
        {
          "android": {
            "minSdkVersion": 26
          },
          "ios": {}
        }
      ]
    ]
  }
}

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!

Back