Why build with UX Toolkit?
- 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.
Features
Depending on your application, you can include any or all of the following UI components. Manage cards 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)
- View account balance
- View deposit account details
- Download statements
- Filter transactions
- View details of a transaction that is being disputed
- View, link, and manage external funding sources
- Pull funds from a linked funding source to your cardholder’s account
- Fraud
- Consumer disputes
- Processing disputes
- Create a user account on the Marqeta platform
- Perform basic KYC identity verification
Concepts
Data security compliance
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.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.
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.
Dynamic card data iframes
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, and UX Toolkit inserts the customized components into the page locations specified in your application’s HTML.UX Toolkit platform overview
The following process describes how the UX Toolkit components are injected into your application using native web components and iframes.
Your application renders the page and calls the
bootstrap() function, while passing in your Customer Authentication API URL.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.
The UI component makes a request to the Marqeta platform via the iframe endpoint for the PCI data associated with the specific account.
Studio environment
Studio 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 endpointPOST /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 page.