Topic Details
https://whop.com/blog/rss/
Last item retrieved
<item><title><![CDATA[How to use the Whop Rest API to accept payments]]></title><description><![CDATA[The Whop API lets you create checkout links, embed payments on your site, charge customers off-session, and more. Here's how to get started.]]></description><link>https://whop.com/blog/how-to-use-the-whop-api/</link><guid isPermaLink="false">695e26014418d10001d1d904</guid><category><![CDATA[Payments]]></category><dc:creator><![CDATA[Doğukan Karakaş]]></dc:creator><pubDate>Fri, 09 Jan 2026 16:45:57 GMT</pubDate><media:content url="https://whop.com/blog/content/images/2026/01/WhopAPI.gif" medium="image"/><content:encoded><![CDATA[<img src="https://whop.com/blog/content/images/2026/01/WhopAPI.gif" alt="How to use the Whop Rest API to accept payments"><p>Whop API can be used to programmatically accept payments, issue refunds, handle disputes, create invoices, and send payouts.</p><p>The API system handles the entire payment lifecycle of your business, whether you’re running your business on Whop or using it as a payments service.</p><p>In this guide, I'm going to walk you through how to get your API keys, create checkout links, embed checkouts on your website, save payment methods, and charge customers off-session using the Whop API.</p><h2 id="getting-started-with-the-whop-api">Getting started with the Whop API</h2><p>Getting started with the Whop API is easy, but just in case, let’s go over some basics:</p><ul><li><strong>What is an API?</strong> An API is the courier between you or your codebase and the server, which is Whop in this case. You tell the courier (API) what you want (like the details of a plan on your whop), it goes to the server and retrieves the data, and brings it back to you.</li><li><strong>What does "programmatically" mean?</strong> It means using code to complete actions instead of going on <a href="https://whop.com" rel="noreferrer"><u>Whop.com</u></a>, clicking buttons, and manually checking everything.</li></ul><p>Using the Whop API makes it easy for developers and sellers to automate everything, customize the payment lifecycle of their business, and integrate the Whop payments into their existing systems.</p><figure class="kg-card kg-image-card"><a href="https://whop.com/blog/content/images/2026/01/APIVisual.webp"><img src="https://whop.com/blog/content/images/2026/01/APIVisual.webp" class="kg-image" alt="How to use the Whop Rest API to accept payments" loading="lazy" width="2000" height="495" srcset="https://whop.com/blog/content/images/size/w600/2026/01/APIVisual.webp 600w, https://whop.com/blog/content/images/size/w1000/2026/01/APIVisual.webp 1000w, https://whop.com/blog/content/images/size/w1600/2026/01/APIVisual.webp 1600w, https://whop.com/blog/content/images/2026/01/APIVisual.webp 2212w" sizes="(min-width: 720px) 720px"></a></figure><p>Here are some key things you need to know before using the Whop API:</p><ul><li>The base URL of the Whop API is <a href="https://api.whop.com/api/v1"><u>https://api.whop.com/api/v1</u></a>. This is where you’ll send your API calls.</li><li>There are three Whop SDKs (software development kits) you can use: JavaScript/TypeScript (can be installed via <code>npm install @whop/sdk</code>), Python (via <code>pip install whop-sdk</code>), and Ruby (via <code>gem install whop_sdk</code>). They help you make API calls programmatically.</li><li>There are two types of API keys you're going to use: Company API key for accessing company data, and an app API key for accessing data across all the companies that use your Whop apps.</li></ul><figure class="kg-card kg-image-card"><a href="https://whop.com/blog/content/images/2026/01/WhopSDKs.webp"><img src="https://whop.com/blog/content/images/2026/01/WhopSDKs.webp" class="kg-image" alt="How to use the Whop Rest API to accept payments" loading="lazy" width="2000" height="661" srcset="https://whop.com/blog/content/images/size/w600/2026/01/WhopSDKs.webp 600w, https://whop.com/blog/content/images/size/w1000/2026/01/WhopSDKs.webp 1000w, https://whop.com/blog/content/images/size/w1600/2026/01/WhopSDKs.webp 1600w, https://whop.com/blog/content/images/size/w2400/2026/01/WhopSDKs.webp 2400w" sizes="(min-width: 720px) 720px"></a></figure><p>Before making API calls, get your company API key:</p><ol><li>Go to the <em>Developer</em> section of your Whop dashboard</li><li>Find the <em>Company API keys</em> section at the top of your screen</li><li>Click the <strong>Create</strong> button at the top right and customize its settings</li><li>Click <strong>Create</strong> at the bottom right of the popup</li></ol><p>Here, you’ll see all the details about the API key you’ll work with. You can customize its name, manage its permissions, and reset the key, and copy it to your clipboard.</p><p>You can use your company API key to make API calls regarding your company, like getting the details of a checkout link or plans.</p><figure class="kg-card kg-video-card kg-width-regular" data-kg-thumbnail="https://whop.com/blog/content/media/2026/01/CreatingAnAPIKey_thumb.jpg" data-kg-custom-thumbnail>
<div class="kg-video-container">
<video src="https://whop.com/blog/content/media/2026/01/CreatingAnAPIKey.mp4" poster="https://img.spacergif.org/v1/1920x1080/0a/spacer.png" width="1920" height="1080" loop autoplay muted playsinline preload="metadata" style="background: transparent url('https://whop.com/blog/content/media/2026/01/CreatingAnAPIKey_thumb.jpg') 50% 50% / cover no-repeat;"></video>
<div class="kg-video-overlay">
<button class="kg-video-large-play-icon" aria-label="Play video">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
<path d="M23.14 10.608 2.253.164A1.559 1.559 0 0 0 0 1.557v20.887a1.558 1.558 0 0 0 2.253 1.392L23.14 13.393a1.557 1.557 0 0 0 0-2.785Z"/>
</svg>
</button>
</div>
<div class="kg-video-player-container kg-video-hide">
<div class="kg-video-player">
<button class="kg-video-play-icon" aria-label="Play video">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
<path d="M23.14 10.608 2.253.164A1.559 1.559 0 0 0 0 1.557v20.887a1.558 1.558 0 0 0 2.253 1.392L23.14 13.393a1.557 1.557 0 0 0 0-2.785Z"/>
</svg>
</button>
<button class="kg-video-pause-icon kg-video-hide" aria-label="Pause video">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
<rect x="3" y="1" width="7" height="22" rx="1.5" ry="1.5"/>
<rect x="14" y="1" width="7" height="22" rx="1.5" ry="1.5"/>
</svg>
</button>
<span class="kg-video-current-time">0:00</span>
<div class="kg-video-time">
/<span class="kg-video-duration">0:23</span>
</div>
<input type="range" class="kg-video-seek-slider" max="100" value="0">
<button class="kg-video-playback-rate" aria-label="Adjust playback speed">1×</button>
<button class="kg-video-unmute-icon" aria-label="Unmute">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
<path d="M15.189 2.021a9.728 9.728 0 0 0-7.924 4.85.249.249 0 0 1-.221.133H5.25a3 3 0 0 0-3 3v2a3 3 0 0 0 3 3h1.794a.249.249 0 0 1 .221.133 9.73 9.73 0 0 0 7.924 4.85h.06a1 1 0 0 0 1-1V3.02a1 1 0 0 0-1.06-.998Z"/>
</svg>
</button>
<button class="kg-video-mute-icon kg-video-hide" aria-label="Mute">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
<path d="M16.177 4.3a.248.248 0 0 0 .073-.176v-1.1a1 1 0 0 0-1.061-1 9.728 9.728 0 0 0-7.924 4.85.249.249 0 0 1-.221.133H5.25a3 3 0 0 0-3 3v2a3 3 0 0 0 3 3h.114a.251.251 0 0 0 .177-.073ZM23.707 1.706A1 1 0 0 0 22.293.292l-22 22a1 1 0 0 0 0 1.414l.009.009a1 1 0 0 0 1.405-.009l6.63-6.631A.251.251 0 0 1 8.515 17a.245.245 0 0 1 .177.075 10.081 10.081 0 0 0 6.5 2.92 1 1 0 0 0 1.061-1V9.266a.247.247 0 0 1 .073-.176Z"/>
</svg>
</button>
<input type="range" class="kg-video-volume-slider" max="100" value="100">
</div>
</div>
</div>
</figure><p>As a rule of thumb, you should <strong>never</strong> store your API keys in places where other people can access them. The best practice is to always store them in an environment file or table - never hard-code them (writing the key directly in your code) into your codebase.</p><p>Now that you have your API key, let’s give it a try to see if it's fine. First, make a cURL (a command line tool for making HTTP requests) call to get payment options and their user information. You can make the cURL call in any command line you have, whether it’s the macOS terminal or PowerShell on Windows. After pasting the code below into your terminal or command line, you’re going to have to replace two things:</p><ul><li>The <code>YOUR_BIZ_ID</code> part with your company ID - go to the Whop dashboard, make sure you’re viewing the right company using the selector at the top left, and copy the part of the URL starting with <code>biz_</code></li><li>The <code>YOUR_COMPANY_API_KEY</code> part with your company API key you got earlier</li></ul>
<!--kg-card-begin: html-->
<div class="custom-code-container">
<div class="code-header">
<span class="language-label">Bash</span>
<button class="copy-btn" onclick="copyToClipboard(this)">Copy</button>
</div>
<pre class="code-content"><span class="kwd">curl</span> https://api.whop.com/api/v1/payments?company_id=YOUR_BIZ_ID \
-H <span class="str">"Authorization: Bearer YOUR_COMPANY_API_KEY"</span></pre>
</div>
<!--kg-card-end: html-->
<p>If you see a long JSON response that details your plans, their users, and other information, all your keys are correct and you’re good to go. </p><figure class="kg-card kg-image-card"><a href="https://whop.com/blog/content/images/2026/01/WhopcURLonTerminal-1.webp"><img src="https://whop.com/blog/content/images/2026/01/WhopcURLonTerminal-1.webp" class="kg-image" alt="How to use the Whop Rest API to accept payments" loading="lazy" width="2000" height="836" srcset="https://whop.com/blog/content/images/size/w600/2026/01/WhopcURLonTerminal-1.webp 600w, https://whop.com/blog/content/images/size/w1000/2026/01/WhopcURLonTerminal-1.webp 1000w, https://whop.com/blog/content/images/size/w1600/2026/01/WhopcURLonTerminal-1.webp 1600w, https://whop.com/blog/content/images/2026/01/WhopcURLonTerminal-1.webp 2228w" sizes="(min-width: 720px) 720px"></a></figure><p>If you see a response with the message “Authentication failed,” however, you should double check your business ID and your company API key.</p><p>If you'd rather skip the terminal or command line, you can test the API directly using the API Explorer in the Whop documentation. Go to any API Reference page in the docs and click the "Try it" button to open an interactive testing ground for that endpoint.</p><p>cURL is useful for testing, but SDKs make it easier to integrate Whop into your codebase. To get the same result, but using JavaScript/TypeScript, you can use the snippet below after changing the placeholders <code>WHOP_API_KEY</code>, <code>app_xxxxxxxxxxxxxx</code>, and <code>biz_xxxxxxxxxxxxxx</code>:</p>
<!--kg-card-begin: html-->
<div class="custom-code-container">
<div class="code-header">
<span class="language-label">JavaScript</span>
<button class="copy-btn" onclick="copyToClipboard(this)">Copy</button>
</div>
<pre class="code-content"><span class="kwd">import</span> Whop <span class="kwd">from</span> <span class="str">"@whop/sdk"</span>;
<span class="kwd">const</span> client = <span class="kwd">new</span> <span class="func">Whop</span>({
<span class="prop">apiKey</span>: process.env[<span class="str">"WHOP_API_KEY"</span>], <span class="com">// This is the default</span>
<span class="prop">appID</span>: <span class="str">"app_xxxxxxxxxxxxxx"</span>, <span class="com">// Only required when building an app</span>
});
<span class="kwd">const</span> page = <span class="kwd">await</span> client.payments.<span class="func">list</span>({ <span class="prop">company_id</span>: <span class="str">"biz_xxxxxxxxxxxxxx"</span> });
<span class="kwd">const</span> paymentListResponse = page.data[<span class="num">0</span>];
console.log(paymentListResponse.id);</pre>
</div>
<!--kg-card-end: html-->
<p>One thing you should keep in mind is that while the example above hard-codes the API key, it’s just for test purposes. You should always use secure environment tables and files to store and reference to your API keys.</p><p>If you want to see more examples of SDK initialization (like Python and Ruby), check out the <a href="https://docs.whop.com/developer/api/getting-started"><u>Getting started page of our developer documentation</u></a>.</p><h2 id="accepting-payments-using-the-whop-api">Accepting payments using the Whop API</h2><p>There are two main ways to accept payments using the Whop API:</p><ul><li><strong>Checkout links -</strong> create plans and share the URL of the plan with your customers</li><li><strong>Embedded checkouts -</strong> create checkout boxes in your website and let customers complete purchases from your site</li></ul><figure class="kg-card kg-image-card"><a href="https://whop.com/blog/content/images/2026/01/CheckoutLinkvsEmbed.webp"><img src="https://whop.com/blog/content/images/2026/01/CheckoutLinkvsEmbed.webp" class="kg-image" alt="How to use the Whop Rest API to accept payments" loading="lazy" width="2000" height="858" srcset="https://whop.com/blog/content/images/size/w600/2026/01/CheckoutLinkvsEmbed.webp 600w, https://whop.com/blog/content/images/size/w1000/2026/01/CheckoutLinkvsEmbed.webp 1000w, https://whop.com/blog/content/images/size/w1600/2026/01/CheckoutLinkvsEmbed.webp 1600w, https://whop.com/blog/content/images/size/w2400/2026/01/CheckoutLinkvsEmbed.webp 2400w" sizes="(min-width: 720px) 720px"></a></figure><h3 id="creating-and-using-checkout-links">Creating and using checkout links</h3><p><a href="https://whop.com/blog/create-checkout-links-whop/" rel="noreferrer">Checkout links</a> are URLs that display payment pages. When you send a customer your checkout link, instead of going through a marketplace page (like Discover), the user directly sees a checkout page.</p><p>To create a new checkout link, you can use the create method and pass in some customizable details for your checkout link. The <code>company_id</code> and <code>product_id</code> fields are required so that the API knows which company and its product to create the checkout link for.</p><p>As I mentioned before, you can get your company ID by going into your dashboard and copying the part of the URL starting with <code>biz_</code>. To get the product ID, follow the steps:</p><ol><li>Go to the Products section of the Whop Dashboard</li><li>Click on the context menu button (three-dot button on the right-side of the product)</li><li>Hover over the Details button. This will display the ID of the product</li><li>Click on the product ID to copy it to your clipboard</li></ol><figure class="kg-card kg-video-card kg-width-regular" data-kg-thumbnail="https://whop.com/blog/content/media/2026/01/CopyProductID_thumb.jpg" data-kg-custom-thumbnail>
<div class="kg-video-container">
<video src="https://whop.com/blog/content/media/2026/01/CopyProductID.mp4" poster="https://img.spacergif.org/v1/1920x1080/0a/spacer.png" width="1920" height="1080" loop autoplay muted playsinline preload="metadata" style="background: transparent url('https://whop.com/blog/content/media/2026/01/CopyProductID_thumb.jpg') 50% 50% / cover no-repeat;"></video>
<div class="kg-video-overlay">
<button class="kg-video-large-play-icon" aria-label="Play video">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
<path d="M23.14 10.608 2.253.164A1.559 1.559 0 0 0 0 1.557v20.887a1.558 1.558 0 0 0 2.253 1.392L23.14 13.393a1.557 1.557 0 0 0 0-2.785Z"/>
</svg>
</button>
</div>
<div class="kg-video-player-container kg-video-hide">
<div class="kg-video-player">
<button class="kg-video-play-icon" aria-label="Play video">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
<path d="M23.14 10.608 2.253.164A1.559 1.559 0 0 0 0 1.557v20.887a1.558 1.558 0 0 0 2.253 1.392L23.14 13.393a1.557 1.557 0 0 0 0-2.785Z"/>
</svg>
</button>
<button class="kg-video-pause-icon kg-video-hide" aria-label="Pause video">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
<rect x="3" y="1" width="7" height="22" rx="1.5" ry="1.5"/>
<rect x="14" y="1" width="7" height="22" rx="1.5" ry="1.5"/>
</svg>
</button>
<span class="kg-video-current-time">0:00</span>
<div class="kg-video-time">
/<span class="kg-video-duration">0:10</span>
</div>
<input type="range" class="kg-video-seek-slider" max="100" value="0">
<button class="kg-video-playback-rate" aria-label="Adjust playback speed">1×</button>
<button class="kg-video-unmute-icon" aria-label="Unmute">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
<path d="M15.189 2.021a9.728 9.728 0 0 0-7.924 4.85.249.249 0 0 1-.221.133H5.25a3 3 0 0 0-3 3v2a3 3 0 0 0 3 3h1.794a.249.249 0 0 1 .221.133 9.73 9.73 0 0 0 7.924 4.85h.06a1 1 0 0 0 1-1V3.02a1 1 0 0 0-1.06-.998Z"/>
</svg>
</button>
<button class="kg-video-mute-icon kg-video-hide" aria-label="Mute">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
<path d="M16.177 4.3a.248.248 0 0 0 .073-.176v-1.1a1 1 0 0 0-1.061-1 9.728 9.728 0 0 0-7.924 4.85.249.249 0 0 1-.221.133H5.25a3 3 0 0 0-3 3v2a3 3 0 0 0 3 3h.114a.251.251 0 0 0 .177-.073ZM23.707 1.706A1 1 0 0 0 22.293.292l-22 22a1 1 0 0 0 0 1.414l.009.009a1 1 0 0 0 1.405-.009l6.63-6.631A.251.251 0 0 1 8.515 17a.245.245 0 0 1 .177.075 10.081 10.081 0 0 0 6.5 2.92 1 1 0 0 0 1.061-1V9.266a.247.247 0 0 1 .073-.176Z"/>
</svg>
</button>
<input type="range" class="kg-video-volume-slider" max="100" value="100">
</div>
</div>
</div>
</figure><p>Now that you have the essentials, here's the code snippet you can use to create a checkout link via the API (keep an eye out for the comments in the snippet starting with <code>//</code>):</p>
<!--kg-card-begin: html-->
<div class="custom-code-container">
<div class="code-header">
<span class="language-label">JavaScript</span>
<button class="copy-btn" onclick="copyToClipboard(this)">Copy</button>
</div>
<pre class="code-content"><span class="kwd">import</span> Whop <span class="kwd">from</span> <span class="str">'@whop/sdk'</span>;
<span class="kwd">const</span> client = <span class="kwd">new</span> <span class="func">Whop</span>({
<span class="prop">apiKey</span>: process.env[<span class="str">'WHOP_API_KEY'</span>], <span class="com">// Replace with your company API key</span>
});
<span class="kwd">const</span> plan = <span class="kwd">await</span> client.plans.<span class="func">create</span>({
<span class="prop">company_id</span>: <span class="str">'biz_xxxxxxxxxxxxxx'</span>, <span class="com">// Replace with your business ID</span>
<span class="prop">product_id</span>: <span class="str">'prod_xxxxxxxxxxxxx'</span>, <span class="com">// Replace with your product ID</span>
<span class="prop">plan_type</span>: <span class="str">'renewal'</span>, <span class="com">// Options: renewal, one_time</span>
<span class="prop">currency</span>: <span class="str">'usd'</span>, <span class="com">// Replace with the currency you want to use</span>
});
console.log(plan.id);</pre>
</div>
<!--kg-card-end: html-->
<p>The response you’ll get from running this code will include the <code>purchase_url</code> data, which is the checkout link. There are many more parameters you can include in your request like <code>billing_period</code>, <code>description</code>, <code>image</code>, and <code>stock</code>. To see all available parameters and a list of the response lines you’re going to get, check out the <a href="https://docs.whop.com/api-reference/plans/create-plan"><u>Create plan page of our developer documentation</u></a>.</p><p>Another way of getting checkout URLs is using the <a href="https://docs.whop.com/api-reference/checkout-configurations/create-checkout-configuration"><u>Create checkout configuration </u></a>action via the API. Unlike the Create plan action, which requires you to get a product ID, the Create checkout configuration action can create its own plans on the fly and supports more customization like metadata campaigns and order IDs.</p><h2 id="creating-embedded-checkouts">Creating embedded checkouts</h2><p>If you’re sending checkout links to your customers via emails or other systems, checkout links are enough for you. However, if you have a website and want to directly embed a Whop checkout into it, you should create an embedded checkout.</p><p>Lowering the number of clicks is essential for conversion and with embedded checkouts, your customers never leave your website. The best part? They’re easy to create.</p><p>The two main ways of embedding a Whop checkout into your webpages are using React components or a basic <code><script></code> tag. No matter which option you prefer, you’re going to need a plan ID.</p><p>You can get a plan ID by following these steps:</p><ol><li>Go to the Checkout links section of the Whop Dashboard</li><li>Click on the context menu button (three-dot button on the right-side of the checkout link)</li><li>Hover over the Details button. This will display the plan ID of the checkout link</li><li>Click on the plan ID to copy it to your clipboard</li></ol><figure class="kg-card kg-video-card kg-width-regular" data-kg-thumbnail="https://whop.com/blog/content/media/2026/01/CopyPlanID_thumb.jpg" data-kg-custom-thumbnail>
<div class="kg-video-container">
<video src="https://whop.com/blog/content/media/2026/01/CopyPlanID.mp4" poster="https://img.spacergif.org/v1/1920x1080/0a/spacer.png" width="1920" height="1080" loop autoplay muted playsinline preload="metadata" style="background: transparent url('https://whop.com/blog/content/media/2026/01/CopyPlanID_thumb.jpg') 50% 50% / cover no-repeat;"></video>
<div class="kg-video-overlay">
<button class="kg-video-large-play-icon" aria-label="Play video">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
<path d="M23.14 10.608 2.253.164A1.559 1.559 0 0 0 0 1.557v20.887a1.558 1.558 0 0 0 2.253 1.392L23.14 13.393a1.557 1.557 0 0 0 0-2.785Z"/>
</svg>
</button>
</div>
<div class="kg-video-player-container kg-video-hide">
<div class="kg-video-player">
<button class="kg-video-play-icon" aria-label="Play video">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
<path d="M23.14 10.608 2.253.164A1.559 1.559 0 0 0 0 1.557v20.887a1.558 1.558 0 0 0 2.253 1.392L23.14 13.393a1.557 1.557 0 0 0 0-2.785Z"/>
</svg>
</button>
<button class="kg-video-pause-icon kg-video-hide" aria-label="Pause video">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
<rect x="3" y="1" width="7" height="22" rx="1.5" ry="1.5"/>
<rect x="14" y="1" width="7" height="22" rx="1.5" ry="1.5"/>
</svg>
</button>
<span class="kg-video-current-time">0:00</span>
<div class="kg-video-time">
/<span class="kg-video-duration">0:09</span>
</div>
<input type="range" class="kg-video-seek-slider" max="100" value="0">
<button class="kg-video-playback-rate" aria-label="Adjust playback speed">1×</button>
<button class="kg-video-unmute-icon" aria-label="Unmute">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
<path d="M15.189 2.021a9.728 9.728 0 0 0-7.924 4.85.249.249 0 0 1-.221.133H5.25a3 3 0 0 0-3 3v2a3 3 0 0 0 3 3h1.794a.249.249 0 0 1 .221.133 9.73 9.73 0 0 0 7.924 4.85h.06a1 1 0 0 0 1-1V3.02a1 1 0 0 0-1.06-.998Z"/>
</svg>
</button>
<button class="kg-video-mute-icon kg-video-hide" aria-label="Mute">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
<path d="M16.177 4.3a.248.248 0 0 0 .073-.176v-1.1a1 1 0 0 0-1.061-1 9.728 9.728 0 0 0-7.924 4.85.249.249 0 0 1-.221.133H5.25a3 3 0 0 0-3 3v2a3 3 0 0 0 3 3h.114a.251.251 0 0 0 .177-.073ZM23.707 1.706A1 1 0 0 0 22.293.292l-22 22a1 1 0 0 0 0 1.414l.009.009a1 1 0 0 0 1.405-.009l6.63-6.631A.251.251 0 0 1 8.515 17a.245.245 0 0 1 .177.075 10.081 10.081 0 0 0 6.5 2.92 1 1 0 0 0 1.061-1V9.266a.247.247 0 0 1 .073-.176Z"/>
</svg>
</button>
<input type="range" class="kg-video-volume-slider" max="100" value="100">
</div>
</div>
</div>
</figure><h3 id="embedded-checkouts-in-react-setups">Embedded checkouts in React setups</h3><p>Now that you have the plan ID, here's how to create an embedded checkout in your React setups. First, download Whop’s checkout package using the following npm command - this allows you to easily create checkout embeds with an iframe:</p>
<!--kg-card-begin: html-->
<div class="custom-code-container">
<div class="code-header">
<span class="language-label">Shell</span>
<button class="copy-btn" onclick="copyToClipboard(this)">Copy</button>
</div>
<pre class="code-content">npm install @whop/checkout</pre>
</div>
<!--kg-card-end: html-->
<p>After installing the package, you can move on to adding the iframe to your setup. First, in your React project, import the checkout element by adding the line below at the top of your file:</p>
<!--kg-card-begin: html-->
<div class="custom-code-container">
<div class="code-header">
<span class="language-label">JavaScript</span>
<button class="copy-btn" onclick="copyToClipboard(this)">Copy</button>
</div>
<pre class="code-content"><span class="kwd">import</span> { WhopCheckoutEmbed } <span class="kwd">from</span> <span class="str">"@whop/checkout/react"</span>;</pre>
</div>
<!--kg-card-end: html-->
<p>Then, add the iframe anywhere on the website you want, like the code snippet below. After pasting, make sure to customize the <code>planId</code> and <code>returnUrl</code> parameters:</p><ul><li>Replace the <code>plan_XXXXXXXXX</code> part with the plan ID you got in the previous steps.</li><li>Replace the <a href="https://yoursite.com/checkout/complete"><u>https://yoursite.com/checkout/complete</u></a> URL with the URL you want to redirect your customers after they complete their purchase</li></ul>
<!--kg-card-begin: html-->
<div class="custom-code-container">
<div class="code-header">
<span class="language-label">React</span>
<button class="copy-btn" onclick="copyToClipboard(this)">Copy</button>
</div>
<pre class="code-content"><span class="kwd">export</span> <span class="kwd">default</span> <span class="kwd">function</span> <span class="func">Home</span>() {
<span class="kwd">return</span> (
<span class="tag"><WhopCheckoutEmbed</span>
<span class="attr">planId</span>=<span class="str">"plan_XXXXXXXXX"</span>
<span class="attr">returnUrl</span>=<span class="str">"https://yoursite.com/checkout/complete"</span>
<span class="tag">/></span>
);
}</pre>
</div>
<!--kg-card-end: html-->
<p>You can add additional controls to your embedded checkout like <code>getAddress</code> to require customers to enter their address or configure properties to change the theme of the checkout, attach an affiliate code, hide the price, and more.</p><p>To learn more about additional controls and properties you can add to your embedded checkout on React projects, check out the <a href="https://docs.whop.com/payments/checkout-embed#react-setup"><u>React setup section of the embedded checkout guide</u></a> in our developer documentation.</p><h3 id="embedded-checkouts-in-other-websites">Embedded checkouts in other websites</h3><p>If you’re not using a React setup, you should follow different steps, but they’re just as easy. First, add the checkout loader script to the <code><head></code> of your webpage. This will allow you to call the Whop checkout with a simple <code><div></code>:</p>
<!--kg-card-begin: html-->
<div class="custom-code-container">
<div class="code-header">
<span class="language-label">HTML</span>
<button class="copy-btn" onclick="copyToClipboard(this)">Copy</button>
</div>
<pre class="code-content"><span class="tag"><script</span>
<span class="attr">async</span>
<span class="attr">defer</span>
<span class="attr">src</span>=<span class="str">"https://js.whop.com/static/checkout/loader.js"</span>
<span class="tag">></script></span></pre>
</div>
<!--kg-card-end: html-->
<p>Once you’ve added the script to the webpage, it’s now time to mount the checkout. You can do so by pasting the code snippet below - make sure to replace the <code>plan_XXXXXXXXX</code> with your actual plan ID and the <a href="https://yoursite.com/checkout/complete"><u>https://yoursite.com/checkout/complete</u></a> with the URL you want to redirect your customers to after successful payment:</p>
<!--kg-card-begin: html-->
<div class="custom-code-container">
<div class="code-header">
<span class="language-label">HTML</span>
<button class="copy-btn" onclick="copyToClipboard(this)">Copy</button>
</div>
<pre class="code-content"><span class="tag"><div</span>
<span class="attr">data-whop-checkout-plan-id</span>=<span class="str">"plan_XXXXXXXXX"</span>
<span class="attr">data-whop-checkout-return-url</span>=<span class="str">"https://yoursite.com/checkout/complete"</span>
<span class="tag">></div></span></pre>
</div>
<!--kg-card-end: html-->
<p>Just like the React setup, you can add more programmatic controls like attaching an ID to the checkout container or getting their emails of your customers and configuration attributes like checkout themes or accent colors.</p><p>To find out all the options you have for customizing your embedded checkouts, check out the <a href="https://docs.whop.com/payments/checkout-embed#other-websites"><u>Other websites section of the embedded checkout guide</u></a> in our developer documentation.</p><h2 id="saving-payment-methods-for-later">Saving payment methods for later</h2><p>Some businesses use a recurring pricing system - like Netflix, ChatGPT, and YouTube Premium. These platforms don't require you to open up the platform every month to manually renew your membership, they automatically charge customers <em>off-session</em>.</p><p>To do this, they need customers to <em>set up their payment information</em> - and you can do the same thing with the Whop API. I mentioned checkout configurations before, and you can use it to save payment information of your customers:</p>
<!--kg-card-begin: html-->
<div class="custom-code-container">
<div class="code-header">
<span class="language-label">JavaScript</span>
<button class="copy-btn" onclick="copyToClipboard(this)">Copy</button>
</div>
<pre class="code-content"><span class="kwd">const</span> checkoutConfiguration = <span class="kwd">await</span> client.checkoutConfigurations.<span class="func">create</span>({
<span class="prop">company_id</span>: <span class="str">"biz_XXXXXX"</span>, <span class="com">// Replace the string with your business ID</span>
<span class="prop">mode</span>: <span class="str">"setup"</span>, <span class="com">// Don't charge, just save</span>
<span class="prop">redirect_url</span>: <span class="str">"https://yoursite.com/checkout/complete"</span>, <span class="com">// Redirect your customers after action</span>
<span class="prop">metadata</span>: {
<span class="prop">customer_id</span>: <span class="str">"my_internal_user_id"</span> <span class="com">// Replace the user ID argument with the actual user ID</span>
}
});</pre>
</div>
<!--kg-card-end: html-->
<p>Selecting “<code>setup</code>” as the mode makes the action just save the payment information and link it with the user ID (which you can get from several actions like <a href="https://docs.whop.com/api-reference/users/retrieve-user"><u>retrieve user</u></a>).</p><p>After creating the checkout configuration, you should direct the customer to the checkout page. You can either redirect them to the <code>purchase_url</code> the API will return to you with:</p>
<!--kg-card-begin: html-->
<div class="custom-code-container">
<div class="code-header">
<span class="language-label">JavaScript</span>
<button class="copy-btn" onclick="copyToClipboard(this)">Copy</button>
</div>
<pre class="code-content">window.location.href = checkoutConfiguration.purchase_url;</pre>
</div>
<!--kg-card-end: html-->
<p>Or you can use an embedded checkout by following the steps I covered earlier.</p><p>After the user saves their payment method, your system needs to be aware of it - this is done via <a href="https://whop.com/blog/webhooks-app-whop/" rel="noreferrer">webhooks</a>. You can think of them as automated notifications from Whop that let your system know when actions are made. In this case, Whop will send the <code>setup_intent.succeeded</code> webhook to the webhook URL of your choice.</p><p>The webhook message contains some data like the <code>payment_method.id</code>, which you need to charge users in the future. To learn more about the webhook lifecycle on Whop, check out the <a href="https://docs.whop.com/developer/guides/webhooks"><u>Webhooks section of our developer documentation</u></a>.</p><h2 id="charging-users-off-session">Charging users off-session</h2><figure class="kg-card kg-image-card"><a href="https://whop.com/blog/content/images/2026/01/WhopOffSessionCharge.webp"><img src="https://whop.com/blog/content/images/2026/01/WhopOffSessionCharge.webp" class="kg-image" alt="How to use the Whop Rest API to accept payments" loading="lazy" width="2000" height="645" srcset="https://whop.com/blog/content/images/size/w600/2026/01/WhopOffSessionCharge.webp 600w, https://whop.com/blog/content/images/size/w1000/2026/01/WhopOffSessionCharge.webp 1000w, https://whop.com/blog/content/images/size/w1600/2026/01/WhopOffSessionCharge.webp 1600w, https://whop.com/blog/content/images/size/w2400/2026/01/WhopOffSessionCharge.webp 2400w" sizes="(min-width: 720px) 720px"></a></figure><p>If you have products or setups that require you to charge your customers off-session, like when they aren’t actively on your website and following a bunch of steps to make a purchase, the Create payment action in the Whop API is perfect for you.</p><p>The Create payment action lets you use an existing plan or create a new one on the fly and charge your users whenever you want. Since I covered saving payment methods for later, you have the information you need to charge users.</p><p>The code you’ll need to use is as follows:</p>
<!--kg-card-begin: html-->
<style>
.custom-code-container {
background-color: #1e1e1e;
border-radius: 8px;
overflow: hidden;
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
margin: 20px 0;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border: 1px solid #333;
}
.code-header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #2d2d2d;
padding: 8px 16px;
border-bottom: 1px solid #333;
}
.language-label {
color: #e0e0e0;
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.copy-btn {
background: transparent;
border: 1px solid #555;
color: #aaa;
cursor: pointer;
font-size: 0.75rem;
padding: 4px 10px;
border-radius: 4px;
transition: all 0.2s ease;
}
.copy-btn:hover {
background-color: #3e3e3e;
color: #fff;
border-color: #777;
}
.copy-btn:active {
transform: translateY(1px);
}
.code-content {
margin: 0;
padding: 16px;
color: #d4d4d4;
font-size: 0.9rem;
line-height: 1.5;
overflow-x: auto;
white-space: pre;
}
.kwd { color: #569cd6; }
.str { color: #ce9178; }
.num { color: #b5cea8; }
.com { color: #6a9955; font-style: italic; }
.prop { color: #9cdcfe; }
</style>
<div class="custom-code-container">
<div class="code-header">
<span class="language-label">JavaScript</span>
<button class="copy-btn" onclick="copyToClipboard(this)">Copy</button>
</div>
<pre class="code-content" id="myCodeBlock"><span class="kwd">const</span> payment = <span class="kwd">await</span> client.payments.create({
<span class="prop">plan</span>: {
<span class="prop">initial_price</span>: <span class="num">10.00</span>,
<span class="prop">currency</span>: <span class="str">"usd"</span>,
<span class="prop">plan_type</span>: <span class="str">"one_time"</span>
},
<span class="prop">company_id</span>: <span class="str">"biz_XXXXXXXX"</span>, <span class="com">
<span class="prop">member_id</span>: <span class="str">"mber_XXXXXXXX"</span>, <span class="com">
<span class="prop">payment_method_id</span>: <span class="str">"payt_XXXXXXXXX"</span>, <span class="com">
});
console.log(<span class="str">"Payment ID:"</span>, payment.id);</span></span></span></pre>
</div>
<script>
function copyToClipboard(button) {
const codeElement = document.getElementById('myCodeBlock');
const textToCopy = codeElement.innerText;
const textarea = document.createElement('textarea');
textarea.value = textToCopy;
document.body.appendChild(textarea);
textarea.select();
try {
document.execCommand('copy');
const originalText = button.innerText;
button.innerText = 'Copied!';
button.style.borderColor = '#4CAF50';
button.style.color = '#4CAF50';
setTimeout(() => {
button.innerText = originalText;
button.style.borderColor = '#555';
button.style.color = '#aaa';
}, 2000);
} catch (err) {
console.error('Failed to copy', err);
button.innerText = 'Error';
}
document.body.removeChild(textarea);
}
</script>
<!--kg-card-end: html-->
<p>But running this code doesn’t mean the charge is successful. Whop returns a payment object with the status “processing,” and then attempts to charge the card and waits for the card network to process the payment.</p><p>Depending on the result, Whop sends one of two webhooks:</p><ul><li>If the charge succeeds, you'll receive <code>payment.succeeded</code> - use this to fulfil the order and return a 200 status to Whop, confirming you received the webhook</li><li>If it fails, you'll receive <code>payment.failed</code>, which you can then use to let your member know via email or a notification</li></ul><h2 id="ready-to-accept-payments-with-the-whop-api">Ready to accept payments with the Whop API?</h2><p>On top of the things I've talked about in this article, the Whop API also lets you manage withdrawals, promo codes, disputes, refunds, and interact with Whop apps. If you want to learn more, head to the Whop documentation to see all the capabilities of the Whop Rest API.</p><p>And if you’re ready to give it a try, <a href="https://whop.com/dashboard/"><u>go to your Whop dashboard</u></a>, grab your API keys, and start making requests.</p><div class="kg-card kg-button-card kg-align-left"><a href="https://whop.com/dashboard/" class="kg-btn kg-btn-accent">Go to your dashboard</a></div>]]></content:encoded></item>
These legal disclaimers are here because this hub is run by Google as a service. If you don't want to agree to these terms you can use a different hub or even run your own. The PubSubHubbub protocol is decentralized and free.
©2022 Google - Terms of Service - Privacy Policy