In-App Purchases

In-app purchases allow your app to charge users within it. For example, if you are building a game, you can charge users for extra lives, or if you are building a social media app, you can charge users to unlock premium features.

​

How it works

1. You create a Line Item for your in-app purchase, this is scoped to a company
2. You open the checkout modal, passing in the line_item_id
3. The user enters their payment details and completes the purchase
4. The company that has installed your app receives the payment

​

Getting started

In this example, we will be creating an app that allows users to buy T-shirts. Instead of making each T-shirt a separate product on Whop, we will be doing it under one app, and allowing them to purchase it through the app.

We are going to charge $29.99 per T-shirt.

​

1. Prerequisites

• You must have initialized the Whop iFrame SDK. See Initialising the iFrame SDK

​

2. Create a Line Item

To offer in-app purchases, you first need to create a Line Item. These are purchasable entities that you can create / update / delete using the Whop API. It stores the price, name, and currency of your in-app purchase.

This means that you must ensure the line_item_id you are using is scoped to the company you are trying to charge. E.g:

• Your app is installed on biz_1 and biz_2
• Your app must create 2 line items, one for biz_1 and one for biz_2
  • li_1 for biz_1
  • li_2 for biz_2
• Jordan is viewing a product purchased from biz_1
• When creating the in-app purchase, you must use li_1 as the line_item_id, that way the charge is scoped to biz_1
• If you pass in li_2 as the line_item_id, the charge will fail and throw an error

We are going to create a line item for our T-shirt using the Whop SDK:

const lineItem = await WhopAPI.app().POST("/app/line_items", {
  body: {
    allow_multiple_quantity: true,
    amount: 29.99,
    base_currency: "usd",
    company_id: "biz_xxxx",
    description: "The best T-Shirt around!",
    name: "T-Shirt",
  },
});

const lineItemId = lineItem.data?.id;

​

3. Opening the checkout modal

Now that we have created a line item for our T-shirt, we can create and open the checkout modal. This is where the user will enter their payment details and complete the purchase.

To do this, we are going to use the Whop SDK. This component will need to be client-side, as it has to access the browser.

"use client";
import { useCallback } from "react";
import { WhopApp } from "@/lib/iframe";

export default function PurchaseComponent() {
  const handleOpenModal = useCallback(async () => {
    const result = await WhopApp.inAppPurchase({
      line_item_id: "li_xxx",
    });
    console.log(result);
  }, []);

  return (
    <div>
      <button onClick={handleOpenModal}>Click me to open checkout</button>
    </div>
  );
}

​

4. Handling the result

When the user completes the purchase, the modal will close and return a result. This result will contain the session_id and the receipt_id.

type Return = {
  status: "ok",
  data: {
    session_id: string,
    receipt_id: string,
  },
};

The receipt_id is a unique identifier for the purchase. You can use this to verify the purchase on your backend and fetch information about the purchase.

Your app will also receive a webhook when the purchase is complete. See Webhooks for more information.

If the payment is successful, the company will receive the payment. If the app wants to take a cut of the payment, you can do so by using Metered Billing.