Skip to content

Quick Start

Once you have spoken with a PayGears representative and received access to an ampliFi sandbox instance to work with, then follow the instructions below to set up a demo node.js application, install and configure the ampliFi SDK, and start working with the TheM class functionality.

1. In the CLI, navigate to the location where you want to start your node.js application.

cd location/for/project

2. Create a new folder for your project.

mkdir ampliFiSDKGettingStarted

3. Navigate into the folder you created.

cd ampliFiSDKGettingStarted

4. Create a default package.json file.

npm init -y

5. Run the following command to install the ampliFi SDK.

npm install --save github:@PayGearsCorp/amplifi_mobile_sdk

6. Place any additional minified libraries in a new folder /lib. Recommended minified libraries that ampliFi SDK uses include axios.min.js, crypto-js.min.js, lz-string.min.js, moment.min.js, and socket.io.min.js. If axios is included, it will be used by TheM. Otherwise, fetch is used when needed.

7. Open your project in your favorite code editor and create a src folder containing the following file.

a-quick-start.js

import ClassTheM from "../node_modules/@PayGearsCorp/amplifi_mobile_sdk/TheM/them.mjs";

const AMPLIFI_BASE_URL = "PUT_YOUR_INSTANCE_URL_HERE"; //Speak to a PayGears representative to be issued a sandbox instance URL
const AMPLIFI_CORE_URL = `${AMPLIFI_BASE_URL}core/`;

const subClassesToInit = [
];

export const gettingStarted = async (subClasses = "") => {
    TheM = new ClassTheM({
        config: {
            AFiInstanceId: "test",
            modulesFolder: "",
            modulesFolderOnboarding: "",
            webworkerFolder: "../node_modules/@PayGearsCorp/amplifi_mobile_sdk/TheM",
            baseLibURL: "../lib", //The location of the minified libraries you included in your project
            backEndURL: AMPLIFI_CORE_URL,
            socketURL: AMPLIFI_BASE_URL,
            user: {
                DEFAULT_HOMECOUNTRY: "US"
            },
            onboarding: {
                PRESEGMENTS_ALLOWED: {
                    "demo_uoiuqwehflkipahgoqq": "GenericClient"
                }
            }
        },
        libs: {
        }
    });

    await TheM.doInit(subClasses);

};

await gettingStarted(subClassesToInit.join(" "));

8. Create a demo folder containing the following file.

a-quick-start.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />

    <title>ampliFi</title>

    <script>
        var TheM;
    </script>

    <script src="../lib/socket.io.min.js"></script>
    <script src="../lib/lz-string.min.js"></script>
    <script src="../lib/moment.min.js"></script>
    <script src="../lib/axios.min.js"></script>
    <script src="../lib/crypto-js.min.js"></script>
    <script type="module" src="/../src/a-quick-start.js"></script>

    <style>
        html {
            color: white;
            background-color: black;
        }
    </style>
</head>


<body>
    <div>
        Hit F12 to open the browser console.
        Start working with TheM by typing "TheM" into the browser console.
    </div>
    <br /><br />
    <div>
        Try the following commands to subscribe to and create an event called "test_myNewEvent".
        <br /><br />
        <pre><code>TheM.addSubscribers({ //add a listener (subscriber)<br />  name: "test_myNewEvent", //"test_" is the default LOCAL_STORAGE_TAG_PREFIX. This can be customized using config.LOCAL_STORAGE_TAG_PREFIX when initializing TheM.<br />  fn: (givenEventName, payload) => { <br />    if (givenEventName === "test_myNewEvent" ) {<br />    console.log(`This is the payload: ${JSON.stringify(payload)}`);<br />    }<br />  }<br />}); 
        </code></pre>
        <pre><code>TheM.callSubscribers("test_myNewEvent", {key1: "value1", key2: "value2"}) //call the listener (subscriber).
        </code></pre>
    </div>
    <ng-view />
</body>

</html>

9. Start a server in the root folder of your project.

py -m http.server 8000

10. Open a browser and enter the following URL: http://localhost:8000/demo/

11. Click on the link for "a-quick-start.html" and follow the instructions to listen for and create a custom event.