atrium-connect-demo/atrium.html at main · mxenabled/atrium-connect-demo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html>

<head>
  <title>Atrium Demo</title>
  <style type="text/css">
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    }
  </style>
  <!-- Source the connect.js file, this gives access to MXConnect constructor on window -->
  <script type="text/javascript" src="https://atrium.mx.com/connect.js"></script>
</head>

<body>
  <!-- Simple input to put your connect widget URL. -->
  <input id="connecturl" type="text" />
  <button id="openConnect">Open Connect</button>
  <button id="closeConnect">Close Connect</button>
  <div id="widget"></div>

  <script type="text/javascript">
    var openButton = document.getElementById('openConnect')
    var closeButton = document.getElementById('closeConnect')

    // Create an instance of MXConnect.
    // Used for setting up any configuration options and registering callbacks.
    var mxConnect = new window.MXConnect({
      id: "widget",
      iframeTitle: 'Connect',
      /**
       * Callback that for handling all events withhin connect.
       * Only called in  ui_message_version 4 or higher
       *
       * The events called here are the same events that come through post
       * messages.
       *
       * Details about the events:
       * https://atrium.mx.com/docs#connect-events
       */
      onEvent: function (type, payload) {
        console.log("onEvent", type, payload);
      },
      /**
       * *Deprecated*. Called when the connect widget is mounted in the DOM.
       * Only called if the `ui_message_version` is below `4` or not set all.
       */
      onLoad: function (event) {
        console.log("onLoad", event);
      },
      /**
       * *Deprecated*. Called when a member is successfully 'CONNECTED'.
       * Only called if the `ui_message_version` is below `4` or not set all.
       */
      onSuccess: function (event) {
        console.log("onSuccess", event);
      },
      /**
       * Any configuration options documented can be configured here:
       * https://atrium.mx.com/docs#configuration
       *
       * These values will override any configuration values that were set when
       * the URL was requested.
       */
      // config: {},
      targetOrigin: "*",
    })


    /**
     * When we click the open button, get the URL in the input field and load.
     *
     * A 'real' integration would need to get a URL from atrium.
     * See the docs for details: https://atrium.mx.com/docs#get-a-url
     */
    openButton.addEventListener('click', function() {
      var connectURLInput = document.getElementById('connecturl')
      var connectURL = connectURLInput.value

      mxConnect.load(connectURL);

      connectURLInput.value = ''
    })

    // Clear the widget on close click
    closeButton.addEventListener('click', function() {
      var connectIFrame = document.querySelector('iframe[title="Connect"]')

      connectIFrame.remove()
    })

    /**
     * Listen for post messages. You don't need to listen for post messages
     * if using the `onEvent` callback and `ui_message_version` 4 or higher.
     */
    window.addEventListener('message', function (event) {
      try {
        /**
         * Versions null -> 3. These versions are deprecated. They JSON encode
         * the `data` attribute so you must wrap in this in a try catch to try
         * to get the data.
         */
        const data = JSON.parse(event.data);

        if (data.moneyDesktop) {
          console.log('versions null -> 3', data);
        }
      } catch (error) {
        /**
         * Versions 4 and on no longer JSON encode the data attribute. It should
         * be immediately accessible. If there is a data.mx attribute that is
         * `true` then this is a version 4 message at this point.
         */
        if (event.data.mx) {
          console.log('version 4 message', event.data);
        }
      }
    });
  </script>
</body>

</html>