Install Framer Component

Install from the Marketplace

The easiest way to install Axle is directly from the Framer Marketplace:

1. Visit the Axle plugin page on the Framer Marketplace
2. Click Open Plugin to add it to your Framer project

Alternatively, search within Framer:

1. Open your Framer project
2. Press Cmd+K (Mac) or Ctrl+K (Windows/Linux) to open the search menu
3. Type "Axle" to find the plugin
4. Click on Axle from the results

Add the AxleButton component

Once installed, add the payment button to your page:

1. Open the Assets panel (left sidebar)
2. Search for "AxleButton"
3. Drag it onto your canvas

The component is now on your page and ready to configure.

Configure the button

Click on the AxleButton to open its properties panel. You'll see these key settings:

Product Title

The name of what you're selling (e.g., "Premium Course", "Donation", "E-book")

Amount

The price in decimal format (e.g., 10.00 for $10, 99.99 for $99.99)

Currency

Choose from USD, EUR, GBP, JPY, or INR

Button Text

The text displayed on the button (e.g., "Buy Now", "Donate", "Get Started")

Axle Form

Enable to show a form overlay before checkout. When enabled, you get access to:

• Quantity Selector — Choose Inline or Stepper mode to let customers pick a quantity
• Max Quantity — Limit orders per checkout (default 99)
• Footer Badge — "Secured by Stripe" trust badge below the submit button
• Form Fields — Up to 10 custom fields for collecting customer data

You can customize the full appearance using the Button Styling and Form Styling property groups — see Property Reference for all options.

Preview and publish

1. Click Preview to test your component on your site
2. Try clicking the button to see the payment flow
3. When you're ready, click Publish to make it live

Your button is now accepting payments from your customers!

Next steps

Learn how to complete your first payment and verify everything is working correctly.