> ## Documentation Index
> Fetch the complete documentation index at: https://docs.whop.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Accept payments
> Accept one-time and recurring payments across 195 countries with 100+ payment methods
export const ExamplesLink = ({href}) =>
;
Accept one-time and recurring payments using checkout links or an embedded checkout component. Whop supports **100+ payment methods** across **195 countries**, and the right ones appear automatically based on the buyer's location. [See all payment methods](/payments-and-billing/local-payment-methods).
Building an iOS app? The [Whop iOS Checkout SDK](/developer/guides/ios/overview) handles checkout natively with lower fees (2.7% + \$0.30 vs Apple's 15–30%). The SDK uses a scoped `iap:read` API key that's [safe to embed in your app](/developer/guides/ios/installation#step-3-create-an-api-key).
## Choose your integration
| | Checkout link | Embedded checkout |
| ------------------------ | -------------------------- | -------------------------- |
| **Effort** | Low | Medium |
| **Customization** | Limited | Full control |
| **Best for** | Sharing links, quick setup | Custom UX, dynamic pricing |
| **Server code required** | No (Dashboard) / Yes (API) | Yes |
## Option 1: Create a checkout link
Checkout links are the simplest way to accept payments. Create a plan to get a shareable checkout URL.
1. Go to your [Dashboard](https://whop.com/dashboard/links/checkout) > **Checkout links**
2. Click **+ Create checkout link**
3. Select a product and configure your pricing (free, one-time, or recurring)
4. Click **Create checkout link**
The generated link can be shared directly with customers or embedded on your website.
Create a plan via the API to get a `purchase_url`:
```typescript TypeScript theme={null}
import Whop from "@whop/sdk";
const client = new Whop({
apiKey: "Company API Key",
});
// company_id: find in Dashboard > Settings
// access_pass_id: find in Dashboard > Products
const plan = await client.plans.create({
company_id: "biz_xxxxxxxxxxxxx",
access_pass_id: "pass_xxxxxxxxxxxxx",
initial_price: 10.0,
plan_type: "one_time",
});
console.log(plan.purchase_url);
```
```python Python theme={null}
from whop_sdk import Whop
client = Whop(
api_key="Company API Key",
)
# company_id: find in Dashboard > Settings
# access_pass_id: find in Dashboard > Products
plan = client.plans.create(
company_id="biz_xxxxxxxxxxxxx",
access_pass_id="pass_xxxxxxxxxxxxx",
initial_price=10.0,
plan_type="one_time",
)
print(plan.purchase_url)
```
Redirect customers to the `purchase_url` to complete payment on a Whop-hosted checkout page.
## Option 2: Embedded checkout
For a custom checkout experience, use the embedded checkout component with a checkout configuration.
### Step 1: Create a checkout configuration
Create a checkout configuration on your server with an inline plan:
```typescript TypeScript theme={null}
import Whop from "@whop/sdk";
const client = new Whop({
apiKey: "Company API Key",
});
const checkoutConfig = await client.checkoutConfigurations.create({
company_id: "biz_xxxxxxxxxxxxx",
plan: {
initial_price: 10.0,
plan_type: "one_time",
},
metadata: {
order_id: "order_12345",
},
});
console.log(checkoutConfig.id); // ch_xxxxxxxxxxxxx (session ID)
console.log(checkoutConfig.plan?.id); // plan_xxxxxxxxxxxxx (plan ID)
```
```python Python theme={null}
from whop_sdk import Whop
client = Whop(
api_key="Company API Key",
)
checkout_config = client.checkout_configurations.create(
company_id="biz_xxxxxxxxxxxxx",
plan={
"initial_price": 10.0,
"plan_type": "one_time",
},
metadata={
"order_id": "order_12345",
},
)
print(checkout_config.id) # ch_xxxxxxxxxxxxx (session ID)
print(checkout_config.plan.id) # plan_xxxxxxxxxxxxx (plan ID)
```
In this example:
* `company_id` is your company ID
* `plan.initial_price` is the payment amount
* `plan.plan_type` is either `one_time` or `renewal` for subscriptions
* `metadata` stores custom data for your reference
### Step 2: Render the checkout
```tsx theme={null}
import { WhopCheckoutEmbed } from "@whop/checkout/react";
export function Checkout({ sessionId }: { sessionId: string }) {
return (
{
console.log("Payment complete:", paymentId);
}}
/>
);
}
```
Pass the `checkoutConfig.id` from step 1 as the `sessionId` prop.
Add the loader script to your page:
```html theme={null}
```
Then add a checkout element with your plan ID and the `checkoutConfig.id` from step 1:
```html theme={null}
```
The `returnUrl` is required to handle redirects from external payment providers. When redirected, check the `status` query parameter:
* **success**: The payment succeeded. Use the receipt information to render a success page.
* **error**: The payment failed or was canceled. Remount the checkout so your customer can try again.
### Step 3: Customize the checkout
You can customize the checkout appearance and behavior:
| Prop (React) | Attribute (HTML) | Description |
| -------------------------- | --------------------------------------- | -------------------------------------------- |
| `theme` | `data-whop-checkout-theme` | `"light"`, `"dark"`, or `"system"` (default) |
| `hidePrice` | `data-whop-checkout-hide-price` | Hide the price display |
| `themeOptions.accentColor` | `data-whop-checkout-theme-accent-color` | Custom accent color |
For the full list of customization options, see the [Embedded checkout reference](/payments/checkout-embed).
## Handle payment webhooks
Listen for webhooks to fulfill orders on your server. This example uses Next.js on Vercel, but the `whopsdk.webhooks.unwrap` pattern works with any framework:
```typescript theme={null}
import { waitUntil } from "@vercel/functions";
import type { Payment } from "@whop/sdk/resources.js";
import type { NextRequest } from "next/server";
import { whopsdk } from "@/lib/whop-sdk"; // your Whop SDK instance
export async function POST(request: NextRequest): Promise {
const requestBodyText = await request.text();
const headers = Object.fromEntries(request.headers);
const webhookData = whopsdk.webhooks.unwrap(requestBodyText, { headers });
if (webhookData.type === "payment.succeeded") {
waitUntil(handlePaymentSucceeded(webhookData.data));
}
return new Response("OK", { status: 200 });
}
async function handlePaymentSucceeded(payment: Payment) {
console.log("Payment succeeded:", payment.id);
}
```
Other useful webhook events: `membership.went_valid` (access granted), `payment.failed` (payment failed).
## Next steps
Handle payment events in real-time
Save and charge payment methods
Accept payments in your iOS app with lower fees
100+ payment methods across 195 countries