In-app Purchase Flow For The Monetization Of Apps - Teams

In-app purchases are upgrade options where users can upgrade from free to paid plans within your app. Microsoft Teams provides APIs to implement in-app purchases. The in-app purchase option is applicable only if the app is enabled with a transactable SaaS offer.

Users can buy new paid subscriptions through in-app purchases. However, they can't purchase additional or different licenses with existing paid subscriptions. To change plans, users must first cancel their current subscription before acquiring a new plan through in-app purchase.

Note

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

Implement in-app purchases

To facilitate an in-app purchase experience for your app users, ensure the following prerequisites are met:

• The app is built using Microsoft Teams JavaScript client library (TeamsJS).

• The app is enabled with a transactable SaaS offer.

• The app is enabled with RSC permissions.

• The app is invoked with openPurchaseExperience API.

Activate in-app purchase

You can activate the in-app purchase experience through one of the following ways:

Update from Developer Portal

1. In Teams Developer Portal, go to Permissions.
2. Enable Show in-app purchase offers.

Update manifest

To enable the 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 access new features. Update the app manifest as given in the following code snippet:

"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. The following code snippet is an example of calling the API from the Teams app built using TeamsJS:

• TeamsJS V2
• TeamsJS v1

<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> <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>

See also

• Monetize your app
• App manifest