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.
1
<moov-issued-card></moov-issued-card>

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.

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

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

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

Summary Beta