External payment links

Want to offer exclusive features or content outside of Canva? While our SDK doesn't support in-app purchases, you're free to direct users to pay through your own site.

Check out the Monetization status design guidelines

Our design guidelines help you create a high-quality app that easily passes app review.

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.

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:

1. Import the getPlatformInfo function from the @canva/platform package:

   import { getPlatformInfo } from "@canva/platform";

   TS

   Copy

2. Call the getPlatformInfo function:

   const info = getPlatformInfo();

   TS

   Copy

   This function returns an object with a canAcceptPayments property:

   console.log(info.canAcceptPayments);

   TS

   Copy

   The property is true if the app is running on a platform that allows linking to payment flows.

3. 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.");
   }

   TS

   Copy

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>
  );
}

When a user uninstalls your app, we recommend automatically canceling any active subscriptions and notifying the user that their billing has stopped. This prevents ghost subscriptions where users continue to be billed for an app they no longer use.

To detect uninstalls, configure an uninstall webhook in the Developer Portal. For setup instructions, see Handle disconnections.

• auth.getCanvaUserToken
• auth.requestAuthentication
• getPlatformInfo
• requestOpenExternalUrl