> ## Documentation Index
> Fetch the complete documentation index at: https://www.marqeta.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# About UX Toolkit

> UX Toolkit empowers you to customize UI components that enable your cardholders to learn about, take action on, and enjoy their card and account securely.

UX Toolkit empowers you to build sleek, intuitive interfaces for your applications quickly—it enables secure card activities in your application while limiting your data security compliance burden. UX Toolkit provides a library of highly customizable UI components built on top of Marqeta’s proven API capabilities.

By integrating Marqeta’s UI components, you can build a responsive cardholder-facing UI with minimal development effort that includes features enabling your cardholders to manage their cards, as well as view their account balance and recent transaction history.

<Frame>
  <img src="https://mintcdn.com/marqeta-b295cded/TxQgVKoSBbsxuEcD/images/docs/developer-guides/about-ux-toolkit/uxt-transactions-component-hero.png?fit=max&auto=format&n=TxQgVKoSBbsxuEcD&q=85&s=731131c35b10d3b9f5bcb0f04a036fb4" alt="UX Toolkit transactions component" width="1720" height="910" data-path="images/docs/developer-guides/about-ux-toolkit/uxt-transactions-component-hero.png" />
</Frame>

<h2 id="_why_build_with_ux_toolkit">
  Why build with UX Toolkit?
</h2>

* Low-code implementation cuts down on development time and helps you launch a branded, embedded program more quickly.

* Fully compliant, accessible UI components that meet industry standards for compliance, security, fraud prevention, and accessibility. In addition, these components have undergone thorough legal, banking, and card network reviews, ensuring they meet the necessary standards for financial transactions.

* Rich customer branding enables you to customize your program’s look-and-feel to align with your brand language.

* Create, test, and manage your brand’s unique theme in real-time for a consistent cardholder experience.

* The UX Toolkit web components are platform-agnostic, meaning they can be seamlessly integrated into any technology stack you plan to use for your application.

<Warning>
  **Important**\
  This version of UX Toolkit supports prepaid and debit card programs in the United States, Canada, and the EU.
</Warning>

<h2 id="_features">
  Features
</h2>

Depending on your application, you can include any or all of the following UI components.

