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. All information is displayed through an iframe and protected from programmatic access.

Note: To use the issued card drop, Moov support must first enable the issued-cards.read-secure scope for your account. When contacting Moov support, select submit a support ticket for card issuing issues.

Visit our 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.

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

1
2
const issuedCard = document.querySelector('moov-issued-card');
issuedCard.oauthToken = 'eyjh...';
1
2
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 support and select submit a support ticket for card issuing issue.

Theming

Visit our guide on themes to learn how to re-style Moov Drops.