Subscriptions

​

Setup your access pass on the dashboard.

1. Go to the your app’s dashboard.
2. Select the access passes tab and create an access pass. Give it a name like “My App Premium”
3. Create a pricing plan for the access pass by clicking the “Add Pricing” button from the table row.
4. After creating the pricing plan, copy the plan id from the 3 dot menu in the pricing plan card.
5. Also copy the access pass id from the 3 dot menu in the access pass table row.

NEXT_PUBLIC_PREMIUM_ACCESS_PASS_ID="prod_XXXXXXXX"
NEXT_PUBLIC_PREMIUM_PLAN_ID="plan_XXXXXXXX"

​

Check if users have access

When a user makes a request to your app, you can easily check if they have access using the whop api.

const hasAccess = await whopApi.checkIfUserHasAccessToAccessPass({
  accessPassId: process.env.NEXT_PUBLIC_PREMIUM_ACCESS_PASS_ID, // from step 5 above.
  userId: userId,
});

If a user does not have access, you can prompt them to purchase or show a lite “free” version of the app to upsell them.

​

Collect payment from users

Use the iframe sdk to collect payment from users. This will show a whop native payment modal in which the user can confirm their purchase.

"use client";
import { useIframeSdk } from "@whop/react";

export default function GetAccessButton() {
  const iframeSdk = useIframeSdk();
  
  const [receiptId, setReceiptId] = useState<string>();
  const [error, setError] = useState<string>();
  
  async function handlePurchase() {
    try {
		const res = await iframeSdk.inAppPurchase({ planId: process.env.NEXT_PUBLIC_PREMIUM_PLAN_ID });
		
		if (res.status === "ok") {
			setReceiptId(res.data.receipt_id);
			setError(undefined);
		} else {
			setReceiptId(undefined);
			setError(res.error);
		}
    } catch (error) {
      console.error("Purchase failed:", error);
      setError("Purchase failed");
    }
  }
  
  return <button onClick={handlePurchase}>Get Access</button>;
}