Whop Payments Startup Docs

Get started with Whop Payments in HubSpot

Create Whop API key
1. In Whop, go to Dashboard -> Developer
2. Scroll to the bottom of the Developer section and expand the API Keys (deprecated) section. Then select “create new API key”
  
  Give the key a name, select “All” permissions, and hit save. You should see a confirmation modal with your key. Save it for your personal records. You will need it when installing the Whop Payments App in HubSpot!
Add payment button to quote
1. In HubSpot, search for and select “quote template settings”
2. Select “Customize Quote Template”
3. Select the template you would like to add the “Pay with Whop” button to
4. To add the button to the top of the quote, select the “Quote Name” component. To add it to the bottom of the quote, select the “Sender Company” component.
  You can also add the button to any rich text content block.
5. In the rich content block, select Insert -> Embed
6. Paste the following code.

<a href="https://whop-payments.com/quote-pay.html?quoteId=&portalId=22603896"

  style="display: inline-block; padding: 12px 20px; background-color: #ff6423; color: white; border-radius: 6px; text-decoration: none;">

  Pay with Whop

</a>

3. Custom Button (Advanced):
Copy and paste the code below on your website in an HTML block. Make sure to replace YOUR_PORTAL_ID with your HubSpot portal ID and YOUR_PLAN_ID with a valid Whop plan ID.

 <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Whop Payment Button</title>

</head>

<body>

    <!-- Whop Payment Button -->

    <button id="whop-payment-button" 

            data-plan-id="{YOUR_PLAN_ID}" 

            data-portal-id="{YOUR_PORTAL_ID}"

            style="display: inline-block; padding: 12px 20px; background-color: #ff6423; color: white; border-radius: 6px; text-decoration: none; border: none; font-family: inherit; font-size: 16px; cursor: pointer; transition: background-color 0.2s ease;">

        Pay with Whop

    </button>

    
<script>

        const button = document.getElementById('whop-payment-button');

        // Add hover effect

        button.addEventListener('mouseenter', () => {

            button.style.backgroundColor = '#e55a1f';

        });

        

        button.addEventListener('mouseleave', () => {

            button.style.backgroundColor = '#ff6423';

        });

        

        // Payment click handler

        button.addEventListener('click', async () => {

            const planId = button.getAttribute('data-plan-id');

            const portalId = button.getAttribute('data-portal-id');

            const currentUrl = window.location.href;

            if (!planId) {

                alert('No plan ID set on button');

                return;

            }

            try {

                const res = await fetch('https://whop-payments.com/api/createGeneralWhopCheckout', {

                    method: 'POST',

                    headers: {

                        'Content-Type': 'application/json'

                    },

                    body: JSON.stringify({

                        planId: planId,

                        sourceUrl: currentUrl,

                        portalId: portalId

                    })

                });

                const data = await res.json();

                if (data.checkoutUrl) {

                    // Redirect to the Whop checkout

                    window.location.href = data.checkoutUrl;

                } else {

                    //debug

                    console.error('No URL returned from API:', data);

                    alert('Error creating checkout session.');

                }

            } catch (err) {

                //debug

                console.error('Whop payment error:', err);

                alert('Something went wrong creating the checkout.');

            }

        });

    </script>

</body>

</html>

RECOMMENDED CHANGES

INVOICES
1. In HubSpot, go to invoices
2. Select “Edit columns”
3. Search for and select Whop payment link

CRM CARDS
1. In HubSpot, go to Settings > Data Management > Deals
2. Click on Default View
3. On the right hand sidebar, click the plus sign to add a new card to the view.
4. Click on “Card Library” and search for Whop. Click on “Add card” for the Whop-Payment-Link-Deal card.
5. Click “Save and Exit” to save the view. Repeat steps for Contact View.