Static icons not showing on 5.6.2

https://github.com/woocommerce/woocommerce-gateway-stripe/issues/2033#issuecomment-937425299

Yes, please just revert to the static icons. Our website conversions have crashed since the update and we have no choice but to roll back. Customers need to know up front what cards are accepted before they will even input their card number.

This has gone too far. Please just give us all a break

Ridiculous to remove them entirely. Visa and Mastercard actually require their payment logos to be clearly displayed at checkout in their merchant agreements I’ve signed with other payment processors, can’t imagine it’s any different with Stripe.

Our customers now have no idea which card brands our store can accept and our failed transactions has started to spike.

Please add the static images back as per v5.5.0

Same issue. make it an option the admin can set. Following

Yes, please put all the accepted card icons back. They really help with conversions.

Another vote for bringing back the static icons.

Same here. Bring them back. They are important for the shops conversion rate.

I just needed specific icons back, but feel free to modify and use this code everyone. We’ll all go broke if we’re waiting for another release and there’s no guarantee they’ll actually reimplement the icons.

Hope this saves someone some time…

I also suggest copying and moving the icons to your child theme or a custom plugin.

Code is untested as I modified it from our environment. Test locally or on staging first before deploying live.

function readd_stripe_icon_to_icons_string($icon_string, $payment_gateway_id)
{
	if ($payment_gateway_id == 'stripe') {
		$icon_string = '<img src="' . get_bloginfo('url') . '/wp-content/plugins/woocommerce-gateway-stripe/assets/images/visa.svg" class="stripe-icon" alt="VISA" />';
		$icon_string .= '<img src="' . get_bloginfo('url') . '/wp-content/plugins/woocommerce-gateway-stripe/assets/images/mastercard.svg" class="stripe-icon" alt="MasterCard" />';
		$icon_string .= '<img src="' . get_bloginfo('stylesheet_directory') . '/images/payment-icons/amex.svg" class="stripe-icon" alt="AMEX" />';
		$icon_string .= '<img src="' . get_bloginfo('url') . '/wp-content/plugins/woocommerce-gateway-stripe/assets/images/discover.svg" class="stripe-icon" alt="Discover" />';
	}
	return $icon_string;
}

add_filter('woocommerce_gateway_icon', 'readd_stripe_icon_to_icons_string', 10, 2);

Jesus, first the brilliant idea with the animated icons, now removed them completely. Put them back or at least have an option for it!

Thanks for the feedback and apologies for the inconvenient change.

This change was mainly introduced because of the (early access) new checkout experience, which can offer multiple Stripe payment methods under the same payment gateway option on the checkout page.

Other than the inconsistency with that, we also had another issue where the icons would appear misaligned in different templates, because of the amount of icons, hence the first change where we introduced the rotating credit card brands, which were consistent with the new checkout experience.

We’re taking your feedback into consideration for the next releases.

For now, I would recommend @jkohlbach’s alternative to bring the icons back. Here’s a snippet for all the credit card brands:

function add_credit_card_gateway_icons( $icon_string, $gateway_id ) {
	if ( 'stripe' === $gateway_id ) {
		$icon_string  = '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/visa.svg" class="stripe-visa-icon stripe-icon" alt="Visa" />';
		$icon_string .= '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/mastercard.svg" class="stripe-mastercard-icon stripe-icon" alt="Mastercard" />';
		$icon_string .= '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/amex.svg" class="stripe-amex-icon stripe-icon" alt="American Express" />';
		$icon_string .= '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/discover.svg" class="stripe-discover-icon stripe-icon" alt="Discover" />';
		$icon_string .= '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/diners.svg" class="stripe-diners-icon stripe-icon" alt="Diners" />';
		$icon_string .= '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/jcb.svg" class="stripe-jcb-icon stripe-icon" alt="JCB" />';
	}
	return $icon_string;
}

add_filter( 'woocommerce_gateway_icon', 'add_credit_card_gateway_icons', 10, 2 );

Can anyone please help me with where to add this snippet? I am using “Snippets” plug-in for adding snippets but it seems to be causing issues. The icons are again stacked. Also, icons are not scrolling but are sticky. Please refer to this:

View post on imgur.com

Also, I’m not using any Additional CSS regarding this.

I’m glad there’s some code to add back these icons!! Was very confused when they just disappeared

However how can we position them to the right of the iframe/div area? So the text is on the left and then the icons are on the right but keeping the order
Visa / Mastercard / AMEX

Hey there @akadabas and @mattthomas-photography ,

Can you please share a link to your live site to replicate this?

Thanks!

Hey @battouly heres the link to my site

Matt Thomas Photography

If you add the code to the functions.php it’ll work fine. If you don’t know what you’re doing in the functions file then be careful