Styling and customization

Through the styles property in the formOptions object, the form can receive some styling specifications like font color and size, input height, border color and a few more. This is an example about how the styling options can be provided:

const formOptions = {
   showCardTypes: false,
   styles: {
      input: {
         color: '#db2828',
         borderRadius: 'none',
         fontSize: 20,
         height: 30
      },
      inputLabel: {
         fontSize: 16,
      },
      inputValidation: {
         borderColor: 'rgb(76, 175, 80)',
      },
      inputError: {
         borderColor: '#FFFF00'
      }
   }
};

const macropay = new Macropay(config);
macropay.initForm({
   containerId: '<The html container element id>',
   onSubmit: <A callback function>,
   formOptions
});

This way the rendered form will not show the CardTypes component and will receive some style properties for the input elements and their labels.

You can see the full list of properties that the styles object is able to receive in the corresponding table.