Card

The card-collection element. Wraps an Evervault card iframe and, when configured, renders billing-address and identity-field sections alongside it.

Construct via frame.createElement('card', options) — do not call the constructor directly.

Listen for change and complete events to drive your submit button's enabled state. On complete, send the tokenized payload to your backend, which runs the Account + PaymentMethod + Transfer calls; the charge confirms server-side. Call frame.confirmCardPayment only if the Transfer returns a 3D Secure challenge.

EXAMPLE
import Frame from '@framepayments/frame-js';

const frame = await Frame.init('pk_sandbox_...');
const card = await frame.createElement('card', { billing: true });

card.on('complete', () => {
  submitButton.disabled = false;
});

card.mount('#card-container');

Element options

accountIdstringoptional

Account ID to load saved payment methods for. When provided, the SDK fetches the account's saved payment methods and renders them as a selectable list above the card input. Selecting a saved method hides the card input and billing form (they reappear when the customer chooses "Add new payment method"). The account profile is also fetched to pre-fill any enabled identityFields.

alwaysShowCardInputbooleanoptional

When true, the card input is always visible below the saved methods list even when a saved method is selected. The customer's selection still satisfies the completion requirement — they do not need to fill in the card input as well. Defaults to false, where selecting a saved method hides the card input and shows an "Add new payment method" row instead.

billingbooleanoptional

When true, renders a billing address form below the card iframe.

cardThemeunknownoptional

Theme object for the Evervault card iframe. Use frame.cardTheme(preset) to construct one. Styles only the card iframe — does not affect billing address or identity fields.

identityFieldsIdentityFieldsOptionsoptional

When set, renders an identity-fields section above the card iframe.

savedPaymentMethodTypesSavedPaymentMethodTypesoptional

Controls which saved payment method types are shown when accountId is set. Defaults to 'card'. Pass 'card_and_ach' to also surface saved ACH bank accounts alongside cards.

[key: string]unknownoptional

Any remaining keys are forwarded to the Evervault card iframe (autoFocus, fields, translations, etc.). See Evervault's docs for the full list.

Methods

Events