Using Gravity Forms ‘gform_stripe_elements_style’ PHP filter

by

The gform_stripe_elements_style filter allows you to modify the styles used with Stripe Elements to control the look of the Credit Card field in Gravity Forms.

Usage

add_filter('gform_stripe_elements_style', 'your_function_name', 10, 2);

Parameters

  • $cardStyles (array): The current styles applied to the Credit Card field.
  • $formId (int): The ID of the current form.

More information

See Gravity Forms Docs: gform_stripe_elements_style

Examples

Change the base styles

This example changes the base styles for the Credit Card field.

add_filter('gform_stripe_elements_style', 'set_base_stripe_styles', 10, 2);
function set_base_stripe_styles($cardStyles, $formId) {
    $cardStyles['base'] = array(
        'color' => 'purple',
        'fontSize' => '20px',
        'fontFamily' => 'Comic Sans, fantasy',
        'fontSmoothing' => 'antialiased'
    );

    return $cardStyles;
}

Change the invalid styles

This example changes the styles for the Credit Card field when the input is invalid.

add_filter('gform_stripe_elements_style', 'set_invalid_stripe_styles', 10, 2);
function set_invalid_stripe_styles($cardStyles, $formId) {
    $cardStyles['invalid'] = array(
        'color' => '#e5424d',
        ':focus' => array(
            'color' => 'red'
        )
    );

    return $cardStyles;
}

Apply different styles to different forms

This example applies different styles to the Credit Card field based on the form ID.

add_filter('gform_stripe_elements_style', 'set_stripe_styles_per_form', 10, 2);
function set_stripe_styles_per_form($cardStyles, $formId) {
    if ($formId == 1) {
        $cardStyles['base'] = array(
            'color' => 'blue'
        );
    } elseif ($formId == 2) {
        $cardStyles['base'] = array(
            'color' => 'green'
        );
    }

    return $cardStyles;
}

Change the placeholder color

This example changes the placeholder color for the Credit Card field.

add_filter('gform_stripe_elements_style', 'set_placeholder_color', 10, 2);
function set_placeholder_color($cardStyles, $formId) {
    $cardStyles['base']['::placeholder'] = array(
        'color' => 'gray'
    );

    return $cardStyles;
}

Change the font size for invalid input

This example changes the font size for the Credit Card field when the input is invalid.

add_filter('gform_stripe_elements_style', 'set_invalid_font_size', 10, 2);
function set_invalid_font_size($cardStyles, $formId) {
    $cardStyles['invalid'] = array(
        'fontSize' => '18px'
    );

    return $cardStyles;
}