Options
All
  • Public
  • Public/Protected
  • All
Menu

Class PaymentCardEmbed

A convenience wrapper for the payment card embed iframe. You don't have to use this class to embed the payment card iframe, but it provides a more convenient way to interact with the iframe and listen to its events.

example

const embed = new PaymentCardEmbed({ url: 'https://embed.foxy.io/v1.html?template_set_id=123' });

await embed.mount(document.body); console.log('Token:', await embed.tokenize());

Hierarchy

  • PaymentCardEmbed

Index

Constructors

Properties

Methods

Constructors

constructor

  • new PaymentCardEmbed(__namedParameters: { url: string } & Partial<{ disabled: boolean; lang: string; readonly: boolean; style: Partial<{ --lumo-base-color: string; --lumo-body-text-color: string; --lumo-border-radius-m: string; --lumo-border-radius-s: string; --lumo-contrast-10pct: string; --lumo-contrast-50pct: string; --lumo-contrast-5pct: string; --lumo-disabled-text-color: string; --lumo-error-color-10pct: string; --lumo-error-color-50pct: string; --lumo-error-text-color: string; --lumo-font-family: string; --lumo-font-size-m: string; --lumo-font-size-s: string; --lumo-font-size-xs: string; --lumo-line-height-xs: string; --lumo-primary-color: string; --lumo-primary-color-50pct: string; --lumo-primary-text-color: string; --lumo-secondary-text-color: string; --lumo-size-m: string; --lumo-size-xs: string; --lumo-space-m: string; --lumo-space-s: string }>; translations: { default?: { cc-csc?: { label?: string; placeholder?: string; v8n_invalid?: string; v8n_required?: string }; cc-exp?: { label?: string; placeholder?: string; v8n_expired?: string; v8n_invalid?: string; v8n_required?: string }; cc-number?: { label?: string; placeholder?: string; v8n_invalid?: string; v8n_required?: string; v8n_unsupported?: string }; status?: { busy?: string; fail?: string; idle?: string; misconfigured?: string } }; square?: { label?: string; status?: { busy?: string; fail?: string; idle?: string } }; stripe?: { label?: string; status?: { busy?: string; fail?: string; idle?: string } } } }>): PaymentCardEmbed

  • Parameters

    • __namedParameters: { url: string } & Partial<{ disabled: boolean; lang: string; readonly: boolean; style: Partial<{ --lumo-base-color: string; --lumo-body-text-color: string; --lumo-border-radius-m: string; --lumo-border-radius-s: string; --lumo-contrast-10pct: string; --lumo-contrast-50pct: string; --lumo-contrast-5pct: string; --lumo-disabled-text-color: string; --lumo-error-color-10pct: string; --lumo-error-color-50pct: string; --lumo-error-text-color: string; --lumo-font-family: string; --lumo-font-size-m: string; --lumo-font-size-s: string; --lumo-font-size-xs: string; --lumo-line-height-xs: string; --lumo-primary-color: string; --lumo-primary-color-50pct: string; --lumo-primary-text-color: string; --lumo-secondary-text-color: string; --lumo-size-m: string; --lumo-size-xs: string; --lumo-space-m: string; --lumo-space-s: string }>; translations: { default?: { cc-csc?: { label?: string; placeholder?: string; v8n_invalid?: string; v8n_required?: string }; cc-exp?: { label?: string; placeholder?: string; v8n_expired?: string; v8n_invalid?: string; v8n_required?: string }; cc-number?: { label?: string; placeholder?: string; v8n_invalid?: string; v8n_required?: string; v8n_unsupported?: string }; status?: { busy?: string; fail?: string; idle?: string; misconfigured?: string } }; square?: { label?: string; status?: { busy?: string; fail?: string; idle?: string } }; stripe?: { label?: string; status?: { busy?: string; fail?: string; idle?: string } } } }>

    Returns PaymentCardEmbed

Properties

onsubmit

onsubmit: null | (() => void) = null

