Skip to content
AxleAxle Docs
Framer Component

Property Reference

Complete reference of all AxleButton component properties.

This page documents every property available on the AxleButton component, organized by group.

AxleButton property panel in Framer

Top-Level Properties

These properties define the core payment and product information.

PropertyTypeDefaultDescription
SKUStringOptionalInternal product identifier. Stored with transaction but not shown to customers. Use for inventory/fulfillment tracking.
AmountString (decimal)"10.00"Payment amount in the selected currency. Format: "10.00", "99.99", "5.50", etc. Multiplied by quantity if Quantity Selector is enabled.
CurrencyEnum"$ USD"Payment currency. Options: "$ USD", "€ EUR", "£ GBP", "¥ JPY", "₹ INR". Displayed to customer in Stripe checkout.
Product TitleString"Payment Title"Name of the product/service. Shown in form overlay header and Stripe checkout.
Product DescriptionString"Enter your payment details below."Description shown in form overlay. Use to provide context or instructions to the customer.
Submission Mail TitleStringOptional (defaults to Product Title)Custom title for payment confirmation emails. Overrides Product Title in email notifications.

Button Styling Group

Properties that control the appearance of the payment button itself.

Text & Typography

PropertyTypeDefaultDescription
TextString"Pay Now"The label displayed on the button. Keep short and action-oriented.
FontExtendedSystem FontComplete font control including family, weight, style, and size.

Sizing

PropertyTypeDefaultDescription
PaddingExtendedStandardInternal spacing between text and button edges. Supports top, right, bottom, left customization.
Border RadiusNumber4pxRoundness of button corners. Range: 0-100px.

Colors

PropertyTypeDefaultDescription
Background ColorColor#18181BButton background color. Should contrast with text color for readability.
Text ColorColor#FFFFFFColor of the button text/label.
BorderExtendedNoneOptional border around the button. Includes width and color.

Hover State

PropertyTypeDefaultDescription
Hover Background ColorColor#09090BBackground color when user hovers over button. Typically darker than default.
Hover Text ColorColor#FFFFFFText color on hover.
Hover BorderExtendedNoneOptional border styling on hover.

Spinner

PropertyTypeDefaultDescription
Spinner SizeNumber16pxDiameter of the loading spinner circle. Range: 10-100px. Shown while processing payment.
Spinner Line WidthNumber2pxThickness of the spinner stroke. Range: 1-10px.
Spinner ColorColor#FFFFFFColor of the spinning indicator. Choose color that contrasts with button background.

Axle Form Group

Properties that control the form overlay behavior and content. Only available when form mode is enabled.

Form Mode

PropertyTypeDefaultDescription
Axle FormSegmented (Yes/No)NoEnable/disable the form overlay. Yes = show form before checkout. No = direct checkout (default).

Form Display (Only visible when Axle Form = Yes)

PropertyTypeDefaultDescription
Preview in EditorToggle (Yes/No)DefaultShow/hide the form in the Framer canvas while designing. Helps visualize layout.

Form Submission

PropertyTypeDefaultDescription
Button TextString"Continue"Label for the form submission button. Examples: "Next", "Proceed", "Checkout", "Pay Now".
Button WidthSegmentedFillButton width: "Fill" (full width) or "Auto" (content width).

Form Fields

PropertyTypeDefaultDescription
Quantity SelectorSegmented (Off/Inline/Stepper)OffAdd a quantity picker to the form. Inline shows a compact number input. Stepper shows a +/- control with its own styling options. Multiplies final amount by selected quantity.
Max QuantityNumber99Maximum quantity a customer can select per order. Range: 1-999. Only visible when Quantity Selector is not Off.
PropertyTypeDefaultDescription
Footer BadgeSegmented (On/Off)OnShow a "Secured by Stripe" badge and cancel link below the submit button. Provides trust signaling and an easy way for customers to close the form.

Custom Form Fields Array

Add up to 10 custom fields to collect customer information.

PropertyTypeDefaultDescription
TypeEnumTextField input type: Text, Email, Number, Phone, or Textarea.
LabelString"New Field"The label displayed above the field. Be clear and descriptive.
PlaceholderString"Enter value..."Placeholder text inside empty field. Guides what customer should enter.
RequiredBooleantrueWhether this field is mandatory. Required fields have an asterisk (*).
LayoutEnumOne ColumnField layout: "One Column" (full width) or "Two Column" (side-by-side on desktop).

Terms & Conditions

