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

# Marqeta UX Toolkit

> Marqeta's [UX Toolkit](https://www.marqeta.com/docs/developer-guides/uxt-landing-page/) is the successor to the [Marqeta.js](https://www.marqeta.com/docs/developer-guides/using-marqeta-js) Javascript library. The UX Toolkit reduces some of the PCI compliance burden related to sensitive card info for companies.

<Warning>
  The Marqeta UX Toolkit is the successor to Marqeta.js. Marqeta.js was originally scheduled to sunset on April 1, 2026, but Marqeta is not enforcing that deadline — customers have until the end of 2026 to complete their migration. If you are currently using Marqeta.js, plan to migrate to the UX Toolkit as soon as possible.
</Warning>

### Authentication Endpoint

You will need to implement an [Authentication API](https://www.marqeta.com/docs/developer-guides/uxt-getting-started/#_set_up_your_api_url).
When the UX Toolkit is bootstrapped on your webpage it will need to be passed the URL of this endpoint as a parameter. The Toolkit SDK will
generate a Demonstrating Proof of Posession (DPoP) header as a short-lived JSON Web Token (JWT) and pass it to your endpoint.

* This endpoint must validate that the end user is authenticated in your systems
* Lookup the Treasury Prime person ID for the end user (e.g `psn_123456`)
* Send a request to the new Treasury Prime `/person/:id/uxt_access_token` endpoint (documented below)

### UX Toolkit Bootstrapping

Follow Marqeta's instructions on embedding and bootstrapping [here](https://www.marqeta.com/docs/developer-guides/uxt-getting-started/#_pass_your_endpoint_via_the_bootstrap_function).

Embedding the Toolkit in your webpage is as simple as adding:

```html theme={null}
<script type="module" src="https://web.ux-toolkit.marqeta.com/trprime/releases/1/index.js" async crossorigin="require-credentials"></script>
```

to your HTML.

NOTE: this includes a reference to the Treasury Prime specific release `tprime`.

### Treasury Prime Endpoint

Treasury Prime will manage the RSA key generation and secret passing on your behalf within the new `/person/:id/uxt_access_token` endpoint.
The endpoint must receive the DPoP header Marqeta passed you via your Authentication Endpoint as a string parameter.
On a successful authentication Treasury Prime will send back a response containing an `access_token` that must be sent back to the UX Toolkit client.

See the API endpoint [documentation](/reference/marqeta_uxtoolkit) for an OpenAPI schema.

### Getting the card token

UX Toolkit components require a `card-token` parameter to identify which card to display. Use the `external_id` field returned by the Treasury Prime [List Cards](/reference/get_card) (`GET /card`) and [Fetch a Card](/reference/get_card-id) (`GET /card/{id}`) endpoints as the `card-token` value.

```json theme={null}
{
  "id": "card_zuhqnmz7e085",
  "external_id": "tprime_card_zuhqnmz7e085",
  ...
}
```

Pass the `external_id` value as `card-token` when initializing UX Toolkit components.