# 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.


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.


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

const options = {
  amount: 2000,
  customCSS: {
    iFrame: {
      width: "397px",
      height: "150px",
      border: "0"
    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: `color: green;`,
      errored: `color: maroon;`,
      cardNumber: ` font-family: Roboto, Open Sans, Segoe UI, sans-serif; width: 17rem;`,
      expiryDate: `font-family: Roboto, Open Sans, Segoe UI, sans-serif; text-transform: uppercase; width: 5rem;`,
      cvc: `font-family: Roboto, Open Sans, Segoe UI, sans-serif; width: 3rem;`
    errorText: {
      base: `color: maroon;position: absolute;margin-top: 60px;margin-left: 5px;font-family: Roboto, Open Sans, Segoe UI, sans-serif;`

# Collect JavaScript Version History

Semantic Version Change List
  • Credit card form
  • ApplePay
  • GooglePay
Last Updated: 10/21/2022, 9:06:37 AM