> ## 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, which is planned for deprecation later this year. If you are currently using Marqeta.js, plan to migrate to the UX Toolkit before the deprecation date.
</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 boostrapping [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.