Add Checkout Page to Framer

Sell services, products, subscriptions and events on Framer sites. Learn how to embed checkouts, add checkout pop-ups and add payment links. No coding needed.

We’ve made it easy to embed one page checkouts on your Framer site to sell products, services, subscriptions and events.

Open Framer demo website

There are 3 ways to add one page checkouts to your Framer site:

1. Buy button
2. Checkout popup
3. Checkout embed

While the buy button is easy to set up (just a minute or so), the checkout embed and popup take the payment experience to the next level.

Let’s dive in!

Add a Buy button

With the Buy button, the checkout will open on its own page, in the same or in a new tab.

1. Open your Framer site
2. Add a button or select a button on your site
3. Click Link from the editor panel
4. Go to your Checkout Page dashboard and open a checkout
5. Click Add to site and copy the payment link
6. Return to Framer and paste the payment link into the Link setting
7. Choose to open the link in the same or new tab

Add a pop-up checkout

By adding a pop-up one page checkout, you can let your customers complete their purchases without leaving your site.

The checkout pop-up works with a code override. First, we’ll add the code override to your site:

1. Open your Framer site
2. In the left panel, open the Assets tab
3. In the Code section, click the + icon to add a new code component
4. Give it the title CheckoutPopup and choose New override
5. Copy and paste the below code
6. Save the file ^

import { useEffect, useRef, useCallback } from "react"
import type { ComponentType } from "react"

declare global {
    interface Window {
        checkoutPage: any
    }
}

function useEmbed() {
    useEffect(() => {
        if (window?.checkoutPage) return

        const script = document.createElement("script")

        script.src = "https://checkoutpage.co/js/overlay.js"
        script.async = true

        document.body.appendChild(script)

        return () => {
            document.body.removeChild(script)
        }
    }, [])

    return null
}

export function withCheckoutPopup(Component): ComponentType {
    return (props: { className }) => {
        useEmbed()

        props.className += " cp-button"

        return <Component {...props} />
    }
}

After adding the CheckoutPopup code override, we’ll add the checkout pop-up to your site:

1. In the left panel, click the Pages tab
2. Open the page you want to add the checkout pop-up to
3. Add a button or select a button on your site
4. In the right panel, navigate to the Link setting
5. Go to your Checkout Page dashboard and open the checkout you want to add
6. Click Add to site and copy the payment link
7. Return to Framer and paste the payment link into the Link setting
8. Set New Tab to No
9. In the right panel, scroll down to Code Overrides and click to open the panel
10. For File, select CheckoutPopup
11. For Override, select withCheckoutPopup
12. Click Preview and click your button, it now opens the checkout in a pop-up!

Embed your checkout

The checkout embed lets you sell directly on your site with an embedded checkout form. It’s perfect for a two-column section, combined with conveying copy and images, or as a standalone section.

The checkout embed works as a custom code component. First, we’ll add the custom code component to your site:

1. Open your Framer site
2. In the left panel, open the Assets tab
3. In the Code section, click the + icon to add a new code component
4. Give it the title CheckoutEmbed and choose New component
5. Copy and paste the below code
6. Save the file. You should now see an example checkout in the Preview panel! ^

import { useEffect } from "react"
import { addPropertyControls, ControlType } from "framer"

declare global {
    interface Window {
        checkoutPage: any
    }
}

function useEmbed() {
    useEffect(() => {
        if (window?.checkoutPage) return

        const script = document.createElement("script")

        script.src = "https://checkoutpage.co/js/overlay.js"
        script.async = true

        document.body.appendChild(script)

        return () => {
            document.body.removeChild(script)
        }
    }, [])

    return null
}

export default function CheckoutEmbed({
    checkout,
    style,
}: {
    checkout: String
    style: Object
}) {
    useEmbed()

    useEffect(() => {
        window?.checkoutPage?.initEmbeds()
    }, [checkout])

    return (
        <div style={style}>
            <div className="cp-checkout" data-checkout={checkout}></div>
        </div>
    )
}

// Add a form id field in the properties panel
addPropertyControls(CheckoutEmbed, {
    checkout: {
        title: "Checkout",
        type: ControlType.String,
        placeholder: "Your checkout link",
        defaultValue:
            "https://checkoutpage.co/c/examples/customize-this-checkout",
    },
})

After adding the CheckoutEmbed component, we will add the checkout embed to a page. You can add multiple checkout embeds to your site.

Here’s how you add the checkout embed to a page:

1. In the left panel, click the Pages tab
2. Open the page you want to add the checkout embed to
3. In the left panel, click the Assets tab
4. From the Code section, drag the CheckoutEmbed.tsx component onto your page. You should now see the example on your page.
5. Go to your Checkout Page dashboard and open the checkout you want to add
6. Click Add to site and copy the payment link
7. Back on Framer, click on the embedded checkout element
8. In the right panel, navigate to CheckoutEmbed and paste the payment link in the Checkout field
9. Click Preview to see your checkout