# Custom integration with Elements

> Build a fully custom payments UI using VINR Elements — individual, embeddable UI components for cards, wallets, and more.

VINR Elements are individual, embeddable UI components that you compose into a checkout experience that looks and behaves exactly like your product. Unlike hosted Checkout, Elements give you full control over layout and flow while VINR handles the secure card input, tokenization, and payment method rendering.

## When to use Elements

Use Elements when you need:

- Full control over the checkout UI and layout
- A checkout that feels native to your app (not a redirect)
- Custom validation, multi-step flows, or non-standard UX

For a quicker integration without custom UI, see [Build a payments page](/docs/payments/payment-page).

## Pages in this section

- **[Quickstart guides](/docs/payments/elements/quickstart)** — Accept your first payment with Elements in minutes.
- **[Elements](/docs/payments/elements/vinr-elements)** — Available Elements and how to use them.
- **[Compare Checkout Sessions and PaymentIntents](/docs/payments/elements/compare-sessions-intents)** — Choose the right integration model.
- **[Design an advanced integration](/docs/payments/elements/design-advanced-integration)** — Architecture patterns for complex payment flows.
- **[Customize look and feel](/docs/payments/elements/customize-look-and-feel)** — Appearance API, themes, and per-element styling.
- **[Manage payment methods](/docs/payments/elements/manage-payment-methods)** — Control which methods render in your Elements form.
- **[Collect additional information](/docs/payments/elements/collect-additional-information)** — Address, phone, and custom fields alongside Elements.
- **[Build a subscriptions integration](/docs/payments/elements/subscriptions)** — Set up recurring billing with Elements.
- **[Dynamic updates](/docs/payments/elements/dynamic-updates)** — Update Element options in response to user input.
- **[Add discounts](/docs/payments/elements/add-discounts)** — Apply coupons and promotion codes in a custom flow.
- **[Collect taxes on your payments](/docs/payments/elements/collect-taxes)** — Integrate tax calculation into your Elements checkout.
- **[Collect surcharges](/docs/payments/elements/collect-surcharges)** — Add card surcharges or service fees to a payment.
- **[Redeem credits](/docs/payments/elements/redeem-credits)** — Apply customer credits or store balance at checkout.