Skip to content
AxleAxle Docs
Framer Component

Component Overview

The AxleButton Framer component — two modes for accepting payments.

The AxleButton component brings Stripe payments into Framer with flexible, customizable payment flows. It supports two distinct modes for different use cases.

AxleButton component with form overlay and property panel

Two Modes

When Axle Form is enabled, clicking the button opens an overlay containing a customizable form. This form collects customer information before checkout—perfect when you need additional details beyond payment. The form includes a quantity selector (Inline or Stepper mode), custom fields, terms acceptance, and a "Secured by Stripe" footer badge for trust.

The flow:

  1. Customer clicks the button
  2. Form overlay appears with your custom fields
  3. Customer adjusts quantity (if enabled) and fills in fields
  4. Customer submits the form
  5. A Stripe checkout session is created with the form data
  6. Customer completes payment in Stripe

Learn more: Form Mode

Direct Checkout (Fastest Path to Payment)

When Axle Form is disabled, clicking the button immediately creates a Stripe checkout session and opens it. No intermediate form—perfect for simple products where you don't need to collect additional information.

Learn more: Direct Checkout

Core Properties

Every AxleButton requires these top-level properties:

PropertyTypeDefaultDescription
AmountString (decimal)10.00The payment amount in the selected currency
CurrencyEnum$ USDCurrency for the payment: USD, EUR, GBP, JPY, or INR
Product TitleStringPayment TitleName of the product or service being sold
Product DescriptionStringEnter your payment details below.Description shown to the customer
SKUStringOptionalInternal identifier for the product (not shown to customer)
Submission Mail TitleStringDefaults to Product TitleCustom title for payment confirmation emails

API Key Setup

The Stripe API key is not a component property. It's set via your site's head snippet — see Add Head Snippet for setup instructions. This separation keeps your API key out of the component configuration and ensures it's set consistently across your site.

Next Steps

First Payment

Complete your first test payment to verify everything works.

Form Mode

Collect customer information before checkout with the Axle form overlay.

On this page

Two ModesForm Mode (Recommended for Data Collection)Direct Checkout (Fastest Path to Payment)Core PropertiesAPI Key SetupNext Steps