Connect Shopify and Whop to Sable

What you need before you start

Four things, all of which you already have or can create in a few minutes:

• Access to the Shopify admin for the store, with permission to create apps in Shopify's Dev Dashboard (dev.shopify.com).
• A Whop account with a business on it. The company id starts with biz_ and appears in the Whop dashboard URL and under Settings.
• The Sable dashboard password. Sable is operated for you; there is no self-serve signup.
• A duplicate of your live theme to install on, so nothing changes for shoppers until you publish.

Nothing about your store changes until the script tag is in a published theme, and even then the checkout button falls back to Shopify's own checkout whenever Sable cannot be reached.

1. Create the Shopify custom app

Sable talks to your store through a custom app of your own, so the credentials stay yours. In the Dev Dashboard create an app for the store, then on the app version grant these access scopes:

write_orders
read_orders
read_products
read_customers
write_customers
write_draft_orders
unauthenticated_read_product_listings
unauthenticated_read_product_inventory
unauthenticated_read_checkouts
unauthenticated_write_checkouts

Install the app on the store and copy the Client ID and Client secret from the app's settings page. Sable uses them to mint 24-hour Admin API tokens with the client-credentials grant and creates the Storefront API token itself on first use, which is why the unauthenticated_* scopes matter: without them the Storefront token cannot be created and carts cannot be priced.

2. Add the store in the dashboard

Open the dashboard and choose Add store. It starts from Shopify: Sable reads the shop's details with the app's credentials, so there is nothing to type twice. Nothing is saved until Create store, and everything is editable later in Settings.

Secrets are encrypted at rest with a key only the platform holds. The dashboard never shows a saved secret again, only whether one is saved. If the shop's currency, timezone or domain change later, Sync from Shopify on Settings re-reads them; a store name you typed is kept.

3. Connect Whop and register the webhook

On Connections the Payment account section shows the company id, the environment and whether an API key is saved. Three buttons finish the Whop side:

1. Test Whop lists products with the saved API key, so you know the key and the company id match.
2. Create product creates one hidden Whop product for the store. Every checkout is a one-time plan under it; buyers never see it in a Whop storefront.
3. Register webhook creates the webhook through the Whop API, pointed at the store's own endpoint (https://sable.veyraengine.io/api/webhooks/whop/<store id>), and stores its signing secret on the store. Every delivery is verified against that secret before anything is read.

The webhook subscribes to payment.succeeded, payment.failed, payment.pending, refund.created, refund.updated, dispute.created, dispute.updated and dispute_alert.created. Without it a buyer can pay and the order never reaches the dashboard or Shopify, which is why Connections shows a warning until it is registered.

In the Whop dashboard, under Settings → Checkout, set the success redirect URL, the statement descriptor shoppers see on their card statement, and the payment domain (your checkout domain) so Apple Pay can work inside the embedded checkout.

4. Register the Shopify webhooks

Still on Connections, the Shopify section has Test Shopify Admin, which reads the shop name and currency with the saved credentials, and Register webhooks, which subscribes the app to refunds/create and orders/cancelled at https://sable.veyraengine.io/api/webhooks/shopify/<store id>. Deliveries are verified with the app's client secret. Registering is idempotent: pressing it again changes nothing.

These two topics are what carry a refund made in the Shopify admin over to Whop, and what records a cancellation made in Shopify. Payments themselves never come from Shopify; they come from the Whop webhook.

5. Install the theme snippet

The snippet is one script tag, shown on Connections with the right host filled in. It looks like this:

<script src="https://checkout.yourstore.com/s/sk_XXXXXXXXXXXXXXXXXXXXXXXX" defer></script>

On every page it records ad attribution (gclid, gbraid, wbraid, fbclid, ttclid, msclkid and the utm_* parameters) in a first-party cookie. When a shopper clicks Check out it reads the Shopify cart, hands the variant ids and quantities to Sable and sends the browser to the checkout. Prices are never sent from the browser.

1. Shopify admin → Online Store → Themes → on the live theme choose Duplicate. Do the next steps on the copy.
2. Edit code → layout/theme.liquid → paste the tag on its own line just before </head> → Save.
3. Turn off dynamic checkout buttons. "Buy it now", Shop Pay and PayPal express buttons skip the cart and cannot be intercepted. In the theme editor untick Show dynamic checkout buttons on the product page; on the cart page and drawer untick any "additional checkout buttons" setting; in the code, search for additional_checkout_buttons and remove that block. Keep the regular Add to cart and Check out buttons: those are what the snippet hooks.
4. Preview the theme, test it as described below, then Publish.

6. Check it worked

1. Open the preview theme with a test parameter, for example https://yourstore.com/?gclid=test123. In DevTools → Application → Cookies, a _wc_attr cookie now exists on .yourstore.com; in the console, WhopCheckout.attribution() prints the decoded value.
2. Add a product to the cart and click Check out, from the cart page and from the cart drawer. In the Network tab (with "Preserve log" ticked) you should see GET /cart.js, then POST …/api/handoff answering 200 with a URL, then the browser navigating there. The button reads "Loading…" while this happens.
3. Failure drill: block the checkout host in DevTools (Network → request blocking) and click Check out again. The console logs a [whop-checkout] warning and the shopper lands on Shopify's native checkout. That is what happens during any outage.
4. Back on Connections, the Theme snippet card flips from "Not detected" to "Active" the moment the first checkout click reaches Sable, and the card footer counts clicks from then on.
5. Place a sandbox order end to end before publishing. It appears in Orders as Paid, syncs to Shopify as a test order, and the Events page shows the payment.succeeded delivery that created it.

Switching it off

Two ways, both reversible. Remove the script tag from the theme, or set the store's status to Paused in Settings: a paused store refuses hand-offs, so the checkout button goes back to Shopify's own checkout on the next click. Re-enable the dynamic checkout buttons if you removed the tag for good.

Questions people ask