Verestro Paytool Client SDK
    Preparing search index...

    Interface CardFormEmbedOptions

    Options for embedCardForm and CardFormEmbed.

    interface CardFormEmbedOptions {
        onCardNumberChange?: (
            event: CardNumberInfo | { token: null | string },
        ) => void;
        onFormStateChange?: (state: CardFormEmbedState) => void;
        onRemoveSavedCard?: (id: string) => void | Promise<void>;
        onSubmit?: (state: CardFormEmbedState) => void;
        optionalElements?:
            | boolean
            | {
                cardNetworksInfo?: boolean;
                cedulaField?: boolean;
                dccInfo?: boolean;
                emailField?: boolean;
                firstNameField?: boolean;
                lastNameField?: boolean;
                storeField?: boolean;
                submitLoader?: boolean;
                transactionAgreement?: boolean;
            };
        paymentMethods?: null
        | PaymentMethods;
        target: HTMLElement;
    }
    Index

    Properties

    onCardNumberChange? onFormStateChange? onRemoveSavedCard? onSubmit? optionalElements? paymentMethods? target

    Properties

    onCardNumberChange?: (event: CardNumberInfo | { token: null | string }) => void

    Callback function for each card number change.

    Emits when:

    • the typed card number validity transitions (invalid -> valid, valid -> invalid, valid -> another valid)
    • the selected saved card changes while viewing the saved cards list

    Payload shape depends on whether saved payment methods support is enabled (i.e. paymentMethods is provided):

    Make sure to always use the latest value (token/id) and discard any older ones.

    onFormStateChange?: (state: CardFormEmbedState) => void

    Callback function for each form state change.

    Emits when:

    Note: token is deprecated and will be removed in a future release. Prefer using CardFormEmbedState.cardNumberInfo for client-side branching and CardFormEmbedState.paymentMethodData as the value you send to your backend.

    onRemoveSavedCard?: (id: string) => void | Promise<void>

    Callback when a user requests removing a saved card from the list.

    This fires when the user clicks the "Remove" link next to a saved card inside the card form UI. You should handle the request on your server and remove the stored payment method using your backend API.

    Note: The SDK will not remove the card automatically. Use this callback to perform the removal and optionally refresh the form by passing an updated paymentMethods list next time you render.

    onSubmit?: (state: CardFormEmbedState) => void

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

    optionalElements?:
        | boolean
        | {
            cardNetworksInfo?: boolean;
            cedulaField?: boolean;
            dccInfo?: boolean;
            emailField?: boolean;
            firstNameField?: boolean;
            lastNameField?: boolean;
            storeField?: boolean;
            submitLoader?: boolean;
            transactionAgreement?: boolean;
        }

    Controls the visibility of various form elements.

    • true (default): uses each element's default visibility (most are shown; cedulaField is hidden unless explicitly enabled).
    • false: all optional elements are hidden.
    • object: toggle elements individually.

    Type Declaration

    • boolean
    • {
          cardNetworksInfo?: boolean;
          cedulaField?: boolean;
          dccInfo?: boolean;
          emailField?: boolean;
          firstNameField?: boolean;
          lastNameField?: boolean;
          storeField?: boolean;
          submitLoader?: boolean;
          transactionAgreement?: boolean;
      }
      • OptionalcardNetworksInfo?: boolean

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

      • OptionalcedulaField?: boolean

        Note: This field is hidden by default. Set to true to explicitly show it.

      • OptionaldccInfo?: boolean

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

      • OptionalemailField?: 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.

      • OptionalfirstNameField?: boolean
      • OptionallastNameField?: boolean
      • OptionalstoreField?: boolean

        Displays a checkbox allowing the user to save the card for future payments.

      • OptionalsubmitLoader?: boolean

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

      • OptionaltransactionAgreement?: boolean

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

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

    paymentMethods?: null | PaymentMethods

    Initial list of saved payment methods used to populate the card form on mount. PaymentMethods

     {
       "paymentMethods": [
         {
           "type": "CARD",
           "storedPaymentMethodData": [
             {
               "type": "CARD",
               "id": "693f3244-9919-49ba-91c8-b095a5cf2ffb",
               "maskedCardNumber": "************9507",
               "expirationDate": "12/26",
               "cvcRequiredForPayment": false,
               "cardBrand": "MASTERCARD",
               "paymentMethodDataOwner": { "name": "Jan Kowal" }
             }
           ]
         }
       ]
     }
    target: HTMLElement

    Specifies a container for the form.

    Settings

    Member Visibility

    On This Page

    Properties