foxpay-native-module

Foxpay Native Module for React Native Application (cross-platform support)

1. Features

Current published features

| Function | Description | | :--- | :--- | | setMerchantConfig | Initialize some required infomations | | openFoxpaySDK | Open Foxpay Application inside your app | | openScreenFoxpay | Open some feature in Foxpay App such as: Water, Electric, FPTPlay,.. | | registerFoxpay | // Only register not KYC | | registerAndKycFoxpay | Register Foxpay Account with new phone number then KYC | | scanQRFoxpay | Show payment with string QR | | onPaymentServiceFoxpay | // | | onPaymentElectricHues | // | | onCheckAccountExist | Check account if exist | | dismissSDK | Dismiss Foxpay SDK straightway|

2. Installation

Using npm

npm install foxpay-native-module

Or add dependencies to your project by updating your package.json Example:

"dependencies": {
   "react": "18.1.0",
   "react-native": "0.70.6",
   "foxpay-native-module": "0.0.9"
 },

Then follow the instructions for your platform to link foxpay-native-module into your project

3. IOS Configuration

• Follow these steps to install FPSDKFramework to your ios project

1. cd to ios folder
2. run pod init (if only Podfile has not been generated in ios folder)
3. make sure use_frameworks! flag is enabled
4. you must disable Flipper :flipper_configuration => FlipperConfiguration.disabled, Podfile should look similar to this

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

platform :ios, '12.4'
install! 'cocoapods', :deterministic_uuids => false
use_frameworks!
target 'FoxpayNativeModuleExample' do
  config = use_native_modules!
  flags = get_default_flags()
  use_react_native!(
    :path => config[:reactNativePath],
    :hermes_enabled => false,
    :fabric_enabled => false,
    :flipper_configuration => FlipperConfiguration.disabled,
    # An absolute path to your application root.
    :app_path => "#{Pod::Config.instance.installation_root}/.."
  )

  target 'FoxpayNativeModuleExampleTests' do
    inherit! :complete
    # Pods for testing
  end

  post_install do |installer|
    react_native_post_install(
      installer,
      # Set `mac_catalyst_enabled` to `true` in order to apply patches
      # necessary for Mac Catalyst builds
      :mac_catalyst_enabled => false
    )
    __apply_Xcode_12_5_M1_post_install_workaround(installer)
    installer.pods_project.targets.each do |target|
      target.build_configurations.each do |config|
        config.build_settings['EXPANDED_CODE_SIGN_IDENTITY'] = ""
        config.build_settings['CODE_SIGNING_REQUIRED'] = "NO"
        config.build_settings['CODE_SIGNING_ALLOWED'] = "NO"
        config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
      end
    end
  end
end

5. run pod install

• Next step, in your AppDelegate.h, import FPSDKFramework like this

#import <FPSDKFramework/FPSDKFramework-Swift.h>

• Then configure the SDK by adding these following lines to didFinishLaunchingWithOptions function in your AppDelegate

NSString *secretKey = @"xxx_yyyy_zzz";
FPMerchantConfig *config =
[[FPMerchantConfig alloc] initWithEnvironment:EnvironmentStaging
                                    secretKey:secretKey
                                    showLog:FALSE
                                    theme:IntegrationAppFoxpayLight];
[[FPaySDKManager shared] initFoxpaySDKWithConfig:config];

In which:

• secretKey: must be replace with secret key provided by Foxpay
• Environment: Environment can be: Staging, Production, Development and Testing

4. Android Configuration

1. Update code in android/build.gradle:

    google()
    maven { url 'https://www.jitpack.io' }
    jcenter()
    maven {
        url "https://artifactory.foxpay.vn/artifactory/example-repo-local"
        credentials {
            username = "${artifactory_username}"
            password = "${artifactory_password}"
        }
    }

2. Update code in android/AndroidManifest.xml In tag application. android:usesCleartextTraffic="true" tools:replace="android:allowBackup,android:name,android:usesCleartextTraffic" Note: Depends on the properties the application uses. The value of the tools:replace field may be different

5. Usage

1. SetMerchantConfig before use SDK

import {setMerchantConfig} from 'foxpay-native-module';

then call as bellow:

 const mEnv = EnvironmentFoxpay.FoxEnvDev...
 const mPhoneNumber = ’09…’;
 const mSystoken = 'Basic …';
 setMerchantConfig(mEnv, mPhoneNumber, mSystoken);

2. In your js, ts, tsx,... import feature(s) you want to use

import {openFoxpaySDK} from 'foxpay-native-module';

then call like bellow to open Foxpay in your App

openFoxpaySDK(“0123456789”); 

6. Example

You can see full example here:

import * as React from 'react';
import { StyleSheet, View, Button, Text, Alert } from 'react-native';
import {openFoxpaySDK, setMerchantConfig} from 'foxpay-native-module';
 
export default function App() {
 const mEnv = EnvironmentFoxpay.FoxEnvDev...
 const mPhoneNumber = ’0358976837’;
 const mSystoken = 'Basic …';
 setMerchantConfig(mEnv, mPhoneNumber, mSystoken);
 
 return (
   <View style={styles.container}>
     <Text>'foxpay-native-module' example </Text>
     <Button
       title={'Open Foxpay SDK'}
       onPress={() => {
         openFoxpaySDK(mPhoneNumber);
       }}
     />
   </View>
 );
}
 
const styles = StyleSheet.create({
 container: {
   flex: 1,
   alignItems: 'center',
   justifyContent: 'center',
 },
 box: {
   width: 60,
   height: 60,
   marginVertical: 20,
 },
});

7. Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

8. License

Copyright © 2022 Foxpay (FPT Telecom). All rights reserved.

9. Developer team

thuytv8, tunghd3 :bug: