Field Placeholder Text Formatting (Stripe Gateway)

Hi @twoagc,

Currently, we are using Stripe Elements within Stripe add-on which is loading the Card Number, CVC, and Expiration fields via iframe due to which the CSS implemented from theme CSS files will not be loaded on those credit card fields.

However, we have already provided an option to manage the UI of those credit card fields. But, before proceeding to that you need to read through some of the docs.
1. https://stripe.com/docs/stripe-js/reference#element-options
2. https://github.com/WordImpress/Give-Docs/issues/169#issuecomment-402198365

Here is the list of filter hooks which you can use to implement your theme styling on the credit card fields:
1. give_stripe_get_element_font_styles – This filter will be used to load custom fonts within the stripe credit card fields.
2. give_stripe_get_element_base_styles – This filter will be used to load default stripe credit card field styling.
3. give_stripe_get_element_complete_styles – This filter will be used to load stripe credit card fields when the fields are complete.
4. give_stripe_get_element_invalid_styles – This filter will be used to load stripe credit card fields when the fields are invalid or to show errors.
5. give_stripe_get_element_empty_styles – This filter will be used to load stripe credit card fields when the fields are empty.

Mehul,

Good morning … and thank you! I thoroughly understand the underlying problem (iFrames) and agree (with someone’s suggestion) that formatting these 3 Stripe fields should be included with in the Stripe plug-in settings. In any case, until then, I will try your suggestion.

Based on what you sent me, I believe this is the exact snippet that I need to use to make the Stripe placeholder text fields match the other GiveWP placeholder text fields:

function give_stripe_set_element_empty_styles_callback( $empty_styles ) {

	$theme_empty_styles = array(
		'::placeholder'   => array(
			'color'    => '#FF0000',
		),
	);

	$empty_styles = wp_parse_args( $theme_empty_styles, $empty_styles );

	return $empty_styles;

}

add_filter( 'give_stripe_get_element_empty_styles', 'give_stripe_set_element_empty_styles_callback' );

With that said, what Give and/or Strip file do I need to modify with this code snippet? Also, where should this snippet be placed within that file?

And, finally, you reference a video in one of your GitHub postings (https://drive.google.com/open?id=1aotd4g1vf-LhvfrgO6ZUv1tFOFgi6KAY) … could you please approve my request to view it?

Thank you,
Mark

Hi Mark,

Just a note that we are handling this with you via priority support (since it’s related to a premium add-on) and that the video above is public now. Follow up with us via email if you need anything else.

Regarding where to add that code, if you need assistance implementing custom PHP code on your website we have this guide:

https://givewp.com/documentation/resources/adding-custom-functions-to-your-wordpress-website/