PropertyTypeDefaultDescription
VisibleToggle (On/Off)OffShow/hide the terms and conditions checkbox.
Label TextString"I agree to the [Terms & Conditions]"Checkbox label. Supports bracket syntax for links: [link text].
Link URLStringOptionalURL where the link points. Ignored if Link Enabled is Off.
Link EnabledToggle (On/Off)OffWhether the link in the label is clickable.

Form Styling

Sizing

PropertyTypeDefaultDescription
Horizontal GapNumber16pxSpace between fields in two-column layout.
Vertical GapNumber12pxSpace between fields in vertical stack.
Footer GapNumber12pxSpace between the last form field and the footer (submit button / badge area).

Container

PropertyTypeDefaultDescription
Container Background ColorColor#FFFFFFBackground color of the form overlay container.
Container PaddingExtendedStandardInternal spacing around form content. Top, right, bottom, left.
Container Border RadiusNumber8pxRoundness of container corners.
Container BorderExtendedOptionalBorder around the form container. Includes width and color.
Container ShadowToggle (On/Off)OnDrop shadow behind the form for depth.
Overlay Background ColorColorrgba(0,0,0,0.5)Color and opacity of the backdrop (dimmed area behind form).

Labels

PropertyTypeDefaultDescription
Label FontExtendedSystem FontFont styling for field labels. Includes family, weight, style, size.
Label Text ColorColor#09090BColor of label text.

Input Fields

PropertyTypeDefaultDescription
Input FontExtendedSystem FontFont styling inside input fields.
Input PaddingExtendedStandardSpace inside inputs between text and edges.
Input Border RadiusNumber4pxRoundness of input field corners.
Input Background ColorColor#FFFFFFBackground color inside input fields.
Input Text ColorColor#09090BColor of text typed into inputs.
Input Placeholder ColorColor#A1A1AAColor of placeholder text. Typically lighter than actual text.
Input BorderExtendedStandardBorder around input fields. Includes width and color.

Input Focus State

PropertyTypeDefaultDescription
Input Focus Background ColorColor#FFFFFFBackground color when input is focused/active.
Input Focus BorderExtendedOptionalBorder styling when input is focused. Typically highlighted.

Input Error State

PropertyTypeDefaultDescription
Input Error Background ColorColor#FEF2F2Background color when field has a validation error.
Input Error BorderExtendedRedBorder styling for error state. Typically red.
Input Error Text ColorColor#DC2626Color of error message text.

Stepper Styling

These controls only appear when Quantity Selector is set to Stepper. They let you style the stepper independently from input fields.

PropertyTypeDefaultDescription
Stepper PaddingExtendedStandardInternal spacing inside the stepper control. Supports top, right, bottom, left.
Stepper Border RadiusNumber4pxRoundness of the stepper control corners.

Header Styling

PropertyTypeDefaultDescription
Close SizeNumber24pxSize of close button (X). Should be large enough to tap (24px+ recommended). Range: 12-48px.
Header FontExtendedSystem FontFont for header area and UI elements.
Title FontExtendedSystem FontFont for the form title/heading.
Description FontExtendedSystem FontFont for description text in header.

Property Summary by Use Case

Minimal Setup (Direct Checkout)

Only required:

  • Amount
  • Currency
  • Product Title
  • Button Text
  • Button colors

Simple Form with Custom Fields

Recommended:

  • All top-level properties
  • Axle Form = Yes
  • Add 2-5 Form Fields
  • Button Text
  • Basic container and input colors

Complex Checkout

Consider enabling:

  • Quantity Selector
  • Multiple Form Fields (up to 10)
  • Terms & Conditions
  • Comprehensive styling customization

Notes

  • No API Key Property: The API key is set via your site's head snippet, not as a component property. See Add Head Snippet
  • No Built-in Name/Email: All fields are custom. Add them via Form Fields array if needed
  • No Size Variant: There is no small/medium/large button size. Use Button Padding for sizing
  • No Full Width Property: Button width is controlled by Button Width property (Fill/Auto)
  • No Success/Cancel URLs: Stripe handles post-purchase flow. Payment confirmation is via email

Next Steps

Quantity Selector

Let customers choose a quantity before checkout.

Testing

Test your payment flow before going live.

On this page

Top-Level PropertiesButton Styling GroupText & TypographySizingColorsHover StateSpinnerAxle Form GroupForm ModeForm Display (Only visible when Axle Form = Yes)Form SubmissionForm FieldsFooterCustom Form Fields ArrayTerms & ConditionsForm StylingSizingContainerLabelsInput FieldsInput Focus StateInput Error StateStepper StylingHeader StylingProperty Summary by Use CaseMinimal Setup (Direct Checkout)Simple Form with Custom FieldsComplex CheckoutNotesNext Steps