Skip to main content

​
TipSelector

Need an API key?

Get one from Crave Dashboard > Developers > API Development > Step 1 - API Keys. Copy the matching locationId from Step 2 - Location IDs on the same page.
Allows customers to select a tip amount from preset percentages or enter a custom amount. Displays the calculated tip based on the order subtotal.

​
Preview

​
Import

​
Usage

​
Props

​
number
required
Order subtotal used to calculate percentage-based tips.
​
number
required
The currently selected tip amount in cents.
​
(amount: number) => void
required
Callback fired when the tip selection changes.
​
number[]
default:"[15, 18, 20, 25]"
Array of percentage presets to display as quick-select buttons.

​
Behavior

  • Preset percentage buttons with calculated dollar amounts
  • “Custom” option reveals a numeric input
  • “No tip” option to explicitly set tip to $0
  • Active preset is highlighted with primary accent