{
e.stopPropagation();
onCopyLink(property.name);
}} role="button" tabIndex={0} aria-label={`Copy link to ${property.name} property`} onKeyDown={e => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
e.stopPropagation();
onCopyLink(property.name);
}
}} />
onToggle(property.name)} role="button" tabIndex={0} aria-label={`${isOpen ? 'Collapse' : 'Expand'} ${property.name} property`} onKeyDown={e => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
onToggle(property.name);
}
}} />
onToggle(property.name)} aria-expanded={isOpen} type="button" className="property-label-button" aria-label={`${isOpen ? 'Collapse' : 'Expand'} ${property.label}`}>
{property.label}
{property.name} {
e.stopPropagation();
onSetVisibleJson(property.name);
}} className={`view-json-button ${isHighlighted ? 'selected' : ''}`} type="button" aria-expanded={visibleJson[property.name] || false} style={{
marginLeft: 'auto'
}}>
}
{isOpen &&
onSetHovered(property.name)} onMouseLeave={() => onSetHovered(null)}>
Data type: {formatDataType(property.type)}
Display type:
{fieldTypeLabel}
{property.description}
{property.options?.length > 0 &&
}
{property.json && visibleJson[property.name] &&
{JSON.stringify(property.json, null, 2)}
}
}
;
};
export const OptionsList = ({options}) => {
const list =
{options.map((option, idx) => {option.label} ({option.value}) )}
;
return options.length > 10 ?
{list} : list;
};
export const DefaultPropertyListing = ({data, placeholder = 'Search properties'}) => {
const FIELD_TYPE_LABELS = {
text: 'Single-line text',
textarea: 'Multi-line text',
phonenumber: 'Phone number',
booleancheckbox: 'Single checkbox',
checkbox: 'Multiple checkboxes',
select: 'Dropdown select',
radio: 'Radio select',
date: 'Date picker',
datetime: 'Date and time picker',
number: 'Number',
calculation_equation: 'Equation',
calculation_rollup: 'Rollup'
};
const formatDataType = type => {
const formatted = type.replace(/_/g, ' ');
return formatted.charAt(0).toUpperCase() + formatted.slice(1);
};
const properties = data?.properties || [];
const [mounted, setMounted] = useState(false);
const [searchTerm, setSearchTerm] = useState('');
const [debouncedSearchTerm, setDebouncedSearchTerm] = useState('');
const [openStates, setOpenStates] = useState({});
const [selectedType, setSelectedType] = useState('all');
const [selectedFieldType, setSelectedFieldType] = useState('all');
const [activeDropdown, setActiveDropdown] = useState(null);
const [selectedProperty, setSelectedProperty] = useState(null);
const [hoveredProperty, setHoveredProperty] = useState(null);
const [visibleJson, setVisibleJson] = useState({});
const listRef = useRef(null);
const allExpanded = properties.every(p => openStates[p.name] !== false);
useEffect(() => setMounted(true), []);
useEffect(() => {
if (!mounted || !window.location.hash) return;
const targetId = window.location.hash.substring(1);
setTimeout(() => {
const el = document.getElementById(targetId);
if (el) {
el.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
setSelectedProperty(targetId);
}
}, 100);
}, [mounted]);
useEffect(() => {
if (!mounted) return;
const timer = setTimeout(() => setDebouncedSearchTerm(searchTerm), 300);
return () => clearTimeout(timer);
}, [searchTerm, mounted]);
useEffect(() => {
if (!mounted) return;
const handleClickOutside = e => {
if (!e.target.closest('.dropdown')) setActiveDropdown(null);
};
document.addEventListener('click', handleClickOutside);
return () => document.removeEventListener('click', handleClickOutside);
}, [mounted]);
const availableTypes = useMemo(() => [...new Set(properties.filter(p => selectedFieldType === 'all' || FIELD_TYPE_LABELS[p.fieldType] === selectedFieldType).map(p => p.type).filter(Boolean))].sort(), [properties, selectedFieldType]);
const availableFieldTypes = useMemo(() => [...new Set(properties.filter(p => selectedType === 'all' || p.type === selectedType).map(p => FIELD_TYPE_LABELS[p.fieldType]).filter(Boolean))].sort(), [properties, selectedType]);
const filteredProperties = useMemo(() => {
if (!mounted) return [];
const searchLower = debouncedSearchTerm.toLowerCase();
return properties.filter(prop => {
const matchesSearch = !debouncedSearchTerm || (prop.name?.toLowerCase().includes(searchLower) || prop.label?.toLowerCase().includes(searchLower) || prop.description?.toLowerCase().includes(searchLower));
const matchesType = selectedType === 'all' || prop.type === selectedType;
const matchesFieldType = selectedFieldType === 'all' || FIELD_TYPE_LABELS[prop.fieldType] === selectedFieldType;
return matchesSearch && matchesType && matchesFieldType;
});
}, [properties, debouncedSearchTerm, selectedType, selectedFieldType, mounted]);
const toggleProperty = useCallback(name => {
setOpenStates(prev => ({
...prev,
[name]: prev[name] !== false ? false : true
}));
}, []);
const toggleAllProperties = useCallback(() => {
const expand = !allExpanded;
setOpenStates(Object.fromEntries(properties.map(p => [p.name, expand])));
}, [allExpanded, properties]);
const copyAnchorLink = useCallback(async propertyName => {
const url = `${window.location.origin}${window.location.pathname}#${propertyName}`;
setSelectedProperty(propertyName);
try {
await navigator.clipboard.writeText(url);
const el = document.getElementById(propertyName);
if (el) {
const container = listRef.current;
if (container) {
const scrollOffset = el.getBoundingClientRect().top - container.getBoundingClientRect().top + container.scrollTop - 20;
container.scrollTo({
top: scrollOffset,
behavior: 'smooth'
});
}
setTimeout(() => el.focus({
preventScroll: true
}), 500);
}
history.replaceState(null, null, `#${propertyName}`);
} catch {}
}, []);
const handleSetVisibleJson = useCallback(name => {
setVisibleJson(prev => ({
...prev,
[name]: !prev[name]
}));
}, []);
if (!mounted) return null;
return
setActiveDropdown(isOpen ? 'type' : null)} onChange={v => setSelectedType(v)} allLabel="All data types" options={availableTypes.map(type => ({
value: type,
label: formatDataType(type)
}))} buttonStyle="link" />
setActiveDropdown(isOpen ? 'fieldType' : null)} onChange={v => setSelectedFieldType(v)} allLabel="All display types" options={availableFieldTypes.map(ft => ({
value: ft,
label: ft
}))} buttonStyle="link" />
{allExpanded ? 'Collapse all' : 'Expand all'}
{filteredProperties.length > 0 ? filteredProperties.map(property => ) :
{!debouncedSearchTerm.trim() && (selectedType !== 'all' || selectedFieldType !== 'all') ? 'No properties found matching the selected filters.' : `No properties found matching "${searchTerm}"`}
}
;
};
export const ObjectDefinitionCard = ({objectName, singularName, pluralName, objectId, fullyQualifiedName, allowsCustomProperties, allowsSensitiveProperties, hasPipelines, description, requiredProperties = [], searchableProperties = [], primaryDisplayProperty, secondaryDisplayProperties = [], children}) => {
const AttributeLabel = ({icon, tooltip, cta, href, label}) => {
const tooltipProps = {
tip: tooltip
};
if (cta) tooltipProps.cta = cta;
if (href) tooltipProps.href = href;
return
{icon}
{label}
;
};
const normalizeProperty = prop => {
if (typeof prop === 'string') {
return {
label: prop,
name: prop
};
}
return prop;
};
const PropertyTable = ({properties}) => {
const propsArray = Array.isArray(properties) ? properties : [properties];
const filteredProps = propsArray.filter(prop => {
if (typeof prop === 'string') return prop.trim().length > 0;
if (typeof prop === 'object' && prop !== null) {
return prop.label || prop.name;
}
return false;
});
const handlePropertyClick = (e, propertyName) => {
e.preventDefault();
const targetElement = document.getElementById(propertyName);
if (targetElement) {
targetElement.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
window.location.hash = propertyName;
setTimeout(() => {
targetElement.focus({
preventScroll: true
});
}, 500);
} else {
window.location.hash = propertyName;
const checkAndScroll = (attempts = 0, maxAttempts = 20) => {
const element = document.getElementById(propertyName);
if (element) {
setTimeout(() => {
element.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
setTimeout(() => {
element.focus({
preventScroll: true
});
}, 500);
}, 150);
} else if (attempts < maxAttempts) {
setTimeout(() => checkAndScroll(attempts + 1, maxAttempts), 100);
}
};
setTimeout(() => checkAndScroll(), 100);
}
};
if (filteredProps.length === 0) return null;
return
;
};
return
{objectName}
{description}
Object ID:
{objectId}
Fully qualified name (FQN):
{fullyQualifiedName}
Features
{hasPipelines !== undefined &&
{hasPipelines ? {hasPipelines ? 'Has' : "Doesn't have"} pipelines
}
{allowsCustomProperties ? {allowsCustomProperties ? 'Allows' : "Doesn't allow"} custom properties
{allowsSensitiveProperties ? {allowsSensitiveProperties ? 'Allows' : "Doesn't allow"} sensitive properties
Key properties
{requiredProperties.length > 0 ?
: 'None'}
{secondaryDisplayProperties.length > 0 ?
: 'None'}
{searchableProperties.length > 0 ?
: 'None'}
{children}
;
};
Below are the available default properties that can be set for each payment. To retrieve the complete list of commerce payment properties available in your specific account, including any custom properties, make a `GET` request to `/crm/properties/2026-03/commerce_payments`. See the [Properties API documentation](/api-reference/latest/crm/properties/guide) for full details.
Note that your account's available properties may vary based on:
* Your HubSpot subscription level and enabled features.
* Custom properties added by your organization.
* Account age (older accounts may have slightly different property variations).