@fortepayments/forte-react-native-sdk NPM

Forte React Native SDK

Simplify mobile payments for your customers with CSG Forte React Native SDK. Get up and running quickly while keeping control of the UX of your web, native Android, and iOS apps. Our PCI-compliant architecture is designed to protect your customer’s valuable data.

Package Name - @fortepayments/forte-react-native-sdk
Version - 1.0.0

Required Dependencies

"react-native-web": "^0.17.5" //Only use, when you want to run this SDK in a browser

Installation

If installing from NPM repository

npm install @fortepayments/forte-react-native-sdk

How to create a new RN project with CSG Forte RN SDK

Create New Project with command

npx react-native init csgfortesample --version 0.68.2

Then copy the "Open Sans" fonts from example folder to your assets/fonts folder in your react native project. After that create a new file in your project named: react-native.config.js and add following contents to it:

module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: ["./assets/fonts/"],
};

Then run

npx react-native link

Then go to your iOS project folder and run

pod install

Then replace the contents of the App.js file with the contents from the AppBarebones.js file from the example.
Now run:

npm run start

Then in a new terminal run

npm run ios

For Android you can run

npm run android

How to add support for RN for Web

Continuing from the last section, run the following command to install required libs:

npm install -D react-dom@"^17.0.2" react-native-web@"^0.17.5" webpack@"^5.67.0" webpack-cli@"^4.10.0" webpack-dev-server@"^4.7.3" url-loader@"^4.1.1" html-webpack-plugin@"^5.5.0" babel-plugin-react-native-web@"^0.17.5" babel-loader@"^8.2.3"

Then add these two lines in package script

  "build": "rm -rf dist/ && webpack --mode=production --config webpack.config.js",
  "web": "webpack serve --mode=development --config webpack.config.js"

Then Create a new file in your project named: index.html and add following contents to it:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>CSG Forte</title>
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
      #app-root {
        display: flex;
        flex: 1 1 100%;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="app-root"></div>
  </body>
</html>

Then Create a new file in your project named: index.web.js and add following contents to it: (here APP is the Main component of the project)

import { AppRegistry } from "react-native";
import { name as appName } from "./app.json";
import App from "./App";
if (module.hot) {
  module.hot.accept();
}
AppRegistry.registerComponent(appName, () => App);
AppRegistry.runApplication(appName, {
  initialProps: {},
  rootTag: document.getElementById("app-root"),
});

Then Create a new file in your project named: webpack.config.js and add following contents to it:

const path = require("path");

const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const appDirectory = path.resolve(__dirname);
const { presets } = require(`${appDirectory}/babel.config.js`);

const compileNodeModules = [
  "react-native-web",
  "@fortepayments/forte-react-native-sdk",
].map((moduleName) => path.resolve(appDirectory, `node_modules/${moduleName}`));

const babelLoaderConfiguration = {
  test: /\.(sass|less|css)|.ttf$|.js$|tsx?$/,
  // Add every directory that needs to be compiled by Babel during the build.
  include: [
    path.resolve(__dirname, "index.web.js"), // Entry to your application
    path.resolve(__dirname, "App.js"), // Change this to your main App file
    path.resolve(__dirname, "src"),
    ...compileNodeModules,
  ],
  use: {
    loader: "babel-loader",
    options: {
      cacheDirectory: true,
      presets,
      plugins: ["react-native-web"],
    },
  },
};

const imageLoaderConfiguration = {
  test: /\.(gif|jpe?g|png)$/,
  use: {
    loader: "url-loader",
    options: {
      name: "[name].[ext]",
    },
  },
};

module.exports = {
  entry: {
    app: path.join(__dirname, "index.web.js"),
  },
  output: {
    path: path.resolve(appDirectory, "dist"),
    publicPath: "/",
    filename: "rnw_blogpost.bundle.js",
  },
  resolve: {
    extensions: [".web.tsx", ".web.ts", ".tsx", ".ts", ".web.js", ".js"],
    alias: {
      "react-native$": "react-native-web",
    },
  },
  module: {
    rules: [babelLoaderConfiguration, imageLoaderConfiguration],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "index.html"),
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({
      __DEV__: JSON.stringify(true),
    }),
  ],
};

Now Run

npm run web

Then look for the line like Loopback: http://localhost:8080/ in the output and access the web application on the given address.

@infinitebrahmanuniverse/nolb-_fort @everything-registry/sub-chunk-338

1.0.1

2 years ago

1.0.0

2 years ago