An event handler that is triggered when Enter is pressed in the card form. This feature is not available for template sets configured with the stripe_connect hosted payment gateway due to the limitations of Stripe.js.

Methods

Protected _createId

  • _createId(): string

Protected _createIframe

Protected _createMessageChannel

clear

  • clear(): void

configure

  • configure(config: Partial<{ disabled: boolean; lang: string; readonly: boolean; style: Partial<{ --lumo-base-color: string; --lumo-body-text-color: string; --lumo-border-radius-m: string; --lumo-border-radius-s: string; --lumo-contrast-10pct: string; --lumo-contrast-50pct: string; --lumo-contrast-5pct: string; --lumo-disabled-text-color: string; --lumo-error-color-10pct: string; --lumo-error-color-50pct: string; --lumo-error-text-color: string; --lumo-font-family: string; --lumo-font-size-m: string; --lumo-font-size-s: string; --lumo-font-size-xs: string; --lumo-line-height-xs: string; --lumo-primary-color: string; --lumo-primary-color-50pct: string; --lumo-primary-text-color: string; --lumo-secondary-text-color: string; --lumo-size-m: string; --lumo-size-xs: string; --lumo-space-m: string; --lumo-space-s: string }>; translations: { default?: { cc-csc?: { label?: string; placeholder?: string; v8n_invalid?: string; v8n_required?: string }; cc-exp?: { label?: string; placeholder?: string; v8n_expired?: string; v8n_invalid?: string; v8n_required?: string }; cc-number?: { label?: string; placeholder?: string; v8n_invalid?: string; v8n_required?: string; v8n_unsupported?: string }; status?: { busy?: string; fail?: string; idle?: string; misconfigured?: string } }; square?: { label?: string; status?: { busy?: string; fail?: string; idle?: string } }; stripe?: { label?: string; status?: { busy?: string; fail?: string; idle?: string } } } }>): void

  • Updates the configuration of the payment card embed. You can change style, translations, language and interactivity settings. To change the URL of the payment card embed, you need to create a new instance. You are not required to provide the full configuration object, only the properties you want to change.

    Parameters

    • config: Partial<{ disabled: boolean; lang: string; readonly: boolean; style: Partial<{ --lumo-base-color: string; --lumo-body-text-color: string; --lumo-border-radius-m: string; --lumo-border-radius-s: string; --lumo-contrast-10pct: string; --lumo-contrast-50pct: string; --lumo-contrast-5pct: string; --lumo-disabled-text-color: string; --lumo-error-color-10pct: string; --lumo-error-color-50pct: string; --lumo-error-text-color: string; --lumo-font-family: string; --lumo-font-size-m: string; --lumo-font-size-s: string; --lumo-font-size-xs: string; --lumo-line-height-xs: string; --lumo-primary-color: string; --lumo-primary-color-50pct: string; --lumo-primary-text-color: string; --lumo-secondary-text-color: string; --lumo-size-m: string; --lumo-size-xs: string; --lumo-space-m: string; --lumo-space-s: string }>; translations: { default?: { cc-csc?: { label?: string; placeholder?: string; v8n_invalid?: string; v8n_required?: string }; cc-exp?: { label?: string; placeholder?: string; v8n_expired?: string; v8n_invalid?: string; v8n_required?: string }; cc-number?: { label?: string; placeholder?: string; v8n_invalid?: string; v8n_required?: string; v8n_unsupported?: string }; status?: { busy?: string; fail?: string; idle?: string; misconfigured?: string } }; square?: { label?: string; status?: { busy?: string; fail?: string; idle?: string } }; stripe?: { label?: string; status?: { busy?: string; fail?: string; idle?: string } } } }>

      The new configuration.

    Returns void

mount

  • mount(root: Element): Promise<void>

  • Mounts the payment card embed in the given root element. If the embed is already mounted, it will be unmounted first.

    Parameters

    • root: Element

      The root element to mount the embed in.

    Returns Promise<void>

    A promise that resolves when the embed is mounted.

tokenize

  • tokenize(): Promise<string>

unmount

  • unmount(): void

Generated using TypeDoc