You can initialize the fields by calling the init() method. Once this method is called, the sdk will emit the initializing, initialized, and/or the init_error change events.

window.confidoHostedFields.init(options: Options): Promise<void>;

You can call init() multiple times in the same context. Each call will trigger a new initializing, initalized, and/or init_error sequence. The fields will also be reloaded each time init() is called.

Example

Example initializing the hosted fields for a Payment session.

async function initHostedFields() {
  const res = await getPaymentTokenFromMyBackend();

  const fieldStyles = {
    border: "none",
    color: "rgb(26, 32, 44)",
    "font-family":
      '-apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif',
    "font-weight": 400,
    height: "38px",
    width: "100%",
    "font-size": "16px",
  };

  window.confidoHostedFields.init({
    paymentToken: res.paymentToken,
    activeForm: "card",
    fields: {
      accountNumber: {
        containerId: "account-number",
        style: fieldStyles,
      },
      accountHolderName: {
        containerId: "account-holder-name",
        style: fieldStyles,
      },
      routingNumber: {
        containerId: "routing-number",
        style: fieldStyles,
      },
      cardNumber: {
        containerId: "card-number",
        style: fieldStyles,
      },
      cardExpirationDate: {
        containerId: "card-exp",
        style: fieldStyles,
      },
      cardSecurityCode: {
        containerId: "card-cvv",
        style: fieldStyles,
      },
    },
  });
}

Method Params Object

paymentToken
string

Payment Token returned from a paymentSessionCreate mutation. Required when using a Payment Session type.

savePaymentMethodToken
string

Token returned from a createSavePaymentMethodToken mutation call. Required when using a Save Payment Method Session type.

activeForm
enum
required

The initial active form. This can be either card or ach. The active form determines which fields are loaded.

fields
object
required

Configuration for the hosted fields.