Accepting payments

How to monetize apps by accepting payments from users.

The Apps SDK doesn't have an API for in-app purchases. Apps, however, can link to external web pages and, on those pages, prompt the user to pay for access to exclusive content and features.

How to accept payments

Step 1: Authenticate the user

For an app to accept payments from a user, it must create a link between the user in Canva and the user in the app's backend. The app can then:

Identify if the user is a paying customer.
Prompt free users with a call-to-action to become paying customers.
Provide paying customers with exclusive content and features.

This is made possible by the Apps SDK authentication mechanisms.

To learn more, see Authenticating users.

Step 2: Check if the app can link to a payment flow

Canva, and therefore Canva Apps, are available on multiple platforms. Some of those platforms, however, only allow payment-related actions that use their own payment mechanisms. This means Canva Apps are sometimes not allowed to display payment links or similar call-to-actions.

To identify if the app is running on a platform that allows linking to payment flows:

Import the getPlatformInfo function from the @canva/platform package:
```
import { getPlatformInfo } from "@canva/platform";
```
ts
Call the getPlatformInfo function:
```
const info = getPlatformInfo();
```
ts
This function returns an object with a canAcceptPayments property:
```
console.log(info.canAcceptPayments);
```
ts
The property is true if the app is running on a platform that allows linking to payment flows.

Use a conditional to check the value of the canAcceptPayments property:

if (info.canAcceptPayments) {
  console.log("The platform allows linking to payment flows!");
} else {
  console.log("The platform doesn't allow linking to payment flows.");
}

Step 3: Show a call-to-action

Based on the value of canAcceptPayments, show the most appropriate call-to-action:

If canAcceptPayments is true, link to a payment flow. You'll need to use the requestOpenExternalUrl method in conjunction with the Button or Link component. To learn more, see External links.
If canAcceptPayments is false, ask the user to open the app in their web browser.

The following code sample demonstrates how to implement this behavior:

import { Alert, Link } from "@canva/app-ui-kit";
import { getPlatformInfo, requestOpenExternalUrl } from "@canva/platform";

const UPGRADE_URL = "https://www.example.com/upgrade";

export function App() {
  return (
    <div>
      <UpgradeLink />
    </div>
  );
}

function UpgradeLink() {
  const info = getPlatformInfo();

  if (info.canAcceptPayments) {
    async function handleClick() {
      await requestOpenExternalUrl({
        url: UPGRADE_URL,
      });
    }

    return (
      <Link href={UPGRADE_URL} requestOpenExternalUrl={handleClick}>
        Upgrade
      </Link>
    );
  }

  return (
    <Alert tone="info">
      Open this app in a web browser to learn how to upgrade.
    </Alert>
  );
}

tsx