Skip to main content

JS SDK integration to enable payments in your game

JS SDK provide connecting between our frame with game frame on different domains and it allows to show payments window from game client.

It's simple to use and does not require a lot of code changes. This method is prefered for use with 101xp game integration application.

If game architecture can't use this method we can apply other methods for show payments window from game.

Quick start

  1. Include JS SDK script from 101xp server https://scw.mapi.client.cdn.101xp.com/sdk.js into head block in your html file.
  2. Call MAPI.showSelectionPayments()
  3. Enjoy or see detailed documentation below.
<!DOCTYPE html>
<html>
  <head>
    <script
      type="text/javascript"
      src="https://scw.mapi.client.cdn.101xp.com/sdk.js"
    ></script>
  </head>
  <body>
    <button onclick="MAPI.showSelectionPayments()">Payments Test</button>
  </body>
</html>

To use JS SDK with your game you'll need to do:

1.You'll need to create MAPI object in your frame by adding following code before </head> tag

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
      var MAPI = new Object();
      MAPI.callbacks = {
        facebookLikeCallback: function () {
          // code for Like-quest completion
        },
        facebookShareCallback: function () {
          // code for Share-quest completion
        },
        facebookInviteCallback: function (friendsInvited) {
          // In parameters friendsInvited you can get number of friends invited by user
          // code for Invite-quest completion
        },
      };
    </script>
  </head>
  <body></body>
</html>
  1. Include JS SDK script from 101xp server https://scw.mapi.client.cdn.101xp.com/sdk.js into head block in your html file.
<!DOCTYPE html>
<html>
  <head>
    <script
      type="text/javascript"
      src="https://scw.mapi.client.cdn.101xp.com/sdk.js"
    ></script>
  </head>
  <body></body>
</html>
3. Now you can call payments window from parent 101xp frame by using this code
<button onclick="MAPI.showSelectionPayments()">Payments Test</button>
4. (Optional) Now you can call Like-quest window from parent 101xp frame by
using this code
<button onclick="MAPI.showFacebookLikeWindow()">Like-quest Test</button>
5. (Optional) Now you can call Share function and post from parent 101xp frame
by using this code
<button onclick="MAPI.sendFacebookShare()">Share-quest Test</button>
6. (Optional) Now you can call Invite-quest and invite some friends to game from
parent 101xp frame by using this code
<button onclick="MAPI.showFacebookInvites()">Invite-quest Test</button>
Summary of code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <script type="text/javascript">
      var MAPI = new Object();
      MAPI.callbacks = {
        facebookLikeCallback: function () {
          // code for Like-quest completion
        },
        facebookShareCallback: function () {
          // code for Share-quest completion
        },
        facebookInviteCallback: function (friendsInvited) {
          // In parameters friendsInvited you can get number of friends invited by user
          // code for Invite-quest completion
        },
      };
    </script>
    <script
      type="text/javascript"
      src="https://scw.mapi.client.cdn.101xp.com/sdk.js"
    ></script>
  </head>
  <body>
    <button onclick="MAPI.showSelectionPayments()">Payments Test</button>
    <button onclick="MAPI.showFacebookLikeWindow()">Like-quest Test</button>
    <button onclick="MAPI.sendFacebookShare()">Share-quest Test</button>
    <button onclick="MAPI.showFacebookInvites()">Invite-quest Test</button>
  </body>
</html>
warning

If your game iFrame url that authorize user in game will redirect to new url (server url for example) you'll need to pass through 3 parameters to new url: xdm_e, xdm_c, xdm_p.

$redirectUrl = 'game_url';
if(isset($\_GET['xdm_e'], $_GET['xdm_c'], $_GET['xdm_p'])){
    $redirectUrl .= "&xdm_e={$\_GET['xdm_e']}&xdm_c={$_GET['xdm_c']}&xdm_p={$\_GET['xdm_p']}";
}