> ## Documentation Index
> Fetch the complete documentation index at: https://docs.whop.com/llms.txt
> Use this file to discover all available pages before exploring further.
# CardNumberElement
> PCI-isolated hosted card number field. Card numbers never reach the host page.
This page documents `@whop/elements@1.0.0` and `@whop/elements-react@1.0.0`.
*Since `v1.0.0`.*
Mounts inside [`CardFields`](/elements/latest/payments/cardFields), in [`Payments`](/elements/latest/payments/overview). Pass props and callbacks through the create options or React props.
Goes inside a [`WhopCardFields`](/elements/latest/payments/cardFields#swift) builder. The hosted card-number input, with the brand mark on its trailing edge.
Mounts inside [`CardFields`](/elements/latest/payments/cardFields). The card number on its own, so your layout decides where it sits.
```tsx React theme={null}
import { WhopElements, Payments, CardFields, CardNumberElement } from "@whop/elements-react";
import { loadWhop } from "@whop/elements";
function Example() {
return (
);
}
```
```tsx React Native theme={null}
import { CardFields, CardNumberElement } from '@whop/elements-react-native';
```
```html JavaScript theme={null}
```
```swift Swift theme={null}
import Elements
import SwiftUI
// .whopElements(environment:) runs once at the app root. See Getting started.
struct CheckoutScreen: View {
var body: some View {
WhopPayments(accountID: "biz_xxxx", charge: .plan(id: "plan_xxxx")) { payments in
ScrollView {
VStack(alignment: .leading, spacing: 20) {
WhopCardFields {
WhopCardNumberElement()
WhopCardExpiryElement()
WhopCardCVCElement()
}
WhopBrandingElement()
}
.padding()
}
}
}
}
```
Example data. [Open the Playground](/elements/latest/payments/overview#playground).
## Props
*This element takes no consumer props.*
## Events
Pass callbacks in the create options or React props.
### `onLoaderStart`
Runs after the loading skeleton first paints and before `onReady`.
**Signature:** `(() => void)`
### `onReady`
Runs after the element's first complete paint.
**Signature:** `(() => void)`
### `onError`
Runs when the element fails to load or crashes. The fallback remains visible. Use `code` for programmatic handling. `sourceKey` identifies a failed host-state source.
**Signature:** `((e: { message: string; code?: string | undefined; sourceKey?: string | undefined; }) => void)`
## Methods
Call these on the handle returned by `create`, or through a React `ref`.
### `mount`
Mounts the element in `target` and starts loading. React components mount themselves.
**Signature:** `(target: string | HTMLElement) => void`
### `destroy`
Removes the element and releases its frame and subscriptions. You can call it more than once. React removes the element automatically.
**Signature:** `() => void`
### `update`
Merges new props into the mounted element. In React, change the component props instead.
**Signature:** `(options: Partial
) => void`
## Styling
Style these parts through `appearance.classes`. Use camel case or kebab case for property names and include units. Page stylesheets can't reach the element's frame. The framework validates each declaration before injecting it.
| Class | Targets |
| ----------------------------- | ----------------------------------------------- |
| `.whop-CardField` | Card number, expiration, or security code field |
| `.whop-CardFieldError` | Card validation message |
| `.whop-CardFieldInput` | Bordered PCI input container |
| `.whop-CardFieldInputFocused` | Focused PCI input container |
| `.whop-CardFieldInputInvalid` | Invalid or incomplete PCI input container |
```ts theme={null}
const payments = whop.payments.create({
appearance: {
classes: {
'whop-CardField': { borderRadius: '8px', fontWeight: '600' },
'whop-CardFieldError': { borderRadius: '8px', fontWeight: '600' },
'whop-CardFieldInput': { borderRadius: '8px', fontWeight: '600' }
}
}
});
// 5 classes use this shape
payments.update({
appearance: { classes: { 'whop-CardField': { fontWeight: '700' } } }
});
```
In React, pass `appearance` to ``. Set it globally with `WhopElements({ appearance })`.
## States
Renders immediately. The brand mark appears once the number identifies a network. An invalid number shows its error under the field.
## Good to know
* Outside a `WhopCardFields` builder it renders nothing: it reads the card unit that builder creates.
## Install
```swift theme={null}
dependencies: [
.package(url: "https://github.com/whopio/elements-swift.git", from: "0.1.0")
]
```
Mount it inside a `WhopPayments(accountID:charge:)` scope, which creates the controller and hands it to its content. `payments.buyer` is the signed-in buyer once an email sign-in has proven one. `WhopBrandingElement` has to be on screen too, because Whop is merchant of record on these sales and `createConfirmationToken` refuses without it. Style with `.whopElementsAppearance(_:)`. The module is `Elements`, not the wallet SDK's `WhopElements`. See [Getting started](/elements/latest/getting-started) and [Appearance](/elements/latest/appearance).
## Props
Applied to the element's outer `View`. For theming, prefer `appearance.parts` on the provider, which covers every element on this surface. Note the React Native part names are their own set today, not the web's `whop-*` class names, so a web appearance object does not port across unchanged.
## States
Renders as soon as its `CardFields` provider has a publishable key. Its validation message renders beneath it.
## Good to know
* Card numbers never pass through your code. The fields are PCI-isolated native inputs, and the SDK hands Whop a token, so your app stays out of PCI scope.
* Read completeness from the `CardFields` provider's `onChange` rather than per field.
Wrap your app in `` once, then mount `` around the elements. See [Getting started](/elements/latest/getting-started) and [Appearance](/elements/latest/appearance).