In-app purchases

Microsoft Teams provides APIs that you can use to implement the in-app purchases to upgrade from free to paid Teams apps. In-app purchase allows you to convert users from free to paid plans directly from your app.

In-app purchases allow users to purchase a new paid subscription and it doesn't enable the users to purchase additional or different licenses with existing paid subscriptions. To switch between plans, an existing user subscription must be canceled before a new subscription can be purchased through in-app purchases.

Note

In-app purchases is supported only in personal app contexts.

Implement in-app purchases

To offer an in-app purchase experience to the users of your app, ensure the following:

• App is built with Microsoft Teams JavaScript client library (TeamsJS).

• App is enabled with a transactable SaaS offer.

• App is enabled with RSC permissions.

• App is invoked with openPurchaseExperience API.

In-app purchase experience can be enabled either by updating manifest.json file or by enabling Show in-app purchase offers from Permissions section of your Developer Portal.

Update manifest

To enable in-app purchase experience, update your Teams app manifest.json file by adding the RSC permissions. It allows your app users to upgrade to a paid version of your app and start using new functionalities. The update for app manifest is as follows:

"authorization": {
    "permissions": {
        "resourceSpecific": [
            {
                "name": "InAppPurchase.Allow.User",
                "type": "Delegated"
            }
        ]
    }
}

Purchase Experience API

To trigger in-app purchase for the app, invoke the openPurchaseExperience API from your web app.

Following code snippet is an example of calling the API from the Teams app built using Microsoft Teams JavaScript client library:

TeamsJS v1

<div> 
<div class="sectionTitle">openPurchaseExperience</div>
<button onclick="openPurchaseExperience()">openPurchaseExperience</button>
</div>
</body>
<script>
   function openPurchaseExperience()
      microsoftTeams.initialize();
      let callbackcalled = false;
      microsoftTeams.monetization.openPurchaseExperience((e) => {
            console.log("callback is being called");
            console.log(e);
            if (!!e && typeof e !== "string") {
                  alert(JSON.stringify(e));
              }
              return;
            });
      console.log("after callback: ",callbackcalled);
    }
</script>

TeamsJS V2

<div>
<div class="sectionTitle">openPurchaseExperience</div>
<button onclick="openPurchaseExperience()">openPurchaseExperience</button>
</div>
</body>
<script>
    function openPurchaseExperience() {
      micorosftTeams.app.initialize();
      var planInfo = {
          planId: "<Plan id>", // Plan Id of the published SAAS Offer
          term: "<Plan Term>" // Term of the plan.
      }
      monetization.openPurchaseExperience(planInfo);
    }
</script>

Next step

Test preview for monetized apps