# Issued Card Drop

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](https://docs.moov.io/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.

## Ask

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

Visit our [Drops 101](https://docs.moov.io/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 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

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

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

## 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

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

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