Add Checkout Page to Framer

The Checkout Page plugin puts your checkout pages, events, and forms on the Framer canvas. Open it, connect your account, and add a buy button or an embedded checkout to any page without writing code. Payments run through your own Stripe account, so the money goes straight to you.

Open the plugin in Framer

Add the plugin from inside your Framer project:

1. Click the Framer button in the top left corner of the editor (it shows your current mode, such as Canvas)
2. Go to Plugins and click Browse All
3. Search for Checkout Page and press Enter to install it
4. The plugin opens in a panel next to your canvas

To reopen the plugin later, go back to Framer → Plugins → Browse All, where Checkout Page is listed under Recents, or press ⌥ ⌘ P to run your most recent plugin.

Or start from the Checkout Page listing in the Framer marketplace: click Open Plugin and choose the project you want to sell from.

Connect your account

1. In the plugin, click Connect Checkout Page
2. A browser tab opens. Sign in and approve the connection.
3. Return to Framer. Your checkout pages, events, and forms are now listed in the plugin.

No account yet? Click Create an account on the plugin's first screen, sign up, then come back and connect.

Selling from more than one store? Connect each account and switch between them from the store name at the top of the plugin. The same menu holds Connect a store and Create a store.

Find the page you want to add

The plugin lists every page in your account. Search by name, or filter with All, Checkout pages, Events, and Forms. Click a page to open it and see the ways you can add it. To make a new one, click + and the dashboard opens on a new page of that type.

Add a buy button

The buy button opens your checkout in a pop-up over your site, or links to it as its own page. It is an ordinary Framer component, so you can restyle it in the properties panel whenever you like.

1. Open the page you want to sell in the plugin
2. To match a button you already have, select it on the canvas first
3. Click Add buy button to insert it, or drag it from the plugin onto the canvas to place it yourself
4. With the new button selected, set it up in the properties panel

Buy button properties

Select the button on the canvas and the properties panel holds everything about it:

• Checkout URL is the page the button sells. Paste a different one to point it somewhere else.
• Label is the text on the button.
• Type switches between Popup, which opens the checkout over your site, and Link, which sends people to it. Choose Link and a Link target control appears, so the checkout opens in a new tab or the same tab.
• Font sets the family, weight, size, letter spacing, and line height.
• Styles holds the Fill, text Color, corner Radius, Padding X and Padding Y, and a Border width with its own color.
• Hover holds Scale, Fill, Color, and the Transition they animate with. Clear it with the x and the button stops reacting to hover.

The button hugs its label. Give the frame a fixed or fill width in the layout panel and a long label wraps and stays centered inside it.

Embed a checkout on the page

The embed puts the checkout form on the page itself, so customers pay without leaving your site. It works well in a two-column section next to your copy and images, or as a section of its own.

1. Open the page you want to sell in the plugin
2. Click Embed on page, or drag it onto the canvas
3. The embed fills the width of the frame you put it in and grows to fit the checkout

Add as many embeds as you like, each pointing at a different page. To point one somewhere else, select it and edit Checkout URL in the properties panel.

Start from our demo template

Our demo site is a working Framer site with the plugin already in it, so you can see what each option feels like before you build your own. It covers checkout pop-ups, slide-out and slide-up overlays, an ecommerce store built on the Framer CMS, an embedded checkout, and an embeddable form.

Click through the buttons to see how each one behaves, then use Copy template to bring the whole project into your own Framer account. Replace the checkout links with your own pages and it sells for you.