gform_square_card_details_style

Description

This filter allows you to pass CSS-like properties and values to Square to control the look of the Square credit card details input.

For more information about which styles may be applied, check out the style reference in Square’s documentation.

Usage

gform.addFilter( 'gform_square_card_details_style', 'your_function_name', 10, 2 );

Parameters

  • styleObject {Object}
    An object that contains css selectors, properties and their values, selectors, property names and values should match documentation here.
  • formIdint
    The current form id.

Examples

Changes the card details field background to black and text color to white, only for a form that has an ID value that matches myFormId

gform.addFilter(  'gform_square_card_details_style', function( styleObject, formId ) {
  if ( formId === myFormId ) {
     styleObject.input.backgroundColor = '#000000';
     styleObject.input.color = '#FFFFFF';
  }

  return styleObject;
});

Placement

See the JavaScript/jQuery section in this article: Where Do I Put This Code?

Since

This filter was added in the official Gravity Forms Square Add-On version 1.7

Source Code

This filter is located in CardRenderer.getCardConfigurationStyleObject() in js/src/frontend/card-renderer.js.