# Advanced Topics

Poynt Collect brings a series of essential features and functions that are critical to ensure an ideal performance. However, there are multiple advanced actions that developers can opt to include in their code.

NOTE

We are constantly working to add new updates and features to Poynt Collect, stay tuned to find out more about this payment processing solution and the new upgrades we are working on.

# Customized CSS

The CSS style of the form includes a default design. However, we have created the possibility to include custom CSS values. Below is an example of the elements you can configure.

TIP

Poynt collect uses a library called react-payment-inputs found here: https://github.com/medipass/react-payment-inputs#styles (opens new window)

CustomCss Interface:

interface CustomCssBase {
  container?: Record<string, string>;
  inputDefault?: Record<string, string>;
  inputErrored?: Record<string, string>;
  input?: {
    firstName?: Record<string, string>;
    lastName?: Record<string, string>;
    email?: Record<string, string>;
    zip?: Record<string, string>;
    address?: Record<string, string>;
    city?: Record<string, string>;
    territory?: Record<string, string>;
    country?: Record<string, string>;
    phone?: Record<string, string>;
  };
}

// only applies when displayComponents.labels === false
// see https://github.com/medipass/react-payment-inputs#styles for more details
interface CustomCssReactPaymentInputs {
  fieldWrapper?: {
    base?: string | Record<string, string>;
    errored?: string | Record<string, string>;
  };
  inputWrapper?: {
    base?: string | Record<string, string>;
    errored?: string | Record<string, string>;
    focused?: string | Record<string, string>;
  };
  input?: {
    base?: string | Record<string, string>;
    errored?: string | Record<string, string>;
    cardNumber?: string | Record<string, string>;
    expiryDate?: string | Record<string, string>;
    cvc?: string | Record<string, string>;
  };
  errorText?: {
    base?: string | Record<string, string>;
  };
}

// only applies when displayComponents.labels === true
interface CustomCssLabels {
  inputLabel?: Record<string, string>;
  requiredMark?: Record<string, string>;
  rowCardNumber?: Record<string, string>;
  rowExpiration?: Record<string, string>;
  rowCVV?: Record<string, string>;
  rowZip?: Record<string, string>;
  rowFirstName?: Record<string, string>;
  rowLastName?: Record<string, string>;
  rowEmailAddress?: Record<string, string>;
  rowAddress?: Record<string, string>;
  rowCity?: Record<string, string>;
  rowTerritory?: Record<string, string>;
  rowCountry?: Record<string, string>;
  rowPhone?: Record<string, string>;
  rowShippingZip?: Record<string, string>;
}

// only applies when displayComponents.paymentLabel === true
interface CustomCssSectionLabels {
  sectionLabel?: Record<string, string>;
}

// only applies when displayComponents.inlineErrors === true
interface CustomCssError {
  inputError?: Record<string, string>;
}

type CustomCss = 
  CustomCssBase &
  CustomCssReactPaymentInputs &
  CustomCssLabels &
  CustomCssSectionLabels &
  CustomCssError;

Example 1:

const options = {
  displayComponents: {
    zipCode: true,
    labels: false,
  },
  additionalFieldsToValidate: [
    "zipCode"
  ],
  iFrame: {
    width: "100%",
    height: "auto",
    border: "0px",
  },
  customCss: {
    container: {
      "color": "#111",
      "font-family": "Roboto, sans-serif",
      "height": "auto",
      "flex-flow": "row wrap",
      "justify-content": "normal",
      "align-content": "center",
      "margin": "0 auto",
    },
    fieldWrapper: {
      base: {
        "margin-bottom": "1rem",
      },
    },
    inputWrapper: {
      base: {
        "border-color": "green",
      },
      errored: {
        "border-color": "maroon",
      },
      focused: {
        "border-color": "unset",
        "box-shadow": "unset",
        "outline": "1px solid blue",
        "outline-offset": "0px",
      },
    },
    input: {
      base: {
        "font-family": "Roboto, Open Sans, Segoe UI, sans-serif",
        "color": "green",
      },
      errored: {
        "color": "maroon",
      },
      cardNumber: {
        "width": "17rem",
      },
      expiryDate: {
        "width": "5rem",
      },
      cvc: {
        "width": "3rem",
      },
      zip: {
        "width": "5rem",
      },
    },
    errorText: {
      base: {
        "color": "maroon",
        "position": "absolute",
        "margin-top": "60px",
        "margin-left": "5px",
      },
    },
  },
};

collect.mount("domElementId", document, options);

Example 2:

const options = {
  displayComponents: {
    labels: true,
    zipCode: true,
    firstName: true,
    lastName: true,
    emailAddress: true,
  },
  additionalFieldsToValidate: [
    "zipCode",
    "firstName",
    "lastName",
    "emailAddress"
  ],
  iFrame: {
    width: "100%",
    height: "390px",
    border: "0px",
  },
  style: {
    theme: "ecommerce",
  },
  customCss: {
    container: {
      "color": "#111",
      "font-family": "Roboto, sans-serif",
      "height": "auto",
      "flex-flow": "row wrap",
      "justify-content": "normal",
      "align-content": "center",
      "margin": "15px auto",
    },
    inputLabel: {
      "color": "#111",
      "display": "block",
      "font-size": "15px",
      "font-weight": "700",
      "line-height": "20px",
      "margin-bottom": "7.5px",
      "margin-top": "5px",
      "text-transform": "capitalize",
      "letter-spacing": "0px",
    },
    inputDefault: {
      "color": "#111",
      "font-family": "Roboto, sans-serif",
      "font-size": "15px",
      "line-height": "20px",
    },
    sectionLabel: {
      "font-size": "13px",
      "line-height": "18px",
      "font-weight": "500",
      "letter-spacing": "0.5px",
      "color": "#767676",
      "text-transform": "uppercase",
      "margin-top": "15px",
      "margin-bottom": "10px",
      "padding-left": "0px",
      "padding-right": "0px",
    },
    requiredMark: {
      "color": "#ae1302",
      "font-size": "15px",
      "line-height": "20px",
      "margin-left": "3px",
    },
    rowFirstName: {
      "width": "50%",
      "padding-left": "0px",
    },
    rowLastName: {
      "width": "50%",
      "padding-right": "0px",
    },
    rowCardNumber: {
      "width": "75%",
      "padding-left": "0px",
    },
    rowCVV: {
      "width": "35%",
      "padding-left": "0px",
    },
    rowExpiration: {
      "width": "25%",
      "padding-right": "0px",
    },
    rowZip: {
      "width": "65%",
      "padding-right": "0px",
    },
    rowEmailAddress: {
      "width": "100%",
      "margin-bottom": "3px",
      "padding-left": "0px",
      "padding-right": "0px",
    },
  },
};

collect.mount("domElementId", document, options);

# Collect JavaScript Version History

Semantic Version	Change List
v2.0.25	Compatibility improvements
v2.0.19	Performance improvements
v2.0.15	Mixpanel
v2.0.11	Card-on-file
v2.0.4	reCAPTCHA
v2.0.1	Credit card form ApplePay GooglePay

← Transaction Pricing Code Samples →