Interface CardFormEmbedOptions

interface CardFormEmbedOptions {
    onCardNumberChange?: ((event) => void);
    onFormStateChange?: ((state) => void);
    onSubmit?: ((state) => void);
    optionalElements?: boolean | {
        cardNetworksInfo?: boolean;
        dccInfo?: boolean;
        emailField?: boolean;
        submitLoader?: boolean;
        transactionAgreement?: boolean;
    };
    target: HTMLElement;
}

Properties

onCardNumberChange? onFormStateChange? onSubmit? optionalElements? target

Properties

Optional onCardNumberChange

onCardNumberChange?: ((event) => void)

Callback function for each card number change.

Emits only when card number changes:

  • from invalid to valid
  • from valid to invalid
  • from valid to another valid

If CardFormEmbedState.token is null, the specified card number is invalid.

Make sure to always use the latest event.token and discard all the old ones.

Type declaration

Optional onFormStateChange

onFormStateChange?: ((state) => void)

Callback function for each form state change.

Emits when:

Type declaration

Optional onSubmit

onSubmit?: ((state) => void)

Callback function for when the user submits a valid form, most of the time using the ↩ Enter key. Optional, improves UX.

Type declaration

Optional optionalElements

optionalElements?: boolean | {
    cardNetworksInfo?: boolean;
    dccInfo?: boolean;
    emailField?: boolean;
    submitLoader?: boolean;
    transactionAgreement?: boolean;
}

Controls the visibility of various form elements. By default, all the elements are enabled.

Type declaration

  • Optional cardNetworksInfo?: boolean

    Displays a group of card network logos at the bottom of the form.

  • Optional dccInfo?: boolean

    Displays some info about dynamic currency conversion at the bottom of the form.

  • Optional emailField?: boolean

    Displays an additional text field for the user to enter their email address.

    Do not disable this unless you already provide the user's email address through another method, such as when setting up a new transaction on your backend.

  • Optional submitLoader?: boolean

    Displays a loading indicator over the form, after triggering the CardFormEmbed.pay method.

  • Optional transactionAgreement?: boolean

    Displays the transaction terms and conditions for the user to accept.

    Do not disable this unless you are already displaying it somewhere else.

target

target: HTMLElement

Specifies a container for the form.

Settings

Member Visibility

Theme

On This Page

onCardNumberChangeonFormStateChangeonSubmitoptionalElementstarget