​

Variable: cards

const cards: object = cardsNamespace.cards

The cards namespace contains all the functions related to card operations. It can be accessed like this:

import { cards } from '@qonto/embed-sdk/cards';

Then, the cards object contains the functions to perform card operations:

await cards.displayCard(/* params here */);
await cards.getCards();
await cards.orderCard(/* params here */);
await cards.unlockCard(/* params here */);

​

Type declaration

​

displayCard()

displayCard: (cardConfig) => Promise<DisplayCardReturnObject>

Displays the UI in the calling page which allows the user to see card details.

​

Parameters

cardConfig

CardParams<DisplayCardSettings>

An object with the parameters to display the card. It requires a cardSettings object with the cardId property. If it was not provided when calling the SDK’s initialize function, an operationSettings object has to be passed too with the uiParentElementId property. This has to specify the ID of the DOM element where the UI for MFA will be displayed.

​

Returns

Promise<DisplayCardReturnObject>

A promise that resolves to an object with a destroyEmbedUI function. When calling this function, the UI will be removed from the DOM.

​

Throws

InvalidParametersError If the cardId is not provided or if the cardId is not a string.

​

Throws

InvalidParametersError If the uiParentElementId or operationSettings are not provided.

​

getCard()

getCard: (Object) => Promise<Card>

Fetches a card by its id.

​

Parameters

Object

An object with the cardId and the optional accessToken and stagingToken properties.

accessToken?

string

cardId

string

stagingToken?

string

​

Returns

Promise<Card>

A promise that resolves to a card.

​

Throws

If the access token is invalid or missing. Ensure initialize has been called before using this function if you are not passing the access token.

​

getCards()

getCards: (getCardsParams) => Promise<Card[]>

Fetches the list of cards for the current user.

​

Parameters

getCardsParams

An object with the optional membershipId, accessToken, and stagingToken properties. If the membershipId parameter is passed, the function will return the cards that belong to the specified membership only. If the accessToken is not provided, the function will use the token previously passed to the initialize function. The stagingToken is optional, but it has to be passed to use the SDK in staging environments (it will be ignored in production).

accessToken?

string

membershipId?

string

stagingToken?

string

​

Returns

Promise<Card[]>

A promise that resolves to an array of cards.

​

Throws

If the access token is invalid or missing. Ensure initialize has been called before using this function if you are not passing the access token.

​

orderCard()

orderCard: (cardConfig) => Promise<Card>

Requests the creation of a card by showing the user the UI to perform MFA in the calling page. It will show an element on the screen where users will be able to go through the MFA authentication process and upon successful authentication, will perform the ordering operation.

​

Parameters

cardConfig

CardParams<CardOrderSettings>

An object with the parameters to order the card. If it was not provided when calling the SDK’s initialize function, an operationSettings object has to be passed too with the uiParentElementId property. This has to specify the ID of the DOM element where the UI for MFA will be displayed.

​

Returns

Promise<Card>

A promise that resolves to an object representing the ordered card.

​

Throws

InvalidParametersError If the cardId is not provided or if the cardId is not a string.

​

Throws

InvalidParametersError If the uiParentElementId or operationSettings are not provided.

​

Examples

const cardConfig = {
  cardSettings: {
    categories: [
      'transport',
      'restaurant_and_bar',
      'food_and_grocery',
      'it_and_electronics',
      'utility',
      'tax',
      'legal_and_accounting',
      'atm', 'office_supply',
      'hardware_and_equipment',
      'finance'
    ],
    membershipId: 'membership-id',
    cardLevel: 'standard', // Other options are 'plus' or 'metal'
    cardDesign: 'standard.recycled.plastic.2023',
    typeOfPrint: 'print',
    hasAtmOption: true,
    hasNfcOption: true,
    onlineOption: true,
    foreignOption: true,
    monthlyLimit: 1300,
    atmMonthlyLimit: 1000,
    hasAtmDailyLimit: true,
    atmDailyLimit: 100,
    hasDailyLimit: true,
    dailyLimit: 100,
    paymentTransactionLimit: 1000,
    hasTransactionLimit: true,
    activeDays: [1, 2, 3, 4, 5], // From Monday to Friday
    shipToBusiness: true,
  },
  operationSettings: {
    uiParentElementId: 'dom-element-id',
  },
};
orderCard(cardConfig);

const cardConfig = {
  cardSettings: {
    categories: [
      'transport',
      'restaurant_and_bar',
      'food_and_grocery',
      'it_and_electronics',
      'utility',
      'tax',
      'legal_and_accounting',
      'atm', 'office_supply',
      'hardware_and_equipment',
      'finance'
    ],
    membershipId: 'membership-id',
    cardLevel: 'virtual',
    monthlyLimit: 1300,
    dailyLimit: 100,
    paymentTransactionLimit: 1000,
    hasTransactionLimit: true,
    activeDays: [1, 2, 3, 4, 5], // From Monday to Friday
  },
  operationSettings: {
    uiParentElementId: 'dom-element-id',
  },
};
orderCard(cardConfig);

​

unlockCard()

unlockCard: (cardConfig) => Promise<Card>

Unlocks a locked card by showing the user the UI to perform MFA in the calling page. It will show an element on the screen where users will be able to go through the MFA authentication process and upon successful authentication, will perform the unlock operation.

​

Parameters

cardConfig

CardParams<UnlockCardSettings>

An object with the parameters to unlock the card. It requires a cardSettings object with the cardId property. If it was not provided when calling the SDK’s initialize function, an operationSettings object has to be passed too with the uiParentElementId property. This has to specify the ID of the DOM element where the UI for MFA will be displayed.

​

Returns

Promise<Card>

A promise that resolves to an object representing the unlocked card.

​

Throws

InvalidParametersError If the cardId is not provided or if the cardId is not a string.

​

Throws

InvalidParametersError If the uiParentElementId or operationSettings are not provided.

​

Example

const cardConfig = {
  cardSettings: {
    cardId: 'card-id',
  },
  operationSettings: {
    uiParentElementId: 'dom-element-id',
  },
};
const unlockedCard = await unlockCard(cardConfig);