Support » Plugin: Give - Donation Plugin and Fundraising Platform » Field Placeholder Text Formatting (Stripe Gateway)

  • Resolved twoagc

    (@twoagc)



    Hello! First of all, we are using Stripe Gateway with the GiveWP application. Secondly, I’m trying to format the field placeholder text on the Give donate form (make the field placeholder text darker). I was successful in getting the GiveWP fields placeholder text formatted. Unfortunately, I haven’t been able to format the Stripe field placeholder text (cc number, cc expire date and cc csv). You can view this problem at our Donate page:

    https://www.wounited.org/wp/donate/

    BTW, to highlight the problem, I formatted the GiveWP placeholder text fields in red. With that said, this is the CSS coding I used for the GiveWP placeholder text fields:

    .give-input.give-fl-input::-webkit-input-placeholder {
          color: red !important;
    }
    
    .give-input.give-fl-input:-moz-placeholder {
          color: red !important;
          opacity: 1;
    }
    
    .give-input.give-fl-input::-moz-placeholder {
          color: red !important;
          opacity: 1;
    }
    
    .give-input.give-fl-input:-ms-input-placeholder {
          color: red !important;
    }
    
    .give-input.give-fl-input::-ms-input-placeholder {
          color: red !important;
    }

    Bottom line, what CSS code can I used to format the three (3) Stripe placeholder text fields the same way?

    Thank you,
    Mark

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Contributor Mehul Gohil

    (@mehul0810)

    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

    Plugin Support Ben Meredith

    (@benmeredithgmailcom)

    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/

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.