Add Checkout Page to Framer

Kajabi is a digital product and course platform. Integrate Checkout Page with Kajabi to sell products or courses while Kajabi manages content and delivery.

How do I add a Buy button?

1. With the Buy button, the checkout will open on its own page, in the same or in a new tab.
2. Open your Framer site
3. Add a button or select a button on your site
4. Click Link from the editor panel
5. Go to your Checkout Page dashboard and enter the edit view of a page
6. Select Share & Embed
7. Copy the Hosted page URL
8. Return to Framer and paste the Hosted page URL payment link into the Link setting
9. Choose to open the link in the same or new tab

How do I add a pop-up checkout?

1. By adding a pop-up one page checkout, you can let your customers complete their purchases without leaving your site.
2. The checkout pop-up works with a code override. First, we’ll add the code override to your site:
3. Open your Framer site
4. In the left panel, open the Assets tab
5. In the Code section, click the + icon to add a new code component
6. Give it the title CheckoutPopup and choose New override
7. Copy and paste the below code
8. 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} />
    }
}

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

How do I embed my checkout?

1. 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.
2. The checkout embed works as a custom code component. First, we’ll add the custom code component to your site:
3. Open your Framer site
4. In the left panel, open the Assets tab
5. In the Code section, click the + icon to add a new code component
6. Give it the title CheckoutEmbed and choose New component
7. Copy and paste the below code
8. 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",
    },
})

1. After adding the CheckoutEmbed component, we will add the checkout embed to a page. You can add multiple checkout embeds to your site.
2. Here’s how you add the checkout embed to a page:
3. In the left panel, click the Pages tab
4. Open the page you want to add the checkout embed to
5. In the left panel, click the Assets tab
6. From the Code section, drag the CheckoutEmbed.tsx component onto your page. You should now see the example on your page.
7. Go to your Checkout Page dashboard and open the checkout you want to add
8. Select Share & Embed
9. Copy the Hosted page URL
10. Back on Framer, click on the embedded checkout element
11. In the right panel, navigate to CheckoutEmbed and paste the payment link in the Checkout field
12. Click Preview to see your checkout
13. Note: For an upsell flow to work, the initial purchase should happen on the same domain as the upsell. You also need to set up a custom domain to host your checkouts as a subdomain of your main site - e.g. if your site is example.com, use pay.example.com