Connect a Carrd Landing Page to Payhip Without Building a Backend

frank javier mercado perez — Thu, 20 Aug 2026 15:21:16 +0000

Affiliate disclosure: I’m an independent Payhip Partner. The optional signup link at the end is my partner link; I may receive a commission from Payhip if a referred seller generates eligible revenue. I am not a Payhip employee or official representative.

A creator selling one template or downloadable guide does not need to write a payment backend.

The safer architecture is usually:

Carrd or static page
        ↓
Payhip product page or direct checkout
        ↓
Hosted payment and product delivery

Your public page explains the offer. The hosted commerce platform owns the payment flow. No card data, secret keys, or payment logic belongs in Carrd.

This tutorial shows two link-based integrations and one optional embed route.

Before you start

You need:

A published product in Payhip
Its public product URL
A button on your Carrd or static page
A clear product description, support contact, and terms

In Payhip, the product URL is available from the product’s Share / Embed controls. A typical product URL has this shape:

https://payhip.com/b/PRODUCT_KEY

Use your real product key in every example below.

Option 1: Send visitors to the product page

This is the safest default when the buyer still needs details before purchasing.

In Carrd:

Select the call-to-action button.
Set its URL to your full Payhip product URL.
Use a descriptive label such as View template details or See what’s included.
Preview the page on desktop and mobile.

On a conventional static site, the equivalent HTML is just an anchor:

<a class="product-button" href="https://payhip.com/b/PRODUCT_KEY">
  View product details
</a>

No JavaScript is required.

Use this route when the Payhip product page contains important previews, license terms, compatibility notes, or variations that do not fit on your landing page.

Option 2: Link directly to checkout

If your landing page already gives the buyer everything needed to decide, a direct checkout removes an intermediate page.

Payhip documents this URL format:

https://payhip.com/buy?link=PRODUCT_KEY

The static HTML remains simple:

<a class="buy-button" href="https://payhip.com/buy?link=PRODUCT_KEY">
  Buy the template
</a>

In Carrd, paste the same direct-checkout URL into the button’s URL field.

Do not use a vague label such as Continue. A label like Buy the template — US$19 makes the action and price understandable before the click. Keep the displayed price synchronized with Payhip.

Use direct checkout when:

The product, price, file format, and license are already clear
The visitor does not need another sales page
You have tested that the link opens the intended product and currency

Avoid it when the buyer would be surprised by required details after clicking.

Optional: style a normal link like a button

For a regular HTML site, you can style the anchor without adding checkout logic:

.buy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.8rem 1.1rem;
  border-radius: 0.65rem;
  color: #ffffff;
  background: #2447e8;
  font-weight: 700;
  text-decoration: none;
}

.buy-button:hover {
  background: #1833b8;
}

.buy-button:focus-visible {
  outline: 3px solid #ffbf47;
  outline-offset: 3px;
}

The focus-visible state is not decoration. It helps keyboard users identify which control will activate.

Optional: use Payhip’s embed button

Payhip also provides an embed button from Share / Embed → Embed Button. It produces one snippet for the document’s <head> and another for the desired button location.

According to Payhip’s current documentation, that embedded-button option is available for digital and physical products, but not for tiered-priced courses, memberships, coaching products, or bundles. Check the documentation before choosing it because supported product types can change.

For Carrd, the link-based methods above are easier to maintain and do not expose any secrets. If you use custom embed code, confirm that your Carrd plan supports the required code placement.

What must never go in the page

Do not paste any of these into Carrd or client-side HTML:

Payment processor secret keys
Payhip account passwords
Private API credentials
Buyer data
Code that tries to capture card details before redirecting

A public page’s source is visible to visitors. Treat every value in it as public.

Make the handoff feel intentional

A redirect to another domain can feel suspicious when it is unexplained. Add one sentence close to the button:

Secure checkout and digital delivery are handled by Payhip.

Do not imply that your page is Payhip or that Payhip officially endorses you. The sentence only explains where the click goes.

Launch QA checklist

Run these checks after publishing, not only inside the editor:

Open the public Carrd URL in a private browser window.
Test every purchase button on both desktop and a narrow mobile viewport.
Confirm the product name, displayed price, currency, and files match.
Make sure the checkout belongs to the intended Payhip product.
Verify keyboard focus is visible and the button label describes the action.
Confirm support, license, and refund information are reachable before purchase.
Check that demo images, fonts, and files are licensed for distribution.
Repeat the link test after changing a product slug or URL.

You do not need to complete an unintended live purchase to confirm the destination. Stop before payment unless you have a deliberate, documented test procedure.

Product page or direct checkout?

Use this decision rule:

Does the landing page answer every purchase-critical question?
  ├─ No  → Link to the Payhip product page
  └─ Yes → Consider the direct checkout link

Starting with the product page is rarely a serious mistake. Starting with checkout before the offer is clear often is.

Final result

The integration can be one ordinary URL. Carrd handles presentation; Payhip handles the hosted commerce flow. That boundary makes the system simpler to build, safer to maintain, and easier to test.

Official reference: Add Payhip to Your Website.

If you have independently decided that Payhip fits your product, this is my disclosed Payhip partner signup link. Payhip may pay me a commission from eligible referred sellers. You can use the official documentation above without using my partner link.

DEV Community: frank javier mercado perez