Customizing Stripe Elements

  • Resolved cwhitelaw

    (@cwhitelaw)


    3 years, 8 months ago

    Hello,

    Great plugin. Thanks for making it.

    I am having trouble customizing the stripe payment fields. It seems that the “wc-stripe-functions.php” file has a function wc_stripe_get_custom_forms() that is already applying a filter (‘wc_stripe_get_custom_forms’) and I can’t override that in my functions.php. Even when I change to the default stripe form, the custom styles are added from the cs_stripe_get_custom_forms. Any ideas how I can do this to change the color and fonts of the inputs?

    Kind Regards,
    Chris

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Payment Plugins

    (@mrclayton)

    Hi @cwhitelaw,

    I am glad you’re liking the plugin.

    To change the colors and fonts for the default Stripe form you would use filter wc_stripe_cc_element_style. Here is the filter in the code API Docs:

    https://docs.paymentplugins.com/wc-stripe/api/source-class-WC_Payment_Gateway_Stripe_CC.html#101

    If you want to change the styling for any of the custom forms you can do that using filter wc_stripe_get_card_custom_field_options.

    https://docs.paymentplugins.com/wc-stripe/api/source-class-WC_Payment_Gateway_Stripe_CC.html#91

    Here is an example where the base font size is changed to 16px:

    add_filter('wc_stripe_get_card_custom_field_options', function($options){
    $options['cardNumber']['style']['base']['fontSize'] = '16px';
    return $options;
});

    Kind Regards,

    Thread Starter cwhitelaw

    (@cwhitelaw)

    Thanks so much fo the fast reply. I was able to use a custom template for the “simple” style and added this php. That’s a lot of lines, is there a short hand version of that? Like a way to assign to all of the inputs in one line?

    Kind Regards,
    Chris

    add_filter('wc_stripe_get_card_custom_field_options', function($options){
    $options['cardNumber']['style']['base']['fontSize'] = '16px';
	$options['cardExpiry']['style']['base']['fontSize'] = '16px';
	$options['cardCvc']['style']['base']['fontSize'] = '16px';
	
	$options['cardNumber']['style']['base']['color'] = '#303386';
	$options['cardExpiry']['style']['base']['color'] = '#303386';
	$options['cardCvc']['style']['base']['color'] = '#303386';
	
	$options['cardNumber']['style']['base']['fontFamily'] = 'freight-text-pro';
	$options['cardExpiry']['style']['base']['fontFamily'] = 'freight-text-pro';
	$options['cardCvc']['style']['base']['fontFamily'] = 'freight-text-pro';
	
	$options['cardNumber']['style']['base']['fontWeight'] = '400';
	$options['cardExpiry']['style']['base']['fontWeight'] = '400';
	$options['cardCvc']['style']['base']['fontWeight'] = '400';
	
	$options['cardNumber']['style']['base']['letterSpacing'] = '.8px';
	$options['cardExpiry']['style']['base']['letterSpacing'] = '.8px';
	$options['cardCvc']['style']['base']['letterSpacing'] = '.8px';
	
	$options['cardNumber']['style']['invalid']['color'] = '#a00';
	$options['cardExpiry']['style']['invalid']['color'] = '#a00';
	$options['cardCvc']['style']['invalid']['color'] = '#a00';
	
	$options['cardNumber']['style']['empty']['::placeholder']['color'] = '#b8bad1';
	$options['cardExpiry']['style']['empty']['::placeholder']['color'] = '#b8bad1';
	$options['cardCvc']['style']['empty']['::placeholder']['color'] = '#b8bad1';
	
    return $options;
});
    Plugin Author Payment Plugins

    (@mrclayton)

    @cwhitelaw,

    You can use filter wc_stripe_cc_element_style to change the styles which will be applied to all of the custom fields.

    https://docs.paymentplugins.com/wc-stripe/api/source-class-WC_Payment_Gateway_Stripe_CC.html#101

    That will allow you to change all of the style fields globally.

    Kind Regards,

    Thread Starter cwhitelaw

    (@cwhitelaw)

    OK. Thanks so much.

    Plugin Author Payment Plugins

    (@mrclayton)

    Hi @cwhitelaw

    No problem, glad I could help. If you have a minute we always appreciate a good review.

    https://www.ads-software.com/support/plugin/woo-stripe-payment/reviews/

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Customizing Stripe Elements’ is closed to new replies.