Component prop validation
Understand how Stripe validates UI component props at runtime.
Stripe validates each UI component’s props at runtime. The schema defines the available props and their accepted values.
Validation behavior
When you preview your app in development mode, an invalid prop throws an error and stops the affected view from rendering. The error identifies the component, prop, expected value, and received value.
In production, Stripe silently removes invalid props before rendering the component. Valid props continue to render, but the component might use a default value or render differently. If a nested value is invalid, Stripe removes the entire top-level prop.
Read a validation error
Passing type="success" to a Badge gives you the following error:
Error in extension: <your-extension-id>
An error occurred while rendering the X view.
Error: Invalid prop 'type' in 'Badge' component.
Expected: "neutral" | "urgent" | "warning" | "negative" | "positive" | "info"
Received: "success"
Some errors add an Info line that explains the constraint, such as Info: This prop is required. Read that line first, then compare the error with the affected component’s prop reference.
Fix validation errors
Use the Expected line to determine the fix.
| Error | Fix |
|---|---|
Expected: defined | Add the required prop. |
Expected: string, number, boolean, object, or array | Pass the expected data type. Don’t rely on automatic type conversion. |
Expected: "value-a" | "value-b" | Use one of the listed values exactly. |
Expected: valid value | Check the prop reference for accepted values and other constraints. |