Skip to main content
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.

​
Authentication Endpoint

You will need to implement an Authentication API. 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. Embedding the Toolkit in your webpage is as simple as adding: 
<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 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 (GET /card) and Fetch a Card (GET /card/{id}) endpoints as the card-token value. 
{
  "id": "card_zuhqnmz7e085",
  "external_id": "tprime_card_zuhqnmz7e085",
  ...
}
Pass the external_id value as card-token when initializing UX Toolkit components.