【WooCommerce】Stripe決済画面からJCBカードのアイコンを削除する

たろ

JCBカードのアイコンを削除する方法が知りたいんだけど、、、？

こんな疑問にお答えします。

バージョン

• WooCommerce Stripe ゲートウェイ：バージョン 5.0.0

WooCommerceの決済でJCBカードを使うには審査が必要

記載の通りなのですが、WooCommerceの決済でJCBカードを使えるようにするには審査をする必要があります。

未審査の場合は、JCBカードを使うことができませんから非表示にしておく必要があります。

WooCommerceの設定画面なども探してみましたがアイコンを消すやり方がわからずに困ってしまいました。

調べてみるとプログラムで解決できそうだったので成功したやり方をメモしておきます。

サンプルコード

function my_remove_icon( $icons ) {
  $icons = str_replace( '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/jcb.svg" class="stripe-jcb-icon stripe-icon" alt="JCB" />', '', $icons );
  return $icons;
 }
 add_filter( 'woocommerce_gateway_icon', 'my_remove_icon');

woocommerce_gateway_icon フックを通してアイコンを削除します。

アイコン自体はプラグイン内のPHPファイルで管理されていました。

以下のパス参照：
woocommerce-gateway-stripe/includes/abstracts/abstract-wc-stripe-payment-gateway.php

public function payment_icons() {
		return apply_filters(
			'wc_stripe_payment_icons',
			[
				'visa'       => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/visa.svg" class="stripe-visa-icon stripe-icon" alt="Visa" />',
				'amex'       => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/amex.svg" class="stripe-amex-icon stripe-icon" alt="American Express" />',
				'mastercard' => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/mastercard.svg" class="stripe-mastercard-icon stripe-icon" alt="Mastercard" />',
				'discover'   => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/discover.svg" class="stripe-discover-icon stripe-icon" alt="Discover" />',
				'diners'     => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/diners.svg" class="stripe-diners-icon stripe-icon" alt="Diners" />',
				'jcb'        => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/jcb.svg" class="stripe-jcb-icon stripe-icon" alt="JCB" />',
				'alipay'     => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/alipay.svg" class="stripe-alipay-icon stripe-icon" alt="Alipay" />',
				'wechat'     => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/wechat.svg" class="stripe-wechat-icon stripe-icon" alt="Wechat Pay" />',
				'bancontact' => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/bancontact.svg" class="stripe-bancontact-icon stripe-icon" alt="Bancontact" />',
				'ideal'      => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/ideal.svg" class="stripe-ideal-icon stripe-icon" alt="iDeal" />',
				'p24'        => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/p24.svg" class="stripe-p24-icon stripe-icon" alt="P24" />',
				'giropay'    => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/giropay.svg" class="stripe-giropay-icon stripe-icon" alt="Giropay" />',
				'eps'        => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/eps.svg" class="stripe-eps-icon stripe-icon" alt="EPS" />',
				'multibanco' => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/multibanco.svg" class="stripe-multibanco-icon stripe-icon" alt="Multibanco" />',
				'sofort'     => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/sofort.svg" class="stripe-sofort-icon stripe-icon" alt="SOFORT" />',
				'sepa'       => '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/sepa.svg" class="stripe-sepa-icon stripe-icon" alt="SEPA" />',
			]
		);
	}

海外のリソースなどをあたってみましたが、置換元のコードはバージョンによって違うようなので気をつけながら利用したいと思います。