TypeScript
Type-level conventions and exported types in @easylabs/react.
@easylabs/react is written in TypeScript and ships with full .d.ts declarations. The package is built against TypeScript 5.9 with strict: true; consumer projects on TypeScript 5.0+ should work without configuration changes.
Every type from @easylabs/common and every element type from @basis-theory/react-elements is re-exported from the package root, so you almost never need to import from anywhere else.
Public types
Provider configuration
| Type | Description |
|---|---|
ClientOptions | Optional apiKey field; convenience type for wrapping the SDK in your own provider. |
Customers
| Type | Description |
|---|---|
CreateCustomer | Body for createCustomer and customer_details in checkout. |
CustomerData | Customer record returned by getCustomer. |
Address | Postal address used by customers and card AVS. |
Payment instruments
| Type | Description |
|---|---|
CreatePaymentInstrumentParams | Discriminated union for createPaymentInstrument (PAYMENT_CARD or BANK_ACCOUNT). Card variants accept either a single cardElement ref or the split trio. |
CreatePaymentInstrumentTokenParams | Bare-tokenization variant for tokenizePaymentInstrument. |
CreatePaymentInstrument | Server-shaped payload (used internally; you usually want CreatePaymentInstrumentParams). |
PaymentInstrumentData | Returned instrument record. |
FinixPaymentInstrumentData | Returned shape from createPaymentInstrument (Finix-backed). |
AccountType | "PERSONAL_CHECKING" | "BUSINESS_CHECKING" | "PERSONAL_SAVINGS" | "BUSINESS_SAVINGS". |
Element refs
Re-exported from @basis-theory/react-elements:
| Type | Use with |
|---|---|
ICardElement | <CardElement ref={...} /> |
ICardNumberElement | <CardNumberElement ref={...} /> |
ICardExpirationDateElement | <CardExpirationDateElement ref={...} /> |
ICardVerificationCodeElement | <CardVerificationCodeElement ref={...} /> |
ITextElement | <TextElement ref={...} /> (routing / account numbers) |
Products, prices, subscriptions, transfers
CreateProduct, ProductData, CreatePrice, PriceData, IntervalType,
CreateSubscription, SubscriptionData, CreateTransfer, TransferData, OrderData — direct shapes for the matching API endpoints.
Checkout and embedded checkout
| Type | Description |
|---|---|
CreateCheckoutSession | Server-side checkout body. |
CreateEmbeddedCheckoutSession | Body for createEmbeddedCheckoutSession. |
EmbeddedCheckoutSessionData | Response containing client_secret, url, amount_total, currency, expires_at. |
EmbeddedCheckoutSessionStatus | Returned by getEmbeddedCheckoutSession. |
API envelope
| Type | Description |
|---|---|
ApiResponse<T> | { success: boolean; message?: string; data: T }. Returned by every direct API method on useEasy(). data is always present; success is a plain boolean flag and is not a TypeScript discriminant — checking it does not narrow the type of data away. Treat success === false as a server-reported failure (read message for context) and any thrown error as a network or tokenization failure. |
To pull the type of a specific useEasy() method, infer it from the hook:
import { useEasy } from "@easylabs/react";
type CheckoutArgs = Parameters<ReturnType<typeof useEasy>["checkout"]>[0];
type CheckoutResult = Awaited<ReturnType<ReturnType<typeof useEasy>["checkout"]>>;Module augmentation
@easylabs/react does not declare any global JSX or framework augmentations, so there's nothing to extend. Element refs use the underlying Basis Theory interfaces — extend those through @basis-theory/react-elements if you need to add typed events.
If you wrap the SDK in your own provider or hook (common for mocking in tests), use ClientOptions and the existing types directly rather than augmenting module declarations.