0.0.3 • Published 1 year ago
foxpay-native-module-dn v0.0.3
foxpay-native-module-dn
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 | // |
onCheckAccountExist | Check account if exist |
dismissSDK | Dismiss Foxpay SDK straightway |
2. Installation
Using npm
npm install foxpay-native-module-dn
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-dn": "0.0.3"
},
Then follow the instructions for your platform to link foxpay-native-module-dn
into your project
3. IOS Configuration
- Follow these steps to install
FPSDKFramework
to your ios project
cd
toios
folder- run
pod init
(if onlyPodfile
has not been generated in ios folder) - make sure
use_frameworks!
flag is enabled - 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
- run
pod install
- Next step, in your
AppDelegate.h
, importFPSDKFramework
like this
#import <FPSDKFramework/FPSDKFramework-Swift.h>
- Then configure the SDK by adding these following lines to
didFinishLaunchingWithOptions
function in yourAppDelegate
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 FoxpayEnvironment
: Environment can be: Staging, Production, Development and Testing
4. Android Configuration
- 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}"
}
}
- 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 thetools:replace
field may be different
5. Usage
- SetMerchantConfig before use SDK
import {setMerchantConfig} from 'foxpay-native-module-dn';
then call as bellow:
const mEnv = EnvironmentFoxpay.FoxEnvDev...
const mPhoneNumber = ’09…’;
const mSystoken = 'Basic …';
setMerchantConfig(mEnv, mPhoneNumber, mSystoken);
- In your js, ts, tsx,... import feature(s) you want to use
import {openFoxpaySDK} from 'foxpay-native-module-dn';
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-dn';
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-dn' 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.