Description
This filter allows styles to be used with Stripe Elements to control the look of the Credit Card field.
For more information about which styles may be applied, check out the Stripe Style object reference (when using the Stripe Card field without the setting for “Use Stripe’s Payment Element” enabled) or Stripe’s Elements Appearance API (when using Stripe Card field with the setting for “Use Stripe’s Payment Element” enabled). To simplify, Style Reference for Stripe’s Card Element and Style Reference for Stripe’s Payment Element.
Usage
add_filter( 'gform_stripe_elements_style', 'your_function_name', 10, 3);
Parameters
| Key | Type | Description |
|---|---|---|
| $styles | array | Array of the current styles applied. |
| $form_id | int | The current form ID. |
| $is_payment_element_enabled | bool | Whether or not the payment element is enabled. |
Examples
Set a custom style for Stripe Field.
This example checks whether the setting “Use Stripe’s Payment Element” is enabled and styles Stripe’s Card Element or Payment Element according to Stripe requirements.
add_filter( 'gform_stripe_elements_style', function( $card_styles, $form_id, $is_payment_element_enabled ) {
if ( $is_payment_element_enabled ) {
// reference https://docs.stripe.com/elements/appearance-api
$card_styles['variables'] = array(
'colorPrimary' => '#e0643b',
'colorTextSecondary' => '#465459',
'colorText' => '#272829',
'fontSizeBase' => '14px',
'tabSpacing' => '1rem'
);
$card_styles['rules'] = array(
'.Tab:hover' => array(
'boxShadow' => 'var(--focusBoxShadow)'
)
);
} else {
// reference https://docs.stripe.com/js/appendix/style
$card_styles['base'] = array(
'color' => '#465459',
'fontSize' => '16px',
':focus' => array(
'color' => '#272829'
)
);
}
return $card_styles;
}, 10, 3 );
Placement
This code can be used in the functions.php file of the active theme, a custom functions plugin, a custom add-on, or with a code snippets plugin.
See also the PHP section in this article: Where Do I Put This Code?
Since
This filter was added in Stripe version 2.6.
Source Code
This filter is located in GFStripe::register_init_scripts() in gravityformsstripe/class-gf-stripe.php.