[Manage cards](/developer-guides/uxt-web-components/#_card_management_components) via these common cardholder operations:

* Activate card

* Select a card from a list

* Set and manage PIN

* Reveal PIN

* View and copy card details

* Lock/unlock card

* Report a card as lost or stolen

* Replace a damaged card

* Add a card to a mobile wallet (future development)

[Display an account balance](/developer-guides/uxt-web-components/#_account_component) and show your cardholders the details of their accounts:

* View account balance

* View deposit account details

* Download statements

View a list of [recent transactions](/developer-guides/uxt-web-components/#_transaction_component):

* Filter transactions

* View details of a transaction that is being disputed

[Fund an account](/developer-guides/uxt-web-components/#_account_funding_money_movement_components) from linked external accounts:

* View, link, and manage external funding sources

* Pull funds from a linked funding source to your cardholder’s account

File a [dispute](/developer-guides/uxt-web-components/#_file_dispute_component) on a settled transaction:

* Fraud

* Consumer disputes

* Processing disputes

[Onboard](/developer-guides/uxt-web-components/#_onboarding_form) users to the Marqeta platform:

* Create a user account on the Marqeta platform

* Perform basic KYC identity verification

<h2 id="_concepts">
  Concepts
</h2>

<h3 id="_data_security_compliance">
  Data security compliance
</h3>

Companies that store, transmit, or process sensitive card data, including the primary account number (PAN), card verification value (CVV2), expiration date, and personal identification number (PIN) must comply with the Payment Card Industry Data Security Standard (PCI DSS). Achieving PCI DSS certification is both time consuming and expensive.

UX Toolkit offloads some of the PCI compliance burden (for certain use cases) by enabling the encrypted transmission of sensitive card data. Marqeta is fully PCI-Service Provider Level 1 compliant and handles the unencrypted sensitive card data for you. Your servers never store, transmit, or process the card data.

<Danger>
  **Warning**\
  Card data is less secure when copied to the clipboard than when left in a PCI-compliant component. Cardholders should adopt data security best practices and take precautions to keep their sensitive data safe.
</Danger>

<h3 id="_dynamic_card_data_iframes">
  Dynamic card data iframes
</h3>

The iframes injected by UX Toolkit enable you to control the styling and layout of the HTML pages you serve to client applications, while delegating secure handling of sensitive data to Marqeta servers. You create and style the UI components using [Studio](https://studio.ux-toolkit.marqeta.com), and UX Toolkit inserts the customized components into the page locations specified in your application’s HTML.

<Tip>
  **Tip**\
  To display virtual cards within a mobile application, you can embed the iframes using a webview.
</Tip>

<h2 id="_ux_toolkit_platform_overview">
  UX Toolkit platform overview
</h2>

The following process describes how the UX Toolkit components are injected into your application using native web components and iframes.

<Frame>
  <img src="https://mintcdn.com/marqeta-b295cded/TxQgVKoSBbsxuEcD/images/docs/developer-guides/about-ux-toolkit/uxt-platform-overview-flow.svg?fit=max&auto=format&n=TxQgVKoSBbsxuEcD&q=85&s=13fc8680f2a4d24f7164e9a784e2ba40" alt="How UX Toolkit injects iframes into your application" width="1720" height="1571" data-path="images/docs/developer-guides/about-ux-toolkit/uxt-platform-overview-flow.svg" />
</Frame>

<Steps>
  <Step>
    Your cardholder logs in to your application.
  </Step>

  <Step>
    Your application renders the page and calls the `bootstrap()` function, while passing in your Customer Authentication API URL.
  </Step>

  <Step>
    Your backend and Marqeta’s OAuth endpoint use the Demonstrating Proof of Possession (DPoP)-based OAuth flow. At the end of this flow, your Customer Authentication API sends the resulting access token back to the UX Toolkit client.
  </Step>

  <Step>
    The UI component requests account user and program data from the Marqeta platform.
  </Step>

  <Step>
    The account user and program data is fetched, validated, and returned by the Marqeta platform.
  </Step>

  <Step>
    The UI component makes a request to the Marqeta platform via the iframe endpoint for the PCI data associated with the specific account.
  </Step>

  <Step>
    The Marqeta platform injects the account data into the HTML container.
  </Step>

  <Step>
    Your application securely displays the requested PCI data in an iframe.
  </Step>
</Steps>

For step-by-step instructions on how to set up UX Toolkit, including a tutorial, see [UX Toolkit Getting Started](/developer-guides/uxt-getting-started/).

<h2 id="_studio_environment">
  Studio environment
</h2>

[Studio](https://studio.ux-toolkit.marqeta.com) is an interactive theming environment where you are encouraged to explore, customize, and gain a comprehensive understanding of how to leverage UX Toolkit properties such as colors and font size in your application’s components. Studio enables you to interact hands-on with each component in a secure sandbox environment, experimenting with various configurations and functionalities.

The various configuration values you develop using Studio are collectively referred to as a *theme*. Once you have finalized your application’s theme and behaviors using the Studio environment, you use a Marqeta endpoint `POST /theme` to upload it to the Marqeta platform for use with your card program. For details on how to use this endpoint, see its [API reference](/core-api/uxt-sdk/#post_theme_by_name) page.

<h2 id="_api_endpoints_for_interacting_with_marqeta">
  API endpoints for interacting with Marqeta
</h2>

Marqeta API endpoints are available for authenticating with the Marqeta platform and for uploading your application’s theme to Marqeta, once you have finalized it in [Studio](https://studio.ux-toolkit.marqeta.com).

For more information about how to use these endpoints, including sample request and response bodies, refer to the API reference documentation for [Authentication](/core-api/uxt-sdk/#_generate_ux_toolkit_oauth_access_token) and [Uploading a Studio Theme](/core-api/uxt-sdk/#post_theme_by_name).

For details on how to authenticate, see the [Authentication workflow](/developer-guides/uxt-getting-started/#_authentication_workflow) section of [UX Toolkit Getting Started](/developer-guides/uxt-getting-started/).