Hooks

Solid hooks for checkout state, field management, and payment submission.

Hook	Returns
`useField(type, options?)`	Field state accessors plus `setValue`, `validate`, and `setState`.
`useAttemptPayment()`	`() => void` payment submission function.
`useIsSubmittable()`	`Accessor<boolean>`.
`useSubmitState()`	`{ loading: Accessor<boolean>; success: Accessor<boolean> }`.
`usePaymentError()`	`Accessor<string \| null>`.
`useSelectedPaymentMethod()`	`Accessor<PaymentMethodType>`.
`useSetSelectedPaymentMethod()`	`(method: PaymentMethodType) => void`.
`useCheckoutSession()`	`Accessor<CheckoutSession \| undefined>`.
`useClientSecret()`	`Accessor<string>`.
`useOnComplete(callback)`	Registers a completion callback and cleans it up when the component disposes.
`useFieldState()`	`Accessor<UnifiedFieldState>`.
`useBiasContext()`	Raw checkout context for advanced use cases.
`useThemeVariables(vars)`	CSS custom properties with the `--bias-` prefix.

import {
    useAttemptPayment,
    useIsSubmittable,
    usePaymentError,
    useSubmitState,
} from "@biaspay/solid";

function CustomSubmitButton() {
    const attemptPayment = useAttemptPayment();
    const isSubmittable = useIsSubmittable();
    const error = usePaymentError();
    const submit = useSubmitState();

    return (
        <>
            {error() && <div role="alert">{error()}</div>}
            <button disabled={!isSubmittable() || submit.loading()} onClick={attemptPayment}>
                Pay now
            </button>
        </>
    );
}

useField

useField manages a non-sensitive value field. state and value are accessors.

import { useField } from "@biaspay/solid";

function CustomPostalCode() {
    const postalCode = useField("postalCode");

    return (
        <input
            value={postalCode.value()}
            onInput={(event) => postalCode.setValue(event.currentTarget.value)}
        />
    );
}