BiasDocs

Hooks

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

BiasProvider

<BiasProvider>

Context provider that initializes the checkout store and makes all hooks available to child components.

Props

Name
clientSecret
Type
string,
Name
onComplete
Type
() => void,
Name
apiBaseUrl
Type
string,
Name
children
Type
ReactNode, 
import { BiasProvider } from "@biaspay/react";

<BiasProvider
    clientSecret="cs_test_..."
    onComplete={() => { /* redirect */ }}
>
    {/* checkout elements */}
</BiasProvider>

useField

useField(type, options?)

Manage a single value field. Returns the field state, current value, and setter functions.

Parameters

Name
type
Type
ValueFieldType,
Name
options
Type
object,
Properties

Returns

An object with:

  • state — ValueFieldStatus<T> with value, valid, error, focused
  • value — the current field value
  • setValue(value) — set the field value
  • validate() — trigger validation
  • setState(partial) — merge partial state
import { useField } from "@biaspay/react";

const { value, setValue, state } = useField("postalCode");

// With custom validation:
const { value, setValue } = useField("name", {
    validate: (value, { showRequired }) => {
        if (!value && showRequired)
            return { valid: false, error: "Required" };
        return { valid: true, error: null };
    },
});

useAttemptPayment

useAttemptPayment()

Returns

A () => void function that validates all fields and submits the payment if the form is valid.

import { useAttemptPayment } from "@biaspay/react";

const attemptPayment = useAttemptPayment();

useIsSubmittable

useIsSubmittable()

Returns

boolean — true when all required frame fields have encrypted data and all required value fields are valid.

import { useIsSubmittable } from "@biaspay/react";

const isSubmittable = useIsSubmittable();

useSubmitState

useSubmitState()

Returns

{ loading: boolean; success: boolean } — loading is true while the payment request is in flight. success is true after the payment succeeds.

import { useSubmitState } from "@biaspay/react";

const { loading, success } = useSubmitState();

usePaymentError

usePaymentError()

Returns

string | null — the payment error message, or null if there is no error.

import { usePaymentError } from "@biaspay/react";

const error = usePaymentError();

useSelectedPaymentMethod

useSelectedPaymentMethod()

Returns

PaymentMethodType — "card" or "us_bank_account".

import { useSelectedPaymentMethod } from "@biaspay/react";

const method = useSelectedPaymentMethod();

useSetSelectedPaymentMethod

useSetSelectedPaymentMethod()

Returns

(method: PaymentMethodType) => void — a function to change the selected payment method.

import { useSetSelectedPaymentMethod } from "@biaspay/react";

const setMethod = useSetSelectedPaymentMethod();
setMethod("us_bank_account");

useCheckoutSession

useCheckoutSession()

Returns

CheckoutSession | undefined — the current checkout session object. undefined until the session loads.

import { useCheckoutSession } from "@biaspay/react";

const session = useCheckoutSession();

useOnComplete

useOnComplete(callback)

Register a completion callback. Alternative to the onComplete prop on BiasProvider. The callback is cleaned up when the component unmounts.

Parameters

Name
callback
Type
() => void, 
import { useOnComplete } from "@biaspay/react";

useOnComplete(() => {
    console.log("Payment complete");
});

useClientSecret

useClientSecret()

Returns

string — the client secret passed to BiasProvider.

import { useClientSecret } from "@biaspay/react";

const clientSecret = useClientSecret();

useFieldState

useFieldState()

Returns

UnifiedFieldState — the current state of every field.

import { useFieldState } from "@biaspay/react";

const fieldState = useFieldState();
const cardValid = fieldState.cardNumber.valid;

useBiasContext

useBiasContext()

Access the raw Bias context. Intended for advanced use cases. Throws if called outside BiasProvider.

Returns

The internal BiasContextValue object with access to the store, subscriber, and snapshot.

import { useBiasContext } from "@biaspay/react";

const ctx = useBiasContext();

useThemeVariables

useThemeVariables(variables)

Convert a ThemeVariables object into a Record<string, string> of CSS custom properties suitable for a style attribute.

Parameters

Name
variables
Type
ThemeVariables | undefined,

Returns

Record<string, string> — CSS custom properties with --bias- prefix. Null/undefined values are filtered out.

import { useThemeVariables } from "@biaspay/react";

const style = useThemeVariables({
    colorPrimary: "#4f46e5",
    borderRadius: "8px",
});
// { "--bias-color-primary": "#4f46e5", "--bias-border-radius": "8px" }