Skip to main content

Installation

MPP React Native provides functionality for Push Provisioning support.

Requirements​

Android​

  • Google Pay

    • Agreement with Google granting permission to use the Google Pay API for Push Provisioning.
    • Whitelisted app package name and SHA-256 certificate fingerprint by Google.
    • Android version must be 5.0 (Lollipop) or above.

  • Samsung Pay

    • Agreement with Samsung granting permission to use the Samsung Pay API for Push Provisioning.
    • Registered app in Samsung Pay Developer portal.

  • Android version must be 5.1 (Lollipop, API level 22) or above.

  • Device must be able to connect to the Internet.

iOS​

  • Agreement with Apple.
  • App Store app whitelisted by Apple.
  • iOS version must be 11.0 or above.
  • Device must be able to connect to the Internet.
  • Apple Pay might not be supported on Jailbroken devices.

React Native​

  • Minimum required React Native version is 0.68.2.
  • Current bundled/stable React Native version is 0.72.7.

Installation​

npm​

Set npm configuration for private package.

npm config set @meawallet:registry=https://nexus.ext.meawallet.com/repository/react-native-mpp/
npm config set //nexus.ext.meawallet.com/repository/react-native-mpp/:username NEXUS_USERNAME
npm config set //nexus.ext.meawallet.com/repository/react-native-mpp/:_password $(echo -n 'NEXUS_PASSWORD' | base64)

Install react-native-mpp package with npm.

npm install @meawallet/react-native-mpp --save

yarn​

Set yarn configuration for private package.

yarn config set npmRegistryServer "https://nexus.ext.meawallet.com/repository/react-native-mpp/"
yarn config set npmAlwaysAuth true
yarn config set npmAuthIdent "$(echo -n 'NEXUS_USERNAME:NEXUS_PASSWORD' | base64)"

Install react-native-mpp package with yarn.

yarn add @meawallet/react-native-mpp

Linking Libraries​

Usually react-native-mpp is linked with autolinking, however some project setup might affect and disable autolinking, then the library should be linked manually.

Android​

In android/app/src/main/java/com/example/app/MainApplication.java add the following:

  • Import MppPackage:
import com.reactnativempp.MppPackage;
  • Add the package in getPackages() function:
@Override
protected List<ReactPackage> getPackages() {
    ...
    packages.add(new MppPackage());
    return packages;
}

Xcode​

See React Native iOS - Manual linking.

Configuration​

Configuration File​

  1. Download mea_config.<issuer>.zip.

  2. Unzip the archive. Archive contains configuration file mea_config.

  3. Depending on your platform:

    • Android: Add mea_config to Android App resources res/raw folder. Library automatically loads configuration from app bundle during runtime, and throws an exception if configuration file is missing, broken or otherwise fails to load.
    • iOS: Add mea_config to iOS App Resources folder and App Target. File must be included in the final app bundle. Framework automatically loads configuration from app bundle during runtime.

Environments​

  • test - test environment
  • prod - production environment

By default test environment is set. After npm install set environment variable npm_config_mpp_env to switch between test and prod environments:

export npm_config_mpp_env=prod

Android (Android Studio)​

If npm_config_mpp_env environment variable does not work as expected, mpp_env can be set in build.gradle of the Android project.

  1. Open android/build.gradle in your React Native project folder.
  2. Set mpp_env property in buildscript block at the top of the build.gradle file:
buildscript {
    ext {
        ...
        mpp_env = "prod"
        ...
    }
    ...
}

iOS (Xcode)​

After switching environment run Product - Clean Build Folder in Xcode or the following xcodebuild command.

xcodebuild -project App.xcodeproj -target App clean

Then run a command to install Pods and select "Read From Disk" if Xcode prompts.

cd ios && npm exec -c 'pod install'

Build Pipelines​

Some build pipelines or build chains (e.g. appcenter, fastlane) require to set the environment variable npm_config_mpp_env explicitly. Refer to respective build tool documentation.

React Native New Architecture​

The New Architecture is experimental. The React Native team plans to enable the New Architecture by default in an upcoming React Native release by the end of 2024.

At the moment most production apps are not recommended to have the New Architecture enabled.

Use the following workaround to test the app in experimental mode:

  1. node_modules/@meawallet/react-native-mpp/meawallet-react-native-mpp.podspec: comment out or remove specific folly_version
s.dependency "RCT-Folly"#, folly_version
  1. Remove code enclosed in #ifdef RCT_NEW_ARCH_ENABLED … #endif for node_modules/@meawallet/react-native-mpp/ios/ApplePay.m, node_modules/@meawallet/react-native-mpp/ios/Mpp.m, node_modules/@meawallet/react-native-mpp/ios/Configuration.m
#ifdef RCT_NEW_ARCH_ENABLED
#import "*Spec.h"
#endif

...

// Don't compile this code when we build for the old architecture.
#ifdef RCT_NEW_ARCH_ENABLED
- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
    (const facebook::react::ObjCTurboModule::InitParams &)params
{
    return std::make_shared<facebook::react::NativeConfigurationSpecJSI>(params);
}

#endif
  1. Add the following to the App’s react-native.config.js file as suggested here https://github.com/react-native-maps/react-native-maps/issues/4383#issuecomment-1686095401
module.exports = {
  ...
  project: {
    ios: {
      unstable_reactLegacyComponentNames: [
        'AddPassButton',
        'PaymentButton',
      ],
    },
  },
  ...
};

Enabling Issuer App for Push Provisioning​

Android​

Refer to MPP Android documentation.

iOS​

Refer to MPP iOS documentation.