# Issued card UI

The issued card Drop enables Moov customers to display a previously issued virtual card within a secure, Moov-hosted iframe.

With the `moov-issued-card` element, issued card information is displayed to the user and rendered directly by Moov. The issued card Drop interacts directly with the retrieve a spending card`GET` [endpoint](/api/money-movement/issuing/get/) using JWTs to securely send data between your end user's browser and Moov. All information is displayed through an iframe and protected from programmatic access.

Note: To use the issued card drop, [Moov support](https://support.moov.io/) must first enable the `issued-cards.read-secure` scope for your account.

```html
<moov-issued-card></moov-issued-card>
```

Visit our [Drops 101](/moovjs/drops/drops-101/) guide to learn the basics of properties, attributes, and initializing Drops. Note that the use of the issued card Drop requires a secure HTTPS connection.

Moov Drops require a secure HTTPS connection. If you don't have a test environment with HTTPS enabled, we suggest setting up a hosting environment with ngrok, Netlify, or Vercel.

## [Properties](#properties)

Properties can be accessed through JavaScript using a reference to the `moov-issued-card` element.

| Property       | Type   | Description                                                                                                                                                      |
|----------------|--------|------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `oauthToken`   | String | Auth Token used for hitting the API. Token must include the `accounts/{accountID}/issued-cards.read` and `accounts/{accountID}/issued-cards.read-secure` scopes. |
| `accountID`    | String | ID of the Moov account to which the card was issued.                                                                                                             |
| `issuedCardID` | String | ID of the issued card to display.                                                                                                                                |

### [How to set a property](#how-to-set-a-property)

[oauthToken](#tab-423679851-5-0) [accountID](#tab-423679851-5-1)

```js
const issuedCard = document.querySelector('moov-issued-card');
issuedCard.oauthToken = 'eyjh...';
```

```js
const issuedCard = document.querySelector('moov-issued-card');
issuedCard.accountID = "abc123-x...";
```

## [Attributes](#attributes)

String-type properties can be set via attributes on the HTML `<moov-issued-card>` element.

| Attribute        | Description                                                                                                                                                      |
|------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `oauth-token`    | Auth Token used for hitting the API. Token must include the `accounts/{accountID}/issued-cards.read` and `accounts/{accountID}/issued-cards.read-secure` scopes. |
| `account-id`     | ID of the Moov account to which the card was issued.                                                                                                             |
| `issued-card-id` | ID of the issued card to display.                                                                                                                                |

## [Scopes](#scopes)

To display an issued card, your Moov API token must include the following scopes:

- `accounts/{accountID}/issued-cards.read`
- `accounts/{accountID}/issued-cards.read-secure`*

\*The `issued-cards.read-secure` scope must be enabled by Moov support. If you're looking to use the issued card Drop but haven't had this scope enabled by a member of our team yet, [contact Moov](https://support.moov.io/).

## [Theming](#theming)

Read our [themes](/moovjs/drops/theming/) guide to learn how to re-style Moov Drops.