> ## 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.
# BrandingElement
> Whop's merchant-of-record notice: the Whop wordmark with links to the buyer terms and privacy policy. Mount it alongside every payment collection surface.
This page documents `@whop/elements@1.0.0` and `@whop/elements-react@1.0.0`.
*Since `v1.0.0`.*
Mounts inside [`Payments`](/elements/latest/payments/overview). Pass props and callbacks through the create options or React props.
Mounts inside a `WhopPayments` scope. The merchant-of-record line every payment surface has to carry, with the Whop wordmark drawn as a path.
Mount inside `
`, which owns the charge and the confirmation token. `` itself mounts inside ``. Required on every form that collects: `createConfirmationToken` refuses while none is mounted, and it themes with the rest of your form.
```tsx React theme={null}
import { WhopElements, Payments, BrandingElement } from "@whop/elements-react";
import { loadWhop } from "@whop/elements";
function Example() {
return (
);
}
```
```tsx React Native theme={null}
import { BrandingElement, Payments } from '@whop/elements-react-native';
{/* your form */}
```
```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) {
WhopPaymentElement()
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
This element doesn't expose class names for styling. Use `appearance` (theme, accent color, variables) to restyle it.
## States
Renders immediately. It fetches nothing and has no failure state.
## Good to know
* **`createConfirmationToken` refuses while it is unmounted.** Whop is merchant of record on these sales, so the buyer has to be told so on the screen where they pay.
* The wordmark is a vector path, not an asset, so the framework carries no image bundle.
## 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.
Rendered instead of the built-in skeleton while the element loads.
Fires once the element is interactive. `` groups these, so its own `onLoadingChange` is usually the one you want.
A load or configuration failure for this element. The element renders its own error face either way.
## States
Renders immediately. It has no data to load and no states of its own.
## Good to know
* Required. `createConfirmationToken` refuses with a `BrandingRequiredError` while no `BrandingElement` is mounted, exactly as the web elements hold their reveal until branding attaches.
* Mount it once anywhere inside `
`, typically under your submit button.
* The wordmark follows the resolved theme's light or dark appearance on its own.
Wrap your app in `` once, then mount `` around the elements. See [Getting started](/elements/latest/getting-started) and [Appearance](/elements/latest/appearance).