Credit Card Icons broken images on checkout

Replies: 0

Hey,

I am using EWay Payments for Woo plugin, which is currently configured with Credit Cards. On the checkout page the images for the MasterCard, AMEX, Diners is broken. The Visa image still shows up.

I found out that images on the checkout page are shown in png format, whereas in the assets these images are stored in SVG format

Here’s how the payment methods are listed.

<label for="payment_method_eway">
  Credit Card <img src="/wp-content/plugins/woocommerce/assets/images/icons/credit-cards/visa.png" alt="visa">
  <img src="/wp-content/plugins/woocommerce/assets/images/icons/credit-cards/mastercard.png" alt="mastercard">
  <img src="/wp-content/plugins/woocommerce/assets/images/icons/credit-cards/amex.png" alt="amex">
  <img src="/wp-content/plugins/woocommerce/assets/images/icons/credit-cards/diners.png" alt="diners">	
</label>

Reference Code

<label for="payment_method_<?php echo esc_attr( $gateway->id ); ?>"><?php echo esc_html( $gateway->get_title() ); ?><?php echo wp_kses_post( $gateway->get_icon() ); ?></label>

// Gateways are extracted using

$available_gateways        = WC()->payment_gateways->get_available_payment_gateways();

If the images are broken then it should be hidden and not appear as broken card images.

The issue seems to be link to $gateway->get_icon() method.

Would appreciate if this issue is address in next update.

Thanks,
